色変換の使い方
- 入力欄に色を入力または貼り付けるか、カラーピッカーで選びます。ブラウザがCSSの色として認識できるものなら何でも使えます。#の有無を問わないHEXコード（
#2563eb、2563eb、短縮形の#f80、透明度付きの8桁）、rgb()やhsl()の値、tomatoのような色名を入力できます。 - 表には同じ色がHEX、RGB、HSL、HSV/HSB、CMYKで表示されます。必要な形式の横にあるコピーをクリックしてください。
- 文字とのコントラスト（WCAG）には、その色の上に白い文字と黒い文字を置いたボックスが表示され、コントラスト比と満たしているアクセシビリティのレベルがわかります。
- 明るい色・暗い色には、現在の色を中央に、明るい色から暗い色まで9つの色見本が並びます。色見本をクリックすると、その色が現在の色になります。
色の形式の説明
- HEX：赤・緑・青をそれぞれ16進数2桁（00〜FF）で表します。
#ff8800なら、赤はFF = 255、緑は88 = 136、青は00 = 0です。3桁のコードは各桁を2回繰り返したもので、#f80も同じ色です。4組目を付けると不透明度を表し、#2563eb80はおよそ50%の不透明度です。 - RGB：同じ3つのチャンネルを0〜255の10進数で表します（例：
rgb(255, 136, 0)）。画面は赤・緑・青の光を混ぜて色を作るので、0, 0, 0は黒、255, 255, 255は白です。 - HSL：色相（色相環上の0〜360°。0が赤、120が緑、240が青）、彩度、明度です。色相はそのままで明度だけを変えれば明るい色や暗い色が作れるので、手で調整しやすい形式です。明度100%は常に白になります。
- HSV / HSB：色相、彩度、明度（ブライトネス）で、多くのデザインアプリのカラーピッカーが採用しています。彩度と明度がどちらも100%のとき純色になり、HSLでは同じ色が明度50%にあたります。
- CMYK：印刷に使うシアン、マゼンタ、イエロー、ブラックのインクです。ここでの値は単純な数式による変換で、実際の印刷結果は紙やインク、カラープロファイルによって変わります。正確な値は印刷会社に確認してください。
計算例
- 初期設定の青
#2563ebは、rgb(37, 99, 235)、hsl(221, 83%, 53%)、hsv(221, 84%, 92%)、cmyk(84%, 58%, 0%, 8%)です。この色の上の白い文字は5.17:1（AA）、黒い文字は4.06:1（大きな文字のみ）です。 - オレンジのボタン：
#ff8800の上の白い文字は2.39:1で不適合ですが、黒い文字は8.77:1（AAA）です。明るいオレンジや黄色の背景に濃い色の文字がよく使われるのはこのためです。 - グレーの文字：
#777777と白のコントラスト比は4.48:1で、通常の文字に必要な4.5:1にわずかに届きません。1段階暗い#767676は4.54:1で基準を満たします。 - 1色から作るパレット：
#2563ebの明るい色は#d3e0fbから#5182ef、暗い色は#1e4fbcから#07142fまでです。1段階ごとに白か黒を20%ずつ多く混ぜているので、背景、枠線、マウスを乗せたときの色を統一感をもって選べます。
コントラストの結果の意味
Webコンテンツ・アクセシビリティ・ガイドライン（WCAG 2）は、コントラストを2色の相対輝度の比として定義しており、1:1（同じ色）から21:1（白地に黒）までの値をとります。表示されるレベルの意味は次のとおりです。
- AAA：7:1以上。通常の文字に対する、より高いレベルです。
- AA：4.5:1以上。通常の本文の最低基準です。
- AA（大きな文字のみ）：3:1以上4.5:1未満。大きな文字、つまり18ポイント（24px）以上、または太字で14ポイント（約18.7px）以上の場合にだけ認められます。
- 不適合：3:1未満です。
WCAGは、アイコンや入力欄の枠線など重要なグラフィックにも3:1以上を求めています。輝度の計算式では緑が青よりはるかに大きく効くため、純粋な黄色は明るく、純粋な青は暗く見えます。コントラストは透明度を無視し、不透明な色として計算しています。
ヒント
- 色はHSLやHSVで選び、CSSやデザインファイルにはHEXかRGBをコピーしましょう。どの形式も同じsRGBの色を表しています。
- 通常時、マウスを乗せたとき、無効時など、すべての状態でコントラストを確認しましょう。エラーを赤だけで示すように色だけに意味を持たせず、文字やアイコンも添えてください。
- HSLの値は整数に丸められるため、変換し直すとチャンネルの値が1ほどずれることがあります。まったく同じ色が必要ならHEXをコピーしてください。
- HEXの各桁は16進数です。
EBがどうして235になるのかは進数変換で確かめられます。ダークモードもデザインするなら、画面解像度のページで、今のブラウザがダークモードを優先しているかを確認できます。
よくある質問
HEXとRGBの違いは何ですか？
表記のしかただけです。HEXは0〜255の3つの値を16進数で、RGBは10進数で書きます。
印刷した色が画面と違って見えるのはなぜですか？
画面は光を発するので、インクでは再現できない鮮やかな色も表示できます。印刷会社は自社の印刷機と用紙に合ったプロファイルで変換するため、ここでのCMYKの値は出発点にすぎません。
新しいCSSの色の形式も入力できますか？
ブラウザが対応していれば、hwb() や oklch() なども入力できます。色は表に示される標準的なsRGBの値に変換され、その範囲を超える色は最も近い値に切り詰められます。
AAを満たしていれば十分ですか？
多くのアクセシビリティ方針や規制はAAレベルを基準にしています。AAAはより厳しいものの、本文の文字なら達成できることも多く、コントラストが高いほど日差しの下で画面を見る人にも読みやすくなります。