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 Level 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() 函數