カラーコード変換（HEX・RGB・HSL・OKLCH）

1. カラーコードの書き方の種類

CSS で色を書く方法はいくつかあります。同じ青 #3b82f6 を、それぞれの書き方で表すと次のとおりです。

HEX と rgb() は、同じ3つの数を16進数で書くか10進数で書くかの違いだけです。3b は 59、82 は 130、f6 は 246 なので、#3b82f6 と rgb(59 130 246) はまったく同じ色です。それぞれ 256 段階なので、表せる色は全部で約1,677万色です。

HEX は、各成分の2桁が同じ数字のとき3桁に縮められます。#ff8800 は #f80、#ffffff は #fff と書けます。#3b82f6 のように、どれか1つでも2桁がそろわない色は縮められません。

hsl() は、色相 h（0〜360 の角度。0 が赤、120 が緑、240 が青）、彩度 s（0% が灰色）、明度 l（0% が黒、100% が白）で書きます。「同じ色味のまま少し明るく」のような調整を数値で書きやすいのが特徴です。灰色・白・黒には色味がないので、h は何を書いても同じ色になります。このツールはその場合 0 と出します。

oklch() は、明るさ L（0 が黒、1 が白）、鮮やかさ C（0 が灰色）、色相 h（角度）で書きます。hsl() の明度と違い、L が同じなら見た目の明るさもほぼそろいます。灰色・白・黒は色相を持たないので、h を none と書きます（oklch(0.5999 0 none) は #808080）。

2. hsl() を整数に丸めると元の色に戻らない

hsl() の値を整数に丸めて書くツールは多いのですが、丸めた値から色に戻すと、元の HEX にならないことがよくあります。

たとえば #3b82f6 は、整数に丸めると hsl(217 91% 60%) です。これを色に戻すと #3c83f6 になり、赤と緑が 1 ずつずれます。見た目ではほとんど区別できませんが、デザインの指定と CSS の値が食い違うことになります。

全1,677万色で数えると、整数に丸めた hsl() から元の HEX に戻らない色は 15,001,662 色（89.4%）あります。大半の色で戻りません。

h・s・l をそれぞれ小数1桁にすると、全色が元の HEX に戻ります。このツールが hsl(217.2 91.2% 59.8%) のように小数1桁で出しているのはこのためです。hsl(32 100% 50%) のように、小数の部分が 0 になるときは省いています。

3. oklch() は何桁あればよいか

oklch() の値も、桁が足りないと元の色に戻りません。L・C を小数3桁、h を小数1桁にした書き方（oklch(0.623 0.188 259.8) の形）では、 3,723,441 色（22.2%）が元の HEX に戻りません。

例として #0000cf を小数3桁・3桁・1桁にすると oklch(0.386 0.268 264.1) になり、これを色に戻すと #0100cf になります。

L を小数4桁、C を5桁、h を2桁にすると、全色が元の HEX に戻ります。このツールは #0000cf を oklch(0.3863 0.26765 264.05) と出します。

4. カンマあり・なし

rgb() と hsl() には、カンマで区切る書き方と空白で区切る書き方があります。

rgb(59, 130, 246)   /* カンマ区切り */
rgb(59 130 246)     /* 空白区切り */
hsl(217.2, 91.2%, 59.8%)
hsl(217.2 91.2% 59.8%)

CSS ではどちらも使えて、同じ色になります。空白区切りは CSS Color Level 4 で加わった新しい書き方で、oklch() のような新しい関数は空白区切りでしか書けません。既存の CSS がカンマ区切りでそろっているならカンマ区切り、そうでなければ空白区切りを使うとよいでしょう。このツールはどちらもコピーできます。

1つの関数の中でカンマと空白を混ぜる書き方（rgb(59, 130 246) など）は使えません。このツールの入力欄でも読めません。

5. sRGB で表せない oklch()

oklch() は、画面で出せる範囲（sRGB）より鮮やかな色も書けてしまいます。たとえば oklch(0.7 0.4 150) は、sRGB では出せない鮮やかな緑です。

このツールはそのような色を入れると、CSS Color Level 4 の方式で、明るさと色相を保ったまま鮮やかさだけを下げて sRGB の範囲に収めます。oklch(0.7 0.4 150) は #00c248 になり、入力欄の下に「sRGB で表せない色のため、#00c248 に補正しました。」と表示します。HEX・rgb()・hsl() は sRGB の範囲しか書けないので、ほかの書き方はこの補正した色から作っています。

補正した後の oklch() の値は、入れた値とは違うものになります。HEX と同じ色を oklch() で書きたいときは、ツールが出した oklch() の値を使ってください。

6. 読めない入力

• 透明度の付いた色（#3b82f680、rgba()、/ 50% を付けた書き方）は扱いません。透明度を外して入れてください
• 色名（red、skyblue など）は読めません。入力欄の右にある色のボタンから選ぶか、HEX で入れてください
• rgb() の値は 0〜255 の整数で入れてください。rgb(100% 50% 0%) のようなパーセントの書き方は読めません

全角で入れた数字や記号（＃３ｂ８２ｆ６）は、半角にしてから読みます。