OKLCH → HEX 変換ツール
OKLCH の値を入力すると HEX がすぐに表示されます。計算はすべてブラウザ内で行われ、入力値がサーバーに送られることはありません。
計算方法
L・C・H を Oklab の直交座標に戻し、RGB を経て 16 進数で表記します。OKLCH は sRGB より広いため表示できない値が出ることがあり、その場合は最も近い色に丸めてお知らせします。
OKLCH
OKLCH は HSL と同じ三つの考え方（明度・彩度・色相）を使いますが、人の目が実際に反応する仕組みをモデルにして設計されています。L が同じ二色は実際に同じくらいの明るさに見えるため、トーンの段階を作ったりコントラストを確認したりするのに向いています。また sRGB では表現できない色にも届くので、正しい OKLCH 値でも対応する HEX が存在しないことがあります。変換ツールはそうした値を画面に出せる範囲へ戻します。
HEX
HEX は RGB とまったく同じ赤・緑・青の三つ組を 16 進数で書いたものです。1 チャンネルが 2 文字に収まるため短く曖昧さがなく、CSS・デザインツール・設定ファイルのどこでも使われます。大文字小文字は問わず、#abc は #aabbcc の省略形です。8 桁で書くと最後の 2 桁が不透明度になり、#FF000080 は半透明の赤になります。
OKLCH → HEX の計算手順
#FF6347 を例に実際の計算をたどります。数値はこのページの変換ツールと同じエンジンで求めています。
-
極座標を直交座標へ
a = C·cos(H) = 0.165 b = C·sin(H) = 0.105 -
戻す経路
Oklab → 線形 RGB → sRGB -
ガンマを再適用（sRGB）
rgb(255, 99, 71) -
10 進数を 16 進数へ
R 255 = 15×16 + 15 → FF G 99 = 6×16 + 3 → 63 B 71 = 4×16 + 7 → 47 -
つなげる
# + FF + 63 + 47 = #FF6347
OKLCH → HEX 変換例
| Color | OKLCH | HEX |
|---|---|---|
| Red | oklch(62.8% 0.2577 29.23) |
#FF0000 |
| Tomato | oklch(69.6% 0.1955 32.32) |
#FF6347 |
| Orange | oklch(79.3% 0.171 70.67) |
#FFA500 |
| Gold | oklch(88.7% 0.1822 95.33) |
#FFD700 |
| Limegreen | oklch(74.2% 0.2286 142.83) |
#32CD32 |
| Teal | oklch(54.3% 0.0927 194.77) |
#008080 |
| Dodgerblue | oklch(65.2% 0.1901 253.21) |
#1E90FF |
| Royalblue | oklch(56% 0.1882 266.4) |
#4169E1 |
| Blueviolet | oklch(53.4% 0.2503 301.37) |
#8A2BE2 |
| Hotpink | oklch(72.8% 0.1971 351.99) |
#FF69B4 |
よくある質問
正しい OKLCH なのに HEX にすると濁ります。
sRGB の外の色を指定しています。その色に対応する HEX が存在しないため、変換ツールが最も近い色へ移します。通常は明度と色相を保ったまま彩度を下げる方法です。
L は 0.6 と 60% のどちらで書くべきですか？
どちらも有効で意味も同じです。スタイルシートでは百分率のほうが目で追いやすい傾向があります。同じ書き方の他の値と並ぶときは特にそうです。
パレットを sRGB 内に収めるには？
彩度をおよそ 0.25 未満に保てば、どの色相でも範囲を外れることはほとんどありません。それを超えると安全な上限は色相ごとに大きく変わります。黄や緑は青よりずっと早く限界に達します。