HEX → OKLCH 変換ツール
HEX の値を入力すると OKLCH がすぐに表示されます。計算はすべてブラウザ内で行われ、入力値がサーバーに送られることはありません。
計算方法
HEX を RGB に変換し、Oklab を経て明度（L）・彩度（C）・色相角（H）に直します。OKLCH は人の目が感じる明るさに合わせて設計されているため、色相だけを変えても明るさがばらつきません。
HEX
HEX は RGB とまったく同じ赤・緑・青の三つ組を 16 進数で書いたものです。1 チャンネルが 2 文字に収まるため短く曖昧さがなく、CSS・デザインツール・設定ファイルのどこでも使われます。大文字小文字は問わず、#abc は #aabbcc の省略形です。8 桁で書くと最後の 2 桁が不透明度になり、#FF000080 は半透明の赤になります。
OKLCH
OKLCH は HSL と同じ三つの考え方（明度・彩度・色相）を使いますが、人の目が実際に反応する仕組みをモデルにして設計されています。L が同じ二色は実際に同じくらいの明るさに見えるため、トーンの段階を作ったりコントラストを確認したりするのに向いています。また sRGB では表現できない色にも届くので、正しい OKLCH 値でも対応する HEX が存在しないことがあります。変換ツールはそうした値を画面に出せる範囲へ戻します。
HEX → OKLCH の計算手順
#FF6347 を例に実際の計算をたどります。数値はこのページの変換ツールと同じエンジンで求めています。
-
2 桁ずつ区切る
#FF6347 → FF · 63 · 47 -
16 進数を 10 進数へ
R FF = 15×16 + 15 = 255 G 63 = 6×16 + 3 = 99 B 47 = 4×16 + 7 = 71 -
ガンマを解除（線形 RGB）
R 1 G 0.125 B 0.063 -
Oklab 座標
L 0.696 a 0.165 b 0.105 -
極座標へ — 彩度と色相角
C = √(a²+b²) = 0.196 H = atan2(b, a) = 32.3° -
結果
oklch(69.6% 0.1955 32.32)
HEX → OKLCH 変換例
| Color | HEX | OKLCH |
|---|---|---|
| Red | #FF0000 |
oklch(62.8% 0.2577 29.23) |
| Tomato | #FF6347 |
oklch(69.6% 0.1955 32.32) |
| Orange | #FFA500 |
oklch(79.3% 0.171 70.67) |
| Gold | #FFD700 |
oklch(88.7% 0.1822 95.33) |
| Limegreen | #32CD32 |
oklch(74.2% 0.2286 142.83) |
| Teal | #008080 |
oklch(54.3% 0.0927 194.77) |
| Dodgerblue | #1E90FF |
oklch(65.2% 0.1901 253.21) |
| Royalblue | #4169E1 |
oklch(56% 0.1882 266.4) |
| Blueviolet | #8A2BE2 |
oklch(53.4% 0.2503 301.37) |
| Hotpink | #FF69B4 |
oklch(72.8% 0.1971 351.99) |
よくある質問
彩度（C）の値はふつうどれくらいですか？
sRGB の色はほとんどが 0〜0.37 の範囲に収まります。グレーは 0 です。0.4 を超える値もモデル上は存在しますが、通常の画面では表示できません。
デザイントークンに HSL ではなく OKLCH を使う理由は？
明度の間隔が見た目にも等しくなるからです。HSL の明度で作った段階は黄色で急に飛び青で詰まって見えますが、同じ段階を OKLCH で作るとどの色相でも均等に読めます。
ブラウザは oklch() に対応していますか？
現行の主要ブラウザはすべて対応しています。古いブラウザも考慮するなら HEX を先に書き、その下に oklch() を置きます。二行目を理解できないブラウザは一行目をそのまま使います。