ランダムな色を作る
完全にランダムなRGB
赤・緑・青の強さを、3つともバラバラに選んでいます。彩度や明度は、選んだ結果のままばらつきます。 いま出た8色は、彩度が34%〜100%、明度が28%〜61%まで散らばっています。
- #00049d白文字が読みやすい（14.0:1）
rgb(0, 4, 157)
hsl(238, 100%, 31%) - #128e2c黒文字が読みやすい（4.9:1）
rgb(18, 142, 44)
hsl(133, 78%, 31%) - #251977白文字が読みやすい（14.2:1）
rgb(37, 25, 119)
hsl(248, 65%, 28%) - #ad9e59黒文字が読みやすい（7.8:1）
rgb(173, 158, 89)
hsl(49, 34%, 51%) - #b40405白文字が読みやすい（7.1:1）
rgb(180, 4, 5)
hsl(360, 96%, 36%) - #c935c6黒文字が読みやすい（4.8:1）
rgb(201, 53, 198)
hsl(301, 58%, 50%) - #13ff8e黒文字が読みやすい（15.7:1）
rgb(19, 255, 142)
hsl(151, 100%, 54%) - #e352d9黒文字が読みやすい（6.5:1）
rgb(227, 82, 217)
hsl(304, 72%, 61%)
彩度と明度をそろえたHSL
色相（0〜360度、どの色みか）だけをランダムにし、彩度は60%〜85%、明度は45%〜65%の中に固定しています。 いま出た8色の彩度は60%〜85%、明度は45%〜62%でした。
- #d35050黒文字が読みやすい（5.0:1）
rgb(211, 80, 80)
hsl(0, 60%, 57%) - #d56b20黒文字が読みやすい（6.0:1）
rgb(213, 107, 32)
hsl(25, 74%, 48%) - #d4c240黒文字が読みやすい（11.6:1）
rgb(212, 194, 64)
hsl(53, 63%, 54%) - #3529e0白文字が読みやすい（8.3:1）
rgb(53, 41, 224)
hsl(244, 75%, 52%) - #4e2eb8白文字が読みやすい（8.7:1）
rgb(78, 46, 184)
hsl(254, 60%, 45%) - #b657db黒文字が読みやすい（5.4:1）
rgb(182, 87, 219)
hsl(283, 65%, 60%) - #ee822f黒文字が読みやすい（7.9:1）
rgb(238, 130, 47)
hsl(26, 85%, 56%) - #e05cb4黒文字が読みやすい（6.4:1）
rgb(224, 92, 180)
hsl(320, 68%, 62%)
よくある質問
「作り直す」を押すたびに、色は変わりますか？
変わります。「作り直す」を押すと、暗号用の乱数（crypto.getRandomValues）で新しい種を選び直すので、毎回ちがう並びになります。逆に、種の欄に前と同じ数字を打てば、同じ並びをいつでも再現できます。種は「色の並びを覚えておくための番号」だと思ってください。
彩度や明度の範囲を指定すると、必ずその範囲の色になりますか？
「彩度と明度をそろえたHSL」のほうは必ずその範囲に収まります。彩度と明度を、範囲の中の数に決めてから色を作っているためです。「完全にランダムなRGB」のほうは赤・緑・青をバラバラに選ぶだけなので、この範囲の指定とは関係がありません。2つを見比べられるように、あえて別の作り方にしています。
白い文字と黒い文字、どちらが読みやすいかはどう決めていますか？
背景色の明るさ（相対輝度）から、白文字・黒文字それぞれとのコントラスト比を計算し、比の大きいほうを選んでいます。どんな背景色でも、どちらか一方は必ず4.5:1（文字が読める最低の目安）以上になります。くわしい式と基準は、カラーコードの変換のページで説明しています。
何色まで一度に作れますか？
2色から24色までです。1色では2つの作り方を比べられませんし、あまり多いと画面に収まらず、かえって見比べにくくなります。もっと多く見たいときは、「作り直す」を何度か押して、気に入った並びを探してください。
入力した数値や、出てきた色はどこかに送信されますか？
送信しません。何色作るか・彩度や明度の範囲・種、どれもこの画面の中だけで計算していて、サーバーへ送る通信は発生しません。ブラウザを閉じれば何も残りません。
「完全にランダムなRGB」と「彩度・明度をそろえたHSL」を並べて出します。色ごとに、白文字と黒文字どちらが読みやすいかも判定します。
RGBを3つバラバラに選ぶと、そろわない色になります
「完全にランダムなRGB」は、赤・緑・青の強さをそれぞれ0から255の間でバラバラに選んでいます。 3つの数を独立に選ぶと、そこから読み取れる彩度（色の鮮やかさ）も明度（明るさ）も、0%から100%の全体に散らばります。 ほとんど灰色に近い、彩度の低い色が混ざることもあれば、真っ黒や真っ白に近くて 見分けにくい色が混ざることもあります。
実際にいま出ている色の彩度・明度の範囲は、上の説明文にそのまま数字で出ています。 「作り直す」を押すたびに範囲は変わりますが、たいてい大きく開いたままです。
彩度と明度を範囲で固定すると、そろった色になります
「彩度と明度をそろえたHSL」は、色相（何色か）だけをランダムにして、 彩度と明度は指定した範囲の中に固定しています。範囲を固定するといっても、 これが「唯一正しい配色」というわけではありません。彩度を高くすればはっきりした色が並びますし、 明度を下げれば落ち着いた色が並びます。既定では彩度60%〜85%・明度45%〜65%にしていますが、 上の欄でいつでも変えられます。どんな範囲を選んだかは、そのまま画面の数字に出ます。
実は、同じ3つの乱数を2通りに読んでいるだけです
種が同じとき、上の並びと下の並びの同じ順番の色は、まったく同じ3つの乱数から作られています。1つ目の数をそのまま赤の強さとして使うか、色相（何色か）として使うかが ちがうだけです。乱数そのものの「質」を変えたわけではありません。同じ数を、どう読み替えるかだけで、これほど印象が変わります。
白い文字と黒い文字、読みやすいのはどちらか
それぞれの色の上に、白文字が読みやすいか黒文字が読みやすいかを書き添えています。 判定には、背景色の明るさ（相対輝度）から求めるコントラスト比を使っていて、 比の大きいほうを選んでいます。式や基準のくわしい説明は、カラーコードの変換のページにまとめてあります。 ここでは「色を作るたびに、読みやすい文字色も一緒に分かる」ことだけを見てください。