もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

CSSでは、さまざまなカラーモデルで色を設定できます。16進数によるHEX値、rgb()によるRGB値、hsl()によるHSL値、lab()によるLAB値、oklch()Oklch値、oklab()によるOklab値など、現在ではすべてのブラウザにサポートされています。
oklch() は、比較的新しい色表現で、人間の視覚により自然に一致するよう設計されたカラーモデルです。従来の rgb() や hsl() よりも「見た目の均一性」が高いのが特徴です。ここでは、このOKLCHカラーについて解説します。

基本構造

color: oklch(L C H);

それぞれのパラメーターの意味は

• L（Lightness）：明るさ（0〜1 または 0%〜100%）
• C（Chroma）：彩度（0〜約0.4程度が実用範囲）
• H（Hue）：色相（0〜360度）

color: oklch(0.7 0.15 200);

直感的な特徴

1. 明るさが視覚的に正確

oklch()の最大の利点はこれです。UIデザインでかなり重要です。

• hsl()では同じLでも色によって明るさが違って見える
• oklch()では同じLならほぼ同じ明るさに見える

2. グラデーションが自然

rgb()では、中間で濁ることがあるが、oklch() カラーモデルではスムーズで自然なグラデーション発色できる。

background: linear-gradient( to right, oklch(0.7 0.1 30), oklch(0.7 0.1 200) );

3. 色の調整が直感的

値の意味がそのまま見た目の色に対応します。

/* 少し明るくする */
oklch(0.6 0.2 30) → oklch(0.7 0.2 30)

/* 彩度を下げる */
oklch(0.6 0.2 30) → oklch(0.6 0.1 30)

従来モデルとの違い

モデル	問題点
rgb()	人間の視覚とズレる
hsl()	明るさが不正確
lab()	直感的じゃない
oklch()	バランス良い（推奨）

実用的な使い方

デザインシステム

明るさだけ変えれば一貫性を保てます。

:root {
  --primary: oklch(0.65 0.2 250);
  --primary-hover: oklch(0.7 0.2 250);
}

ダークモード対応

同じ色相で自然に調整が可能になります。

/* ライト */
color: oklch(0.9 0.02 250);

/* ダーク */
color: oklch(0.3 0.02 250);

注意点

• ブラウザ対応
• 最新の Chrome / Safari / Firefox は対応済み（2024以降ほぼOK）
• 彩度の上限
• Cは無制限ではない（だいたい0.4前後）
• 古い環境ではフォールバック必要

color: rgb(0, 120, 255);
color: oklch(0.65 0.2 250);

まとめ

• oklch()は「人間の見た目ベース」の色モデル
• 明るさ・彩度・色相が直感的に操作できる
• グラデーションやUI設計に非常に強い
• 今後のCSS標準の主流になりつつある