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