OKLCHグラデーションのデモページを作ってみた

OKLCHとは

OKLCHは「見た目」に沿って色を扱うための座標。
L=明るさ、C=彩度（どれだけ濃いか）、H=色相（赤〜青…の方向）。
oklch(70% 0.20 120) と書けば、「少し明るい・ほどよく鮮やかな緑」…そんな感じで通じる。

RGBやHSLみたいに数値は動くけれど、OKLCHは“人の目の感じ方”に合わせている。
だから中間色が素直に流れる。グラデの途中で急に濁らない。

いいところ

• 中間がきれい
  OKLCHで補間すると、グラデの途中が自然。

• 操作が素直
  明るさだけ、彩度だけ、色相だけ…を独立に動かせる。意図が伝わりやすい。

• 設計に向く
  Lを揃えれば明るさが揃い、Cで強さを微調整。可読性やアクセシビリティの調整がしやすい。

気をつけたいところ

• 色域の壁
  Cは理論上いくらでも上げられるけれど、表示はモニターの色域次第。
  sRGBだと出ない鮮やかさも、P3なら出る…みたいな差がある。
  つまり「Cの最大値」は色相とモニターで変わる。見た目で決めるのが早い。

• 対応状況
  主要ブラウザの新しめならOK。ただ、古い環境では崩れることがある。

• ツールの癖
  Cの上限が色相で違うので、数値だけ追うより、ピッカーで手を動かした方が迷わない。

参考記事：知覚的に均一になるように設計された新しいカラーモデル「OKLCH」とは？ - GIGAZINE