カラーコード変換(HEX・RGB・HSL)
`#3b82f6`・`rgb(59 130 246)`・`hsl(217 91% 60%)`・CSS の色名のいずれを入力しても、他のすべての表記に変換します。色見本、明暗のバリエーション、コントラスト比も表示します。
どの表記からでも全形式に変換
3 桁・4 桁・6 桁・8 桁の HEX、`rgb()` `rgba()`、`hsl()` `hsla()`、パーセント指定、スペース区切りの新しい CSS 構文、主要な色名に対応します。何を貼り付けても HEX・HEXA・RGB・RGBA・HSL・HSLA・HSV・CMYK がまとめて得られます。
行動につながるコントラスト比
結果には白および黒に対する WCAG コントラスト比が含まれます。WCAG AA は本文で 4.5:1、大きな文字で 3:1、AAA は 7:1 を求めます。色を決める段階で確認しておけば、後の監査でアクセシビリティの不備が見つかるより遥かに安上がりです。
考えるときは HSL が便利
HEX や RGB は手で調整しにくく、少し暗くするだけでも 3 つの数値を同時に変える必要があります。HSL は色相・彩度・明度を分けて扱うため、色相を保ったまま明度を変えるだけでパレットが作れます。ここに表示される明暗のバリエーションもその方式で生成しています。
よくある質問
サーバーに何か送信されますか?
いいえ。貼り付けた内容がブラウザの外に出ることはありません。ページは小さな JavaScript を読み込むだけで、計算はすべて手元の端末で行われます。送信先のサーバーそのものが存在しません。 色の変換は単純な計算で、ブラウザ内で即座に完了します。
CMYK の値が印刷結果と合いません
CMYK への変換はインク・用紙・実際の印刷機のカラープロファイルに依存しますが、このツールはデバイス非依存の単純な式を使っています。目安として扱い、印刷用途では印刷所が指定するプロファイルを通して変換してください。
HEX のアルファ値はどう指定しますか?
8 桁の HEX は末尾 2 桁がアルファ値になり、`#3b82f680` はその青の不透明度 50% を意味します。現行のブラウザはすべて対応しています。4 桁の短縮形も各桁を展開して同じように働きます。
必要なコントラスト比はどれくらいですか?
WCAG AA を満たすには、通常の本文で 4.5:1、18pt または 14pt 太字以上の文字で 3:1 が必要です。多くの法的要件が参照する水準です。AAA ではそれぞれ 7:1 と 4.5:1 になります。アイコンや入力枠などテキスト以外の要素は 3:1 が必要です。