OKLCH/OKLab/CIELAB変換の使い方｜HEX・RGBとの違い
公開日：2026年9月27日 更新日：2026年9月15日 運営：シルギア（Analyzegear, Inc.） 対象ツール：OKLCH/LABカラー変換
「OKLCH/LABカラー変換」は、使い慣れた HEX や RGB(0〜255) の色を、OKLCH・OKLab・CIELAB といった知覚ベースの色空間へ相互に変換し、CSS の oklch() / oklab() / lab() の形でそのまま出力するツールです。スライダーで明度・彩度・色相を動かせるので、色みを保ったまま明るさだけを変える、といった調整が直感的に行えます。この記事では、これらの色空間が何なのか、従来の表記と何が違うのか、そして内部でどんな計算をしているのかを、実装に沿って解説します。
OKLCH・OKLab・CIELAB とは何か
OKLab は、Björn Ottosson が2020年に発表した色空間で、「人が色をどう感じるか（知覚）」に数値を近づけるよう設計されています。OKLCH は、その OKLab をちょうど HSL のような極座標に置き換えたもので、中身は同じ色空間の別表現です。OKLab が明度 L と直交座標 a・b で色を表すのに対し、OKLCH は明度 L・彩度 C・色相 H で表します。
CIELAB（Lab）は、はるか以前から印刷や色管理で使われてきた知覚均等色空間です。考え方は OKLab と近いのですが、数値のスケールも変換式も別物です。本ツールは、この3つを同時に表示するので、見比べながら扱えます。
HEX・RGB・HSL と何が違うのか
HEX や RGB は、赤・緑・青の光の強さをそのまま数値にしたものです。機械にとっては素直ですが、人の見え方とはズレます。たとえば HSL で明度を50%に固定しても、黄色は明るく青は暗く見えます。数値が同じでも「感じる明るさ」が揃わないのです。
OKLCH ではこのズレが小さく、L の値が見た目の明るさとよく一致します。さらに、色相 H を固定したまま L だけを動かしても、青が紫に転ぶような色ズレが起きにくいのが強みです。数値の差が見た目の差に近い（知覚的に均等）ため、2色のコントラストやパレット内の間隔も見積もりやすく、デザインシステムのトーン設計に向いています。
L・C・H の意味と CSS 記法
OKLCH の3つの値は次を表します。
- L（明度）: 0〜1（CSS では 0%〜100%）。0 が黒、1 が白。見た目の明るさに対応します。
- C（彩度・鮮やかさ）: 0 が無彩色（グレー）で、大きいほど鮮やか。sRGB で表せる上限は色相によって違い、おおむね 0〜0.37 程度です。
- H（色相・色み）: 0〜360 度の角度。赤・黄・緑・青…と円状に並びます。
CSS では oklch(62.8% 0.2577 29.23) のように「明度% 彩度 色相」の順で書きます。oklab() は「明度% a b」、lab() は「明度% a b」で、いずれも CSS Color 4 として Chrome・Safari・Firefox など主要ブラウザで使えます。古い環境も気にするなら、HEX や RGB をフォールバックとして併記しておくと安心です。ツールの各行の「コピー」ボタンで、これらの表記をそのまま取り出せます。
変換の流れ（sRGB→リニアRGB→XYZ→OKLab）
色の値はいきなり OKLab に飛ぶわけではなく、段階を踏んで計算します。本ツールの流れは次のとおりです。
- sRGB→リニアRGB: 画面用のガンマ補正を打ち消し、光の量に比例した値に戻します（0.04045 を境に式が切り替わります）。
- リニアRGB→OKLab: Ottosson の定義した行列で LMS という中間値に移し、各成分の立方根をとってから、もう一度行列をかけて L・a・b を得ます。
- OKLab→OKLCH: a・b を極座標に直し、C=√(a²+b²)、H=atan2(b, a) で彩度と色相を求めます。
CIELAB は、OKLab の LMS から XYZ（D65 の参照白）に移し、立方根を使う明度関数で L*a*b* を算出しています。XYZ を経由するため、sRGB に収まらない色でも計算できるのがポイントです。逆変換（スライダー操作）も同じ数式を逆にたどるだけなので、動かすと即座に全表記が追従します。
白・赤で確かめる検算例
実際の数値で確かめると理解が進みます。ツールと同じ計算での結果です。
- 白 #FFFFFF → oklch(100% 0 0)。無彩色なので C は 0、色相は意味を持たず 0 と表示されます。
- 黒 #000000 → oklch(0% 0 0)。
- 純赤 #FF0000 → oklch(62.8% 0.2577 29.23)、oklab(62.8% 0.2249 0.1258)、CIELAB では lab(53.24% 80.09 67.2)。赤なのに OKLCH の明度が約63%と高めなのは、人の目に赤が比較的明るく見えることを反映しています。
- グレー #808080 → oklch(59.99% 0 0)。RGB では中央の128ですが、明度は50%ではなく約60%です。ここに「数値の中央」と「見た目の中央」のズレが表れています。
丸めで末尾はわずかに前後しますが、桁の意味を押さえれば読み解けます。
sRGB 色域外の扱いと使いどころ
OKLCH は sRGB より広い色域（P3 など）の色も指定できます。そのため彩度 C を大きくすると、sRGB に収まらない色になることがあります。その場合、ツールは「sRGB の色域外です」という注記を出し、プレビューと HEX/RGB 欄は sRGB に丸めた「最も近い色」を表示します。一方で oklch() / oklab() / lab() の数値は、丸めていない元の指定をそのまま示します。表示色と数値が食い違って見えるときは、この注記を確認してください。彩度スライダーは 0〜0.4 まで動きますが、0.37 あたりを超えると多くの色相で色域外になります。
使いどころとしては、ボタンやテキストの明暗バリエーションを L だけで作る、パレット全体の彩度・明度をそろえる、ダークモードで色みを保ったまま明るさを反転させる、といった場面で力を発揮します。なお計算はすべてブラウザ内で行われ、色の値はどこにも送信されません。オフラインでも使えます。