カラーコード変換・配色
デザインカンプの色を CSS に落とすとき、文字が読みやすいか確かめたいとき、1色からパレットを広げたいときに。
🔒 入力内容はお使いのブラウザ内だけで処理され、サーバーには送信されません。
-HEX
-HEX(透明度付き)
-RGB
-RGBA
-HSL
-HSV
コントラスト比(WCAG)
通常の文字 16px: あいうえお Sample Text 0123
大きな文字 24px: あいうえお Sample
-コントラスト比(文字色 : 背景色)
-通常の文字 AA(4.5 以上)
-通常の文字 AAA(7 以上)
-大きな文字 AA(3 以上)
-大きな文字 AAA(4.5 以上)
明度のパレット(10 段階)
色をクリックするとコードをコピーします。
補色・類似色
近い日本の伝統色
CSS 変数として出力
使い方
- 色を入力するか、カラーピッカーで選びます。HEX、RGB、HSL、HSV、CSS のカラー名のどれでも読み取ります。
- 各形式のコードが並ぶので、「コピー」でそのまま CSS に貼れます。
- 文字色として使う場合は「背景色」を入れて、コントラスト比と AA/AAA の判定を確認します。
- パレット、補色・類似色、近い伝統色は色をクリックするとコードをコピーします。「CSS 変数として出力」は
:rootに貼って使えます。
変換の決まり
| 形式 | 例 | 補足 |
|---|---|---|
| HEX | #1E50A2 |
3 桁は #aabbcc に展開。8 桁の末尾 2 桁は透明度 |
| RGB / RGBA | rgb(30, 80, 162) |
空白区切りと / の透明度も読み取ります |
| HSL | hsl(217, 69%, 38%) |
色相 0〜360 度、彩度と明度 0〜100%。CSS でそのまま使えます |
| HSV | hsv(217, 81%, 64%) |
画像ソフトのピッカーの形式。CSS では使えません |
| コントラスト比 | 1〜21 | WCAG 2 の相対輝度の式。透明度は無視して不透明な色として比べます |
| パレット | 10 段階 | HSL の明度を 95% から 5% まで等間隔に変えた色 |
| 補色・類似色 | 180°、±30°、120°・240°、150°・210° | HSL の色相を回転 |
| 近い伝統色 | 上位 5 色 | 内蔵 54 色から Lab 色空間の距離(CIE76)が近い順 |
こんな時に
- デザインデータの色を CSS に書き写す: RGB や HSV の指定を HEX に変換できます。
- 文字が読みにくくないか確かめる: 通常の文字は 4.5:1(AA)が目安です。満たさない場合はパレットの濃い色・薄い色を試してください。
- hover 色や枠線色を作る: パレットから一段濃い色・薄い色を選ぶと同じ色相でまとまります。
注意
- コントラスト比の判定は WCAG 2.x の式に基づく目安です。実際の読みやすさはフォントの太さや大きさにも左右されます。
- 伝統色の色値は資料によって異なります。本ツールの値は代表的なもののひとつです。
よくある質問
コントラスト比はいくつあればよいですか?
WCAG 2 の基準では、通常の文字は 4.5:1 以上で AA、7:1 以上で AAA です。大きな文字(18pt 以上、または太字 14pt 以上。およそ 24px、太字 18.5px)は 3:1 以上で AA、4.5:1 以上で AAA です。アイコンや入力欄の枠線など、文字以外の UI 部品は 3:1 以上が目安です。
HSL と HSV は何が違いますか?
どちらも色相(H)を角度で表しますが、残りの 2 つが違います。HSL は彩度(S)と明度(L)で、L=100% が白、0% が黒です。HSV は彩度(S)と明度(V、Value)で、V=100% は最も明るい純色、白にするには S を 0% にします。CSS で使えるのは HSL(hsl() 関数)で、HSV は多くの画像ソフトのカラーピッカーで使われます。
伝統色の名前はどのように決めていますか?
内蔵している約 50 色の伝統色リストの中から、入力した色に近い順に表示しています。近さは Lab 色空間での距離(CIE76)で計算しています。伝統色の色値は資料によって差があるため、代表的な値のひとつとしてお使いください。
入力できる形式は?
#1E50A2、#1e50a2ff、1E50A2、#abc、rgb(30, 80, 162)、rgba(30 80 162 / 0.5)、hsl(216, 69%, 38%)、hsv(216, 81%, 64%) のほか、red、tomato などの CSS カラー名に対応しています。