oklch()

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

oklch() 関数記法は、指定された色を OKLCH 色空間で表現します。これは oklab() と同じ L 軸を持っていますが、極座標 C (彩度)と H (色相)を使用します。

構文

css

oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)

関数記法: oklch(L C H [/ A])

L は知覚される明度を指定し、黒を表す 0% と白を表す 100% の間の <percentage> で表します。

2 つ目の引数 C は彩度(おおよそ「色の量」を表します)です。その有益な最小値は 0 であり、その最大値は理論的には無制限です(しかし、実際には 0.4 を超えることはありません)。

3 つ目の引数 H は色相角です。 0deg は正の "a" 軸に沿って(紫がかった赤に)、90deg は正の "b" 軸に沿って(マスタードイエローに)、 180deg は負の a 軸に沿って(緑がかったシアンに)、そして 270deg は負の b 軸に沿って(スカイブルーに)点を取ります。

A (アルファ) は <number>0 から 1 の間、または <percentage> で、数値 1100% (完全不透明)に相当します。

仕様書

Specification
CSS Color Module Level 4
# ok-lab

ブラウザーの互換性

BCD tables only load in the browser

関連情報