RGB → OKLCH 変換ツール
RGB の値を入力すると OKLCH がすぐに表示されます。計算はすべてブラウザ内で行われ、入力値がサーバーに送られることはありません。
計算方法
RGB を線形 RGB に戻し、Oklab を経て L・C・H を求めます。HSL の明度は最大・最小チャンネルの平均なので色相ごとに体感が変わりますが、OKLCH の L はその問題を大きく抑えます。
RGB
RGB は画面が色を作る仕組みそのものです。三つの光を足し合わせ、それぞれ 0〜255 で表します。すべて 0 なら黒、すべて 255 なら白です。ハードウェアと同じ構造なので正確で損失がありませんが、人間には扱いにくい形式です。「もう少し暖かく」したいだけでも二つ三つの数値を同時に動かす必要があり、どちらへ動かすべきかが見えません。
OKLCH
OKLCH は HSL と同じ三つの考え方（明度・彩度・色相）を使いますが、人の目が実際に反応する仕組みをモデルにして設計されています。L が同じ二色は実際に同じくらいの明るさに見えるため、トーンの段階を作ったりコントラストを確認したりするのに向いています。また sRGB では表現できない色にも届くので、正しい OKLCH 値でも対応する HEX が存在しないことがあります。変換ツールはそうした値を画面に出せる範囲へ戻します。
RGB → OKLCH の計算手順
#FF6347 を例に実際の計算をたどります。数値はこのページの変換ツールと同じエンジンで求めています。
-
ガンマを解除（線形 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)
RGB → OKLCH 変換例
| Color | RGB | OKLCH |
|---|---|---|
| Red | rgb(255, 0, 0) |
oklch(62.8% 0.2577 29.23) |
| Tomato | rgb(255, 99, 71) |
oklch(69.6% 0.1955 32.32) |
| Orange | rgb(255, 165, 0) |
oklch(79.3% 0.171 70.67) |
| Gold | rgb(255, 215, 0) |
oklch(88.7% 0.1822 95.33) |
| Limegreen | rgb(50, 205, 50) |
oklch(74.2% 0.2286 142.83) |
| Teal | rgb(0, 128, 128) |
oklch(54.3% 0.0927 194.77) |
| Dodgerblue | rgb(30, 144, 255) |
oklch(65.2% 0.1901 253.21) |
| Royalblue | rgb(65, 105, 225) |
oklch(56% 0.1882 266.4) |
| Blueviolet | rgb(138, 43, 226) |
oklch(53.4% 0.2503 301.37) |
| Hotpink | rgb(255, 105, 180) |
oklch(72.8% 0.1971 351.99) |
よくある質問
変換時にまず RGB を線形化するのはなぜですか？
画面の RGB 値はガンマがかかっていて、実際の光の量に比例していません。知覚に基づくモデルで扱うには、先にそのエンコードを解く必要があります。
L が同じなのに二色が違って見えます。正常ですか？
正常です。L は体感の明るさだけを揃えます。彩度と色相は依然として異なるため、一方がずっと鮮やかに見えることがあります。段階を作るときに欲しい性質はまさにこれです。明るさは揃い、色は異なる状態です。
この用途では LAB より OKLCH のほうがよいですか？
色を選んで調整する用途ならそうです。従来の LAB は明度を変えると色相がずれ、青が紫寄りに動きます。Oklab はまさにその問題を直すために作られました。