OKLCH カラーピッカー
OKLCH は CSS Color 4 が使用する色空間で、明度、彩度、色相を目が実際に期待する通りに動作させる：固定された L+C で色相をずらしても知覚される明るさが安定する。古い HSL は劇的にシフトする。このピッカーは 3 チャンネルとアルファを公開し、正確な CSS oklch() 形式、等価な sRGB hex / rgb / hsl、OKlab a/b 内訳を表示し、色が彩度過多で sRGB モニター色域を外れる場合に警告を表示する（その場合、ブラウザは最も近い sRGB 色にフォールバックする）。
- oklch()oklch(65.0% 0.180 240.0)
- Hex（クリップ）#0099f0
- rgb()rgb(0, 153, 240)
- hsl()hsl(202, 100%, 47%)
- oklab()oklab(65.0% -0.090 -0.156)
明度 0~1（0 = 黒、1 = 白）。彩度 0 はニュートラルグレー；0.3 を超える値は sRGB の外に出ることがよくある。
使い方
- L、C、H をドラッグして色を調整 — 色域バッジに注意。
- 画面上のスウォッチを正確にしたい場合、色域バッジが琥珀色になったら彩度を少し下げる。
- スタイルシートが必要とする形式をコピー：モダンなスタックは oklch() 文字列を選ぶべき。
よくある質問
- なぜ色が「sRGB 外」と表示される？
- 標準モニターは人間が見える色の限られた範囲（sRGB）のみ表示できる。OKLCH はより広い、知覚的に均一な空間なので、sRGB 画面に単に収まらない色を指定できる。ブラウザはそれらを最も近い sRGB マッチにクリップする — hex プレビューはクリップされた結果を表示する。
- なぜ oklch() を hsl() より好む？
- HSL は RGB 上に構築されたため、明度は色相間で不均一（同じ L で黄色は青よりずっと明るく見える）。OKLCH は実際の知覚データに合わせてチューニングされているため、色相を変更してもアニメーション、テーマトークン、アクセシビリティ比率が予測可能なまま。
このテーマのガイド
関連ツール
CSS color-mix() プレビュー (補間空間の比較)
モダン CSS の color-mix() 関数が補間空間 (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) によって 2 色をどう異なる結果で混ぜるかを並べて比較 — ライブスウォッチ、計算済み hex、各空間のフルグラデーション、コピー可能な CSS 付き。
カラー名検索
任意のhex/RGB色に最も近いCSS・Tailwind・XKCD色名をOKLabの知覚距離で順位付け表示。
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
色距離 (ΔE)
2 つの色を選んで、どれくらい知覚的に異なるかを表示 — CIE76 ΔE、CIEDE2000 ΔE、プレーンな RGB 距離と並列スウォッチ。
カラー補間 / グラデーションステップ
2 つの 16 進カラーを選び、N の離散中間ステップを得る — sRGB、線形 RGB、OKLab または HSL で — オプションのイージング付き。
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。