しくみ
よく使われる形式で色を入力するか、カラーピッカーを使ってください。同じ色をHEX、RGB、HSL、CMYKで表示し、白文字・黒文字とのコントラスト比と該当するWCAGレベル、タップして試せる明るい色・暗い色の段階も表示します。
コントラスト比 = (L1 + 0.05) ÷ (L2 + 0.05)、Lは相対輝度
コントラストレベルの見方
- AAA (7:1以上): 本文でも非常に読みやすいレベルです。
- AA (4.5:1以上): Webサイトの通常の文字に求められる最低ラインです。
- AA Large (3:1以上): 大きな見出しや太字の見出し、アイコンのみに使えます。
- 3:1未満: 多くの人にとって読みにくい状態です。
活用のヒント
- CMYKの値は単純な換算です。印刷ではカラープロファイルが使われるので、正確な印刷色は校正刷りで確認しましょう。
- 8桁のHEXとrgba()は透明度を含みます。
- 値をクリックするとコピーできます。
計算の基準と出典
- 色の値はCSS Color Module Level 4(sRGB)に準拠
- コントラスト比とレベルはWCAG 2.2(W3C)に準拠
最終確認 2026年10月7日
よくある質問
HEXをRGBに変換するには?
#ff6600のようなHEXコードを入力すると、すぐにRGBの値が表示されます。この場合はrgb(255, 102, 0)です。
必要なコントラスト比は?
WCAGでは通常の文字に4.5:1以上(AA)、より厳しいAAAレベルに7:1が求められます。大きな見出しは3:1が必要です。
CMYKの値は印刷で正確ですか?
数式による直接の換算値です。実際の印刷は紙とインクのプロファイルで変わるので、校正刷りで確認してください。
透明度に対応していますか?
はい。8桁のHEX、rgba()、hsla()の値はアルファチャンネルを保持します。
値をコピーするには?
HEX・RGB・HSL・CMYKの値をクリックするとコピーできます。コピーボタンですべてまとめてコピーすることもできます。