カラーコード変換

このツールでできること

デザインツールでは「#1e90ff」、CSSでは「rgb(30 144 255)」、少し暗くしたいときは「hsl(210 100% 56%)」というように、同じ色でも場面で書き方が変わります。HEX・RGB・HSL・CSSの色名のどれかを入れれば、残りの表記がまとめて出ます。3桁の省略形（#39f）や透明度つきの8桁（#1e90ff80）にも対応します。

あわせて、背景にしたとき白文字と黒文字のどちらが読みやすいかをコントラスト比で判定し、明度を10％ずつ変えた色や、色相を30度ずつ回した色（180度が補色）も並べます。ボタンのホバー色を作る、文字色が読めるか確かめるといった作業がここで済みます。

使い方

1. HEX・RGB・HSL・色名のいずれかの欄に色を入力します。ピッカーや「ランダム」でも選べます。
2. ほかの欄が自動で更新されます。「コピー」か値のクリックで写せます。
3. 色相・彩度・明度・不透明度のスライダーで微調整します。
4. 「コントラスト比」で、白文字・黒文字それぞれの比とWCAGの判定を確認します。
5. 「関連する色」の色見本はダブルクリックでその色に切り替わります。

知っておくと便利なこと

HEXとRGBは同じもの：HEXは赤・緑・青の量を16進数2桁ずつ並べた書き方で、2桁が0〜255（00〜ff）にあたります。#1e90ff は 1e＝30、90＝144、ff＝255 なので rgb(30, 144, 255) と同じ色です。3桁の #39f は各桁を2回繰り返した #3399ff の略です。

HSLは人が調整しやすい：色相（0〜360度の輪。0＝赤、120＝緑、240＝青）、彩度（0％で灰色）、明度（0％で黒、100％で白）で表します。「色味はそのままで少し暗く」はHSLなら明度を下げるだけですが、RGBでは3つの値を同時に動かすことになります。

透明度つきHEXの並び：8桁は #RRGGBBAA の順で、最後の2桁が不透明度です。ff が不透明、00 が完全な透明、80 がおよそ50％。並びが逆の #AARRGGBB の環境（Androidなど）もあるので注意してください。

コントラスト比の計算：明るさは単純な平均ではなく「相対輝度」で測ります。各色を0〜1に直してガンマ補正を戻し、緑に0.7152、赤に0.2126、青に0.0722の重みを付けて足します（緑は明るく、青は暗く見えるため）。比は（明るい方＋0.05）÷（暗い方＋0.05）で、白と黒の21:1が最大です。本文はAAで4.5:1、AAAで7:1が目安です。

使い分けの目安：色をひとつ書くだけならHEXが短くて確実です。CSS変数で持つならHSLの数値が扱いやすく、--brand: 210 100% 56% としておけば hsl(var(--brand) / 0.2) で薄い版が作れます。色名は彩度の高いものが多く、結局HEXで微調整しがちです。

よくある質問

HSLに直してから戻すと、HEXが1違うことがあります。

HSLを整数に丸めると元の色をぴったり表せないためです。このツールは、整数で元に戻らない色だけ小数第1位まで表示します。

灰色にしたら色相が残っているのはなぜですか。

彩度が0％のときは色相に意味がなく、どの角度でも同じ灰色だからです。色味を戻せるよう直前の色相を保ち、表示は0度に正規化しています。

色名はいくつ使えますか。

CSSで定義されている色名すべて（grayとgreyの別名も含む）です。一致がなければ近い色名を3つ表示します。

入力した色は送信されますか。

送信しません。変換も計算も、すべてお使いのブラウザの中で行っています。