OKLCH コンバーターとパレットビルダー
OKLCH、16進、RGB、HSL を相互に変換し、色相が動くあいだ明度と彩度を保つことで、知覚的に均等なランプを作ります。sRGB を外れた色はチャンネルのクリップではなく彩度を下げてマッピングします。違いは、その紫が紫のままかどうかです。
OKLCH の明度に意味がある理由
HSL では明度を固定したまま色相を変えると、色の明るさの見え方まで変わる。50% の黄色は 50% の青よりはるかに明るく見え、どれだけ丁寧に間隔を取っても HSL のランプが不揃いに見えるのはこのためだ。OKLab は知覚データに合わせて作られており、その明度軸は目が報告する明るさに沿う。L と C を固定して H を回せば、どのスウォッチも同じ視覚的な重さを持つ。パレットを HSL ではなくここで組む理由は、まさにそれに尽きる。
肝心なのは色域マッピング
OKLCH の値の多くは sRGB に対応する色を持たない。素朴な対処は各チャンネルを範囲内に押し込むことだが、それでは色相が目に見えてずれる。鮮やかな紫をチャンネルごとにクリップすると青のほうへ流れていく。明度と色相を保ったまま彩度だけを下げれば、色はそれとわかるまま残り、失われるのは画面がもともと出せなかった鮮やかさだけだ。このページは CSS Color 4 のアルゴリズムを使う——彩度を二分探索し、クリップした結果が低減後の色と「かろうじて気づく差」の内側に入った時点でそれを採る。
リファレンスと照合済み
これらの変換は、四千色のグリッド上で独立した実装と突き合わせてある。明度と彩度は100万分の1まで、色相は1万分の1度まで一致し、どの16進値も厳密に往復する。色域マッピングも同じやり方で色域外の480色に対して確かめ、最悪でも255分の1以内に収まった。OKLCH を読む人は行列の誤りに気づく。だから、どう検証したかを書いておく価値があると考えた。
出力の使い方
カスタムプロパティは OKLCH で書き、その横のコメントに16進を添えている。レビューで欲しいのはこの組み合わせだからだ。ビルドが出荷する値と、ほかのどこにでも貼れる値。いま使われているブラウザはどれも OKLCH の構文を解する。それでも解さないものを支える必要があるなら、そのコメントがフォールバックになる。
よくある質問
彩度の上限が 0.4 なのはなぜ？
sRGB にはそこに近づく色がないからだ。sRGB でもっとも彩度が高いのは青で、およそ 0.313。スライダーはあえてその先まで動かせるようにしてある。何が色域から外れ、どう戻されるのかを見てもらうためだ。
ここでいう「かろうじて気づく差」とは？
OKLab における 0.02 の色差で、CSS Color 4 が採る閾値だ。これを下回ると、クリップと彩度低減は見分けがつかない。そこでアルゴリズムはクリップした色を採り、余分な彩度を残す。
P3 や Rec2020 に対応していますか？
まだです。ここでの対象はすべて sRGB で、色域の警告もその意味です。より広い色域には固有の原色と、もう一組の行列が要ります。
この内容はどこかに送られますか？
いいえ。変換はすべてこのページ内で行われます。
GO AIチームが作りました。 CSS clamp() 計算ツール · 無料ツール一覧