CSS lab() 関数

定義と使用方法

CSSの lab() 関数は、CIE Lab 色空間で色を指定します。この色空間は、人間の目が見えるすべての色を表現しています。

例

定義する lab() 色：

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

実際に試してみる

CSS 構文

絶対値の構文

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

必須。色の明るさを定義し、0 から 100 までの数字またはパーセントです。

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

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

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

a 軸上の色の距離を定義し、色の赤緑度を示します。-125 は緑を、125 は赤を示します。

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

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

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

-125 は青を、125 は黄色を示します。

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

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

none（透明度チャンネルを示す）を使用することもできます。

デフォルト値は 100% です。

相対値の構文

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

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

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

必須。色の明るさを定義し、0 から 100 までの数字またはパーセントです。

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

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

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

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

-125 は緑を、125 は赤を示します。

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

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

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

-125 は青を、125 は黄色を示します。

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

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

none（透明度チャンネルを示す）を使用することもできます。

デフォルト値は 100% です。

技術的詳細

バージョン： CSS Color Module レベル 4

ブラウザのサポート

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

Chrome Edge Firefox Safari Opera
lab()
111 111 113 15 97
パラメータ内で数字とパーセントを混ぜ合わせる
116 116 113 16.2 102

関連ページ

参考：CSS カラー

参考：CSS hsl() 関数

参考：CSS hwb() 函数

参考：CSS lch() 函数

参考：CSS oklab() 函数

参考：CSS oklch() 函数