HEX → OKLCH 変換

OKLCHは、色を知覚される明度（L）、彩度（C、どれだけ鮮やかか）、色相角（H）で表します。HSLと違い、Lが同じ量だけ変化すれば、どの色相でも同じだけ明るく、または暗く見えるため、パレットやホバー状態、アクセシブルなコントラストを作るのに最適な色空間です。この変換ツールは、HEX、rgb()、hsl()をCSS用の oklch() と oklab() に変換し、OKLCHをHEXに戻します。sRGBの外にある色はCSS Color 4の方法で内側にマッピングし、sRGBとDisplay P3の色域に収まるかどうかもお知らせします。

使い方

1. 変換方向を選びます。
2. HEX、rgb()、hsl()の色、またはoklch(70% 0.2 150)のようなoklch()の値を入力します。
3. L、C、H、oklab()の形式、または色域チェック付きのHEXを確認します。
4. 多くの色は、一括の入力欄にリストを貼り付けます。

計算式

線形sRGB → LMS (3×3) → ∛ → OKLab (3×3) · C = √(a² + b²) · H = atan2(b, a)

行列は、CSS Color 4と同じOttossonのものです。色域外の色は、明度Lと色相Hを一定に保ったまま、単純なクリップによる色の変化がΔEOK 0.02未満になるまで彩度を下げる方法（CSS Color 4のアルゴリズム）でマッピングします。

計算例

純粋な赤 #FF0000 は oklch(62.8% 0.2577 29.23)、oklab(62.8% 0.2249 0.1258) で、CSS Color 4仕様に載っている値です。逆に oklch(70% 0.4 150) はDisplay P3でも表現できないほど鮮やかな緑で、色域マッピングすると #00C248 になり、チャンネルを単純に切り詰めると、より明るくどぎない #00D600 になります。oklch(70% 0.2 150) はP3には収まりますがsRGBには収まらず、クリップした値 #00BF54 はすでに許容範囲内です。