🎨 OKLCH/LABカラー変換
HEX・RGB と、知覚的に均等な色空間 OKLCH・OKLab・CIELAB を相互に変換します。CSS の oklch() / oklab() / lab() 形式で出力し、スライダーで明度・彩度・色相を直感的に調整できます。sRGB の色域外になる指定は注記します。
入力
OKLCH（CSS）
oklch(62.8% 0.2577 29.23)
※ HEX・RGB・カラーピッカー・OKLCHスライダーは相互に連動します。変換は sRGB→リニアRGB→XYZ / OKLab を数式どおり計算した参考値で、丸め誤差により再変換で末尾が1ずれることがあります。すべての計算はブラウザ内で行い、色の値はどこにも送信されません。
OKLCH の利点（かんたん解説）
- 明度が直感的：L（明度）を上げ下げすると、色みや鮮やかさを保ったまま明るさだけが変わります。HSL の「明度」は色によって見た目の明るさがずれますが、OKLCH は人の見え方に近く揃います。
- 色相が安定：H（色相）を固定して L や C を変えても、青が紫に転ぶといった色ズレが起きにくく、トーンの階調（明暗のバリエーション）を作りやすいです。
- 知覚的に均等：数値の差が「見た目の差」に近いので、2色の距離やコントラストの見積もりがしやすく、パレット設計に向きます。
- 広色域に対応：oklch() は sRGB を超える P3 などの色も表現でき、CSS Color 4 として主要ブラウザで利用できます。
OKLab は同じ色空間を直交座標（L・a・b）で表したもの、CIELAB は従来から使われる知覚均等色空間です。用途に応じて使い分けられます。
解説
OKLCH・OKLab は、人が色をどう感じるか（知覚）に近づけて設計された新しい色空間で、CSS Color 4 の oklch() / oklab() として主要ブラウザで使えます。OKLCH は「L=明度・C=彩度（鮮やかさ）・H=色相（色み）」の3つで色を表し、HSL に似た指定感でありながら、明度や色相が見た目とよく一致するのが特徴です。本ツールは、使い慣れた HEX・RGB と、この OKLCH・OKLab、さらに従来からの CIELAB を相互に変換し、CSS の記法でそのまま出力します。
変換はすべて数式どおりに自前で計算しています。sRGB の各値（0〜255）をガンマ補正の逆変換でリニアRGBに戻し、Björn Ottosson の定義する行列でリニアRGB→OKLab（さらに極座標にして OKLCH）へ変換します。CIELAB は、いったんリニアRGBやOKLabからXYZ（D65基準）に移し、立方根を用いた明度関数で L*a*b* を求めます。逆変換（OKLCH→OKLab→リニアRGB→sRGB）も同じ数式の逆手順で行うため、スライダー操作にも即座に追従します。
OKLCH の一番の利点は「明度が直感的で、色相が安定していること」です。たとえば同じ色相・彩度のまま L だけを段階的に変えると、青が紫に転ぶといった色ズレを起こさずに、明暗のバリエーション（トーン）をきれいに並べられます。数値の差が見た目の差に近い（知覚的に均等）ため、2色のコントラストやパレット内の間隔を見積もりやすく、デザインシステムのカラー設計に向いています。HSL では明度50%でも色によって明るさがバラつきますが、OKLCH ではそれが揃います。
OKLCH は sRGB を超える広い色域（P3 など）の色も表現できるため、指定した値が sRGB に収まらないことがあります。その場合はブラウザ表示と、このツールの HEX/RGB 欄は sRGB の範囲に丸めた「最も近い色」になりますが、oklch() / oklab() / lab() の数値自体はそのままの指定を表します。表示色と数値が一致しないときは色域外の注記を確認してください。なお計算はすべて端末内（ブラウザ内）で行い、色の値はどこにも送信されません。
よくある質問
OKLCHとは何ですか？HSLと何が違いますか？
OKLCHは、人の色の見え方（知覚）に近づけて設計された色空間で、L=明度・C=彩度・H=色相で色を表します。指定の仕方はHSLに似ていますが、OKLCHは明度や色相が見た目とよく一致します。HSLは同じ明度50%でも色によって明るさがバラつくのに対し、OKLCHでは揃うため、階調やパレットを作りやすいのが違いです。
OKLabとOKLCHとCIELABの違いは？
OKLabとOKLCHは同じ色空間を別の座標で表したものです。OKLabは明度Lと直交座標a・b、OKLCHはそれを極座標にした明度L・彩度C・色相Hで、相互に変換できます。CIELAB（Lab）は以前から広く使われてきた知覚均等色空間で、考え方は近いですが数値は別物です。本ツールは3つとも同時に表示します。
白・黒・赤はOKLCHでどんな値になりますか？
白 #FFFFFF は L=100%・C=0（無彩色なので色相は意味を持ちません）、黒 #000000 は L=0% です。純粋な赤 #FF0000 はおおよそ oklch(62.8% 0.2577 29.23)、CIELABでは lab(53.24% 80.09 67.2) 付近になります。丸めにより末尾はわずかに前後します。
CSSの oklch() はそのまま使えますか？
はい。oklch()・oklab()・lab() はCSS Color 4で定義され、Chrome・Safari・Firefoxなど主要ブラウザで利用できます。古い環境も気にする場合は、フォールバックとしてHEXやRGBも併記しておくと安心です。本ツールの出力をそのままCSSに貼り付けられます。
「sRGBの色域外」という注記は何ですか？
OKLCHはsRGBより広い色域（P3など）の色も指定できます。そのため、彩度Cを大きくするなどしてsRGBに収まらない色になることがあります。その場合、画面のプレビューとHEX/RGB欄はsRGBに収まる最も近い色へ丸めた値になりますが、oklch()やoklab()の数値はそのままの指定を表します。
同じ色を往復変換すると値が少しずれるのはなぜ？
各色空間の変換は小数計算を含み、表示のために丸めています。そのため HEX→OKLCH→HEX のように往復すると、丸め誤差でRGBの末尾が1程度ずれることがあります。見た目にはほぼ影響しない範囲です。
彩度Cの値の範囲はどれくらいですか？
OKLCHのCは0（無彩色）から始まり、鮮やかな色ほど大きくなります。sRGBで表せる範囲は色相によって異なり、おおむね0〜0.37程度です。本ツールのスライダーは0〜0.4まで動かせますが、大きくするとsRGB色域外になり注記が出ることがあります。
入力した色はサーバーに送られますか？
送られません。sRGB・リニアRGB・XYZ・OKLab・OKLCH・CIELABの変換はすべてブラウザ内で計算し、色の値はどこにも送信されません。オフラインでも利用できます。