カラーコード変換
色をHEX、RGB、HSL、HSVの間で変換し、黒と白に対するコントラストも表示します。
すべてブラウザ内で動作します。アップロード、記録、保存は一切行いません。
16進数
#3498DB
- RGB
- rgb(52 152 219)
- HSL
- hsl(204.1 69.9% 53.1%)
- HSV
- hsv(204.1 76.3% 85.9%)
- 相対輝度
- 0.2830
- 白に対するコントラスト
- 3.15:1
- 黒に対するコントラスト
- 6.66:1
HEX、RGB、HSL、HSVは、同じsRGBの色を書き表す4つの方法です。どれが便利かは作業内容によります。デザインから値をコピーするなら16進数、色相を変えずに少しだけ明るくするならHSLです。
仕組み
入力は8ビットの赤・緑・青のチャンネルとアルファに読み込まれ、すべての出力はそのチャンネルから計算されます。ある出力から別の出力を変換することはないので、丸めの連鎖で値がずれていくことはありません。
コントラストの数値はWCAG 2.1に従います。各チャンネルを線形化し、目への寄与度で重み付けし、比は（明るいほう＋0.05）÷（暗いほう＋0.05）です。尺度は同じ色同士の1から、白地に黒の21までです。
例
| ケース | 入力 | 結果 |
|---|---|---|
| デザインファイルの16進数の値 | #3498db | rgb(52 152 219), hsl(204 70% 53%) |
| 各桁を繰り返す短縮形 | #39d | #3399DD, not #039D |
| 透明度付き | rgb(52 152 219 / 0.5) | #3498DB80 |
よくある質問
コントラスト4.5なら、テキストは基準を満たしていますか？
テキストによります。だからこそ判定ではなく数値を示しています。WCAGは通常のテキストに4.5、大きなテキストに3を求めており、大きなテキストとは18ポイント以上、または太字で14ポイント以上を指します。2つの色しか見ないツールには、どのルールが当てはまるかわかりません。
HSLに変換して戻すと、ときどき1桁変わるのはなぜですか？
16進数はチャンネルごとに256段階で、HSLはそれをきっちり割り切れないからです。往復すると1段階ずれることがあります。ここではすべての表記を元のチャンネルから計算しているので、表示される値は常に入力に最も近い値です。
HSLとHSVの違いは何ですか？
色相は共通ですが、それ以外が異なります。HSLでは輝度（L）100%が白で、50%が純色です。HSVでは明度（V）100%が純色で、白は彩度が0まで下がったときにだけ現れます。デザインツールはたいていHSVを表示し、CSSはHSLを使います。
「rebeccapurple」のような色名には対応していますか？
いいえ。CSSのキーワードのリストは約150個の名前の表で、算術ではなく仕様に属するものです。このツールは名前を調べるのではなく、表記の間を変換します。
知っておきたいこと
- ここではすべてsRGBで、Webが常に前提としてきた色空間です。CSS Color 4が加えたより広い色空間（lab、oklch、display-p3）はsRGBでは表せない色を表し、それをsRGBに戻すには、範囲外の色をどう扱うかを決める必要があります。その判断はここでは行いません。
- コントラストの数値は判定ではなく数値です。組み合わせが基準を満たすかどうかは文字の大きさと太さによりますが、色だけではそれはわかりません。