色コード変換
HEX（#rgb・#rrggbb・#rrggbbaa）・RGB・HSL を相互に変換し、色見本とカラーピッカーで確認できます。2色の WCAG コントラスト比と AA/AAA の合否も計算します。
読み込み中…
使い方と仕様
入力欄には #f60 のような HEX のほか、rgb(255, 102, 0)、rgb(255 102 0 / 50%)、hsl(24, 100%, 50%) の形式をそのまま貼り付けられます。どれを入れても HEX・RGB・HSL の3つが同時に出て、それぞれコピーできます。透明度が 1 未満のときは HEX が8桁（#rrggbbaa）になります。
コントラスト比は WCAG 2.x の定義どおり、各色の相対輝度 L を求めて (明るい方の L + 0.05) ÷ (暗い方の L + 0.05) で計算します。合格の基準は、AA が通常文字 4.5 以上・大きな文字 3 以上、AAA が通常文字 7 以上・大きな文字 4.5 以上です。表示は小数第2位の切り捨てで、4.499 が 4.50 と表示されて合格に見える、ということはありません。
半透明の色はコントラスト比の計算では透明度を無視し、不透明な色として扱います。実際の見え方は背景との重なりで変わるため、重ねた後の色で計算してください。HSL は整数に丸めて表示するので、HSL から HEX に戻すと元の値と1ずれることがあります。
よくある質問
- 大きな文字とは、どのくらいの大きさですか？
- WCAG では 18pt（約24px）以上、または太字で 14pt（約18.7px）以上の文字を大きな文字としています（日本語・中国語・韓国語のフォントでは同等の大きさ）。それ未満は通常文字の基準で判定します。
- HSL に変換して戻すと色が少し変わります。
- HSL の表示を整数に丸めているためです。正確な値が必要なときは HEX か RGB を使ってください。