CSS oklab() 関数

定義と使用方法

CSSの oklab() 関数は、OKLAB色彩空間で色を指定するために使用されます。この色彩空間は、人間の目が色を認識する方法を模倣しています。

例

定義する oklab() 色：

#p1 {background-color:oklab(0 40% 20% / 0.5);}
#p2 {background-color:oklab(0.3 -40% -20%);}
#p3 {background-color:oklab(0.4 30% -20% / 20%);}
#p4 {background-color:oklab(0.5 60% 20%);}
#p5 {background-color:oklab(0.6 50% -10%);}
#p6 {background-color:oklab(0.7 70% -80% / 0.3);}
#p7 {background-color:oklab(0.8 70% 20% / 0.5);}
#p8 {background-color:oklab(0.9 80% -20%);}
#p9 {background-color:oklab(1 90% -100%);}

実際に試してみる

CSS構文

絶対値構文

oklab(L a b / A)
値 説明
L

必須。色の感知明度を定義します。0から1までの数字または0%から100%までのパーセンテージができます。

0（または0%）は黒色を示し、1（または100%）は白色を示します。

None（0%に等しい）を使用することもできます。
a

必須。-0.4から0.4までの数字または-100%から100%までのパーセンテージを定義します。

a軸沿いの色の距離を定義し、色の赤緑度を示します。

-0.4は緑色を示し、0.4は赤色を示します。none（0%に等しい）を使用することもできます。
b

必須。-0.4から0.4までの数字または-100%から100%までのパーセンテージを定義します。

b軸沿いの色の距離を定義し、色の黄緑度を示します。

-0.4は青色を示し、0.4は黄色を示します。none（0%に等しい）を使用することもできます。
/ A

オプション。色の透明度チャネルの値（0%（または0）は完全に透明、100%（または100）は完全不透明を示します）。

none（透明度チャネルを示す）を使用することもできます。デフォルト値は100%です。

相対値構文

oklab(from color L a b / A)
値 説明
from color

キーワード fromで始まり、元の色を示す色値が続きます。

これは相対色が基づく元の色です。
L

必須。色の感知明度を定義します。0から1までの数字または0%から100%までのパーセンテージができます。

0（または0%）は黒色を示し、1（または100%）は白色を示します。

none（0%に等しい）を使用することもできます。
a

必須。-0.4から0.4までの数字または-100%から100%までのパーセンテージを定義します。

a軸沿いの色の距離を定義し、色の赤緑度を示します。

-0.4は緑色を示し、0.4は赤色を示します。none（0%に等しい）を使用することもできます。
b

必須。-0.4から0.4までの数字または-100%から100%までのパーセンテージを定義します。

b軸沿いの色の距離を定義し、色の黄緑度を示します。

-0.4は青色を示し、0.4は黄色を示します。none（0%に等しい）を使用することもできます。
/ A

オプション。色の透明度チャネルの値（0%（または0）は完全に透明、100%（または100）は完全不透明を示します）。

none（透明度チャネルを示す）を使用することもできます。デフォルト値は100%です。

技術的詳細

バージョン： CSS Color Module Level 4

ブラウザのサポート

テーブルの数字は、この関数を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
oklab()
111 111 113 15.4 97
パラメータ内で数字とパーセンテージを組み合わせて使用
116 116 113 16.2 102

関連ページ

参考：CSS カラー

参考：CSS hsl() 関数

参考：CSS hwb() 函数

参考：CSS lch() 函数

参考：CSS lab() 函数

参考：CSS oklch() 函数