使う場面
CSS で指定する色を、HEX から rgb() や hsl() の形に直したいときに使います。
文字の色と背景の色が読みやすい組み合わせかを、数字で確かめたいときにも使います。また、ひとつの色を決めたあとで、組み合わせる色の案がほしいときに、配色ジェネレーターとして使えます。
使い方
- 「色（#2d4bc8、rgb(45, 75, 200)、hsl(228, 63%, 48%) など）」の欄に、色のコードを入れます。「色を選ぶ」から、色を選ぶ方法もあります。最初は #2d4bc8 が入っています。
- 入れるたびに、結果がその場で変わります。押すボタンはありません。色見本の横に、HEX・RGB・HSL が 1 行ずつ出ます。
- 各行の「コピー」を押すと、その行の値がコピーされます。コピーできなかったときは「選択しました」と出て、値が選択された状態になるので、手でコピーします。
- 「文字を載せたときのコントラスト比」に、白い文字と黒い文字を載せた場合の比と判定が出ます。
- 「配色の案（押すとその色を入力にします）」の色を押すと、その色が「色」の欄に入り、すべての結果がその色に変わります。
色として読めない文字を入れると、「色として読めません。」で始まる案内を出して、結果の欄を空にします。前の色の結果は残しません。
変換と配色の決まり
HEX・RGB・HSL の書き方
読み取れる形は、次の 3 つです。大文字と小文字は区別しません。
- HEX: #2d4bc8
- 「#」は付けなくても読み取ります。
- 3 桁の #f80 は、各桁を 2 回ずつ書いた #ff8800 として読みます。
- RGB: rgb(45, 75, 200)
- 赤・緑・青の 3 つを、0 から 255 までの整数で書きます。
- 区切りは、カンマでも空白でも読み取ります。
- HSL: hsl(228, 63%, 48%)
- 色相を 0 から 360 までの整数（度）で書きます。360 は 0 と同じ色です。
- 彩度と明度を、0 から 100 までの整数に「%」を付けて書きます。
色相は色の種類を 0 から 360 度の輪に並べたときの位置、彩度は鮮やかさ、明度は明るさです。小数、透明度の rgba()、色の名前は読めません。
出力は、HEX が「#」付きの小文字 6 桁、RGB が rgb(r, g, b)、HSL が hsl(h, s%, l%) の形に決まっています。
HSL の丸めによるずれ
RGB から HSL を出すとき、色相・彩度・明度は整数に丸めます。丸めた HSL をそのまま入力すると、RGB が元の色とぴったり同じにならないことがあります。
HSL を入力したときの表示にも、同じことが起こります。入力した HSL は、いったん RGB に変換されます。表示される HSL は、その RGB から計算し直した数字なので、入力した数字と違うことがあります。色を正確に残したいときは、HEX か RGB を控えてください。
コントラスト比と AA の基準
コントラスト比は、2 つの色で、明るさがどれだけ違うかを表す数字です。値は 1 対 1 から 21 対 1 までで、1 対 1 は同じ色の組、21 対 1 は白と黒の組です。計算式は、Web アクセシビリティの指針である WCAG に従います。
まず、色ごとに相対輝度を求めます。赤・緑・青を 0 から 1 の数に直し、WCAG が決めた式で明るさに比例する値にしたあと、0.2126・0.7152・0.0722 の比で足し合わせます。比は、明るいほうの相対輝度に 0.05 を足した数を、暗いほうの相対輝度に 0.05 を足した数で割って出します。
WCAG の AA の基準は、普通の大きさの文字で 4.5 対 1 以上、大きい文字で 3 対 1 以上です。このツールは 4.5 以上かどうかだけを判定します。初期の色 #2d4bc8 の場合、白い文字は 7.11 対 1 で基準を満たし、黒い文字は 2.95 対 1 で基準に届きません。
比は、小数第 3 位以下を切り捨てて、小数第 2 位まで表示します。判定も、表示と同じ値で行います。たとえば実際の比が 4.496 なら、表示は 4.49 で、判定は基準に届かない側です。四捨五入で 4.50 と表示しながら、届かないと判定する食い違いは起こりません。
配色の案の作り方
配色の案は、入力した色を HSL で表して作ります。HSL の色相を回す配色は、次の 3 種類です。
- 補色: 色相を 180 度回した色 1 つ
- 類似色: 色相を 30 度ずつ、両方向に回した色 2 つ
- 三色配色: 色相を 120 度と 240 度回した色 2 つ
もうひとつの「明るさ」は、色相と彩度を保ったまま、明度を 20・35・50・65・80 % にした 5 色です。入力した色の明度は関係なく、この 5 段階に固定です。
#2d4bc8 の場合、補色は #c8a92d、類似色は #2d99c8 と #5c2dc8 です。案は、色の組み合わせを考える出発点です。実際に使う色かどうかは、用途に合わせて決めてください。彩度が 0 の灰色を入力したときは、色相を回しても、補色・類似色・三色配色の案どうしは同じ灰色になります。入力した色とは、丸めのために少し違うことがあります。案の違いは、明るさの欄にしか出ません。
入力の扱い
入れた色のコードは、この端末のブラウザの中だけで変換します。サーバーには送りません。保存もしないので、ページを閉じると消えます。「コピー」を押したときだけ、その値がクリップボードに入ります。
よくある質問
HEX を RGB に変換するには、どう入力しますか。
「色」の欄に、#2d4bc8 のような HEX を入れます。入れるたびに、RGB は rgb(45, 75, 200) の形で、HSL と一緒に出ます。「#」は付けなくても読み取り、3 桁の HEX（#f80 など）も受け付けます。
HSL を RGB に戻すと、元の色と少し違うのはなぜですか。
HSL の 3 つの数字を整数に丸めて表示しているためです。丸めた数字から RGB を計算すると、元の RGB と少しずれることがあります。色を正確に記録するときは、HEX か RGB を使ってください。
コントラスト比は、何を基準に判定していますか。
WCAG の AA の基準です。普通の大きさの文字では、4.5 対 1 以上が基準です。このツールは、選んだ色の上に白い文字と黒い文字を載せた場合の比を出し、4.5 以上かどうかを判定します。大きい文字の基準（3 対 1 以上）の判定は出さないので、比の数字を見て確かめてください。
配色の案は、どのように作っていますか。
入力した色の HSL を元にします。色相を 180 度回した補色、30 度ずつ回した類似色、120 度ずつ回した三色配色、同じ色相のまま明るさを 5 段階に変えた色を出します。案の色を押すと、その色が入力に入ります。
rgba や色の名前、小数の数字は入力できますか。
できません。読める形は、HEX、rgb()、hsl() の 3 つで、数字は整数だけです。透明度を表す rgba() や、red のような色の名前を入れると、「色として読めません」と表示します。