CSS lch() 函數

定義和用法

CSS 的 lch() 函數在 LCH（亮度-色度-色調）顏色空間中指定顏色。

實例

定義不同的 lch() 顏色：

#p1 {background-color:lch(10% 100 130 / 0.5);}
#p2 {background-color:lch(40% 100 130);}
#p3 {background-color:lch(90% 100 130 / 20%);}
#p4 {background-color:lch(10% 160 200);}
#p5 {background-color:lch(40% 160 200);}
#p6 {background-color:lch(90% 160 200 / 0.3);}
#p7 {background-color:lch(10% 130 70 / 0.5);}
#p8 {background-color:lch(40% 130 70);}
#p9 {background-color:lch(90% 130 70);}

親自試一試

CSS 語法

絕對值語法

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

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

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

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

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

最小值為 0（或 0%）。最大值無上限（但實際上不超過 230）。100% 等于 150。

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

必需。定義顏色的色調角度，可以是數字或角度值。

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

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

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

默認值為 100%。

相對值語法

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

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

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

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

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

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

必需。定義 -125 到 125 之間的數字或 -100% 到 100% 之間的百分比。

定義顏色沿 a 軸的距離，表示顏色的紅綠程度。

-125 表示綠色，125 表示紅色。

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

必需。定義顏色的色調角度，可以是數字或角度值。

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

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

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

默認值為 100%。

技術細節

版本： CSS Color Module Level 4

瀏覽器支持

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

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

相關頁面

參考：CSS 顏色

參考：CSS hsl() 函數

參考：CSS hwb() 函數

參考：CSS lab() 函數

參考：CSS oklab() 函數

參考：CSS oklch() 函數