カラーコード変換

HEX、RGB、HSL、HSV、CMYK、OKLCH、CSSの色名のいずれか1つに色を入力すると、ほかの形式もすぐに更新されます。デザインの色をCSSに移したり、文字と背景のコントラストが十分かを確認したりするのに使えます。

使い方

1. 「色を選択」で色を選ぶか、HEXやRGBなどの欄の1つに値を入力します。ほかの欄も連動して変わり、横のボタンでどれでもコピーできます。
2. 「不透明度」を設定すると透明度が加わり、HEXは8桁に、RGBはrgbaになります。
3. 「明るい色と暗い色」や「配色」の色見本を選ぶと、その色に切り替わります。
4. 「コントラストチェッカー」で「文字色」と「背景色」を設定し、「コントラスト比」とAA・AAAの判定結果を確認します。

計算方法と補足

• HEXは、赤・緑・青の値（0〜255）をそれぞれ2桁の16進数で表します。たとえば、rgb(255, 99, 71) は #FF6347 です。
• コントラスト比 =（明るい方の色の相対輝度 + 0.05）÷（暗い方の色の相対輝度 + 0.05）で、WCAG 2.2の達成基準1.4.3と1.4.6で判定します。比は切り捨てて表示します。
• CMYKは印刷プロファイルを使わない簡単な式で計算するため、実際の印刷の色とは異なります。最近使った色と最後の色はこの端末に保存されます。

よくある質問

HEXをRGBに変換するには？

コードを2桁ずつに分け、それぞれを16進数から10進数に変換します。#3B82F6 なら 3B = 59、82 = 130、F6 = 246 なので、rgb(59, 130, 246) です。HEXの欄に入力すると、すぐに確認できます。

文字に必要なコントラスト比は？

WCAGのAAでは、通常の文字に4.5:1、大きな文字に3:1を求めています。AAAでは7:1と4.5:1です。大きな文字とは、24px以上、または太字で18.66px以上の文字です。

3桁のカラーコードとは？

6桁のコードの省略形で、各桁を2回繰り返したものです。#F80 は #FF8800 と同じ色です。

色の名前を調べられますか？

色が148種類あるCSSの色名のいずれかと一致すれば、その名前が表示されます。一致しない場合は、最も近いCSSの色名とそのHEX値が表示されます。