CSS oklch() 函數

定義和用法

CSS 中的 oklch() 函數用于在 OKLCH 色彩空間中指定顏色。

oklch() 函數非常直觀：您需要考慮使用的亮度/明度（L）的量、色調（灰色）的強度（C），以及顏色本身（H）。此外，您還可以選擇添加一個透明度通道值（A），表示顏色的不透明度。

實例

定義不同的 oklch() 顏色：

/* 不同亮度的綠色 /
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ 不同亮度的黃色 /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ 不同亮度的紅色 */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

親自試一試

CSS 語法

絕對值語法

oklch(L C H / A)
值 描述
L

必需。定義顏色的感知亮度，可以是 0 到 1 之間的數字或 0% 到 100% 之間的百分比。

0（或 0%）表示黑色，1（或 100%）表示白色。

也可以使用 none（等同于 0%）。
C

必需。定義顏色的色度（顏色的量），可以是數字或百分比。

必須是 -0.4 到 0.4 之間的數字或 -100% 到 100% 之間的百分比。

最小值（0% 或 -0.4）時，顏色更接近灰色。

也可以使用 none（等同于 0%）。
H

必需。定義顏色本身，可以是數字或角度（0 到 360）。

也可以使用 none（等同于 0deg）。
/ A

可選。表示顏色的透明度通道值（0%（或 0）表示完全透明，100%（或 100）表示完全不透明）。

也可以使用 none（表示無透明度通道）。

默認值為 100%。

相對值語法

oklch(from color L C H / A)
值 描述
from color

以關鍵字 from 開頭，后跟表示原始顏色的顏色值。

這是相對顏色所基于的原始顏色。
L

必需。定義顏色的感知亮度，可以是 0 到 1 之間的數字或 0% 到 100% 之間的百分比。

0（或 0%）表示黑色，1（或 100%）表示白色。

也可以使用 none（等同于 0%）。
C

必需。定義顏色的色度（顏色的量），可以是數字或百分比。

必須是 -0.4 到 0.4 之間的數字或 -100% 到 100% 之間的百分比。

最小值（0% 或 -0.4）時，顏色更接近灰色。

也可以使用 none（等同于 0%）。
H

必需。定義顏色本身，可以是數字或角度（0 到 360）。

也可以使用 none（等同于 0deg）。
/ A

可選。表示顏色的透明度通道值（0%（或 0）表示完全透明，100%（或 100）表示完全不透明）。

也可以使用 none（表示無透明度通道）。默認值為 100%。

技術細節

版本： CSS Color Module Level 4

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

Chrome Edge Firefox Safari Opera
oklch()
111 111 113 15.4 97
在參數中混合使用數字和百分比
116 116 113 16.2 102

相關頁面

參考：CSS 顏色

參考：CSS hsl() 函數

參考：CSS hwb() 函數

參考：CSS lab() 函數

參考：CSS lch() 函數

參考：CSS oklab() 函數