OKLCH ⇔ HEX・RGB・HSL を双方向に相互変換
OKLCHは CSS Color Module Level 4（CSS Color 4）で標準化された新しい色指定方法で、2023年以降にChrome・Safari・Firefox・Edgeなど主要ブラウザでBaselineとなりました。本ツールは、この OKLCH カラーをブラウザだけで自由に調整し、従来の sRGB HEX・RGB・HSL と双方向に相互変換できる無料ツールです。インストールや会員登録は不要で、入力した色の値はすべて端末内で処理され外部に送信されません。
使い方はシンプルです。L（明度）・C（彩度／クロマ）・H（色相）・Alpha（不透明度）の4つのスライダーを動かすと、上部のスウォッチ（色見本）と oklch(L C H) のCSS文字列がリアルタイムに更新されます。「CSS値をコピー」ボタンを押せば、そのままスタイルシートに貼り付けられます。逆に、下部のHEX欄に #ff0000 のようなカラーコードを貼り付けると、対応するOKLCH値へ即座に逆変換され、スライダーにも反映されます。RGBやHSLの数値からの変換にも対応しています。
| 記号 | 意味 | 範囲 |
|---|---|---|
| L | 知覚的な明度（Lightness）。0が黒、1が白 | 0 〜 1 |
| C | 彩度・クロマ（Chroma）。0が無彩色、大きいほど鮮やか | 0 〜 約0.4 |
| H | 色相（Hue）。色の角度。0=赤系、120=緑系、240=青系 | 0 〜 360° |
| Alpha | 不透明度。0で透明、1で不透明 | 0 〜 1 |
従来よく使われてきたHSLは、同じL（明度）の値でも色相によって見た目の明るさが大きくばらつくという弱点がありました。たとえばHSLで明度50%の黄色と青は、数値上は同じでも人間の目には黄色のほうがずっと明るく見えます。OKLCHはOKLabという知覚的均一性を重視した色空間をベースにしているため、Lを固定したまま色相Hだけを変えても、見た目の明るさがほぼ一定に保たれます。これにより、アクセシブルなカラーパレット設計、ダークモードの配色、なめらかなグラデーション作成が格段に扱いやすくなります。
OKLCHはsRGBより広い範囲の色を数式上表現できるため、CやLの組み合わせによっては現在のsRGBディスプレイで再現できない色になることがあります。この状態を「色域外（out of gamut）」と呼びます。本ツールでは色域外を検出すると警告を表示し、HEX・RGBの出力はsRGBの表示可能範囲へクランプ（各チャンネルを0〜255に丸め込み）した近似値を表示します。厳密な色を保ちたい場合は、Cを下げるかLを調整して警告が消える範囲に収めてください。
本ツールは色の変換を数式でごまかさず、Björn Ottosson氏が公開したOKLabの標準変換をそのまま実装しています。OKLCHからsRGBへは「OKLCH → OKLab（極座標を直交座標へ）→ linear-sRGB（3×3行列と立方）→ sRGB（ガンマ補正）」の順に、逆方向はその逆順で計算します。sRGB↔linear-sRGB間はCSSと同じガンマ関数（しきい値0.04045／0.0031308、指数2.4）を使用しています。たとえば oklch(0.628 0.2577 29.23) は sRGBの純赤 #ff0000 にほぼ一致し、逆変換しても元の値に戻る往復（ラウンドトリップ）整合性を確認済みです。