lch()
Baseline 2023
Newly available
Since May 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
函数记号 lch()
在 LCH 颜色空间中表示指定颜色。此函数记号与 lab()
有相同的 L 轴,但使用极坐标 C(色度)和 H(色相)。
语法
lch(29.2345% 44.2 27);
lch(52.2345% 72.2 56.2);
lch(52.2345% 72.2 56.2 / .5);
取值
-
函数记号:
lch(L C H [/ A])
-
L
为介于0
和100
之间的<number>
或介于0%
和100%
之间的<percentage>
,指定了 CIE 明度,此处数值0
对应0%
(黑),数值100
对应100%
(白)。 -
C
为<number>
或<percentage>
,此处0%
对应0
,100%
对应数值150
。此值衡量了色度(大概表示“颜色的量”),其有用的最小值为0
,最大值无理论上限(但实际不超过230
)。 -
H
为<number>
或<angle>
,指定了沿正半 a 轴(紫红方向)的色相角。90deg
指向正半 b 轴(芥末黄方向),180deg
指向负半 a 轴(蓝绿方向),270deg
指向负半 b 轴(天蓝方向)。 -
A
(alpha)可为介于0
和1
之间的<number>
或<percentage>
,此处数值1
对应100%
(完全不透明)。
-
备注:
在 CSS 中,通常当百分比值有等价数值时,100%
等于数值 1
。此处注意 100%
对于 L
值等于数值 100
,对于 C
值等于 150
。
形式语法
示例
用 lch() 调整明度、色度和色相
下列示例展示了改变函数记号 lch()
的 L
(明度)、C
(色度)和 H
(色相)值的效果。
HTML
<div data-color="blue"></div>
<div data-color="blue-light"></div>
<div data-color="red"></div>
<div data-color="red-chroma"></div>
<div data-color="green"></div>
<div data-color="green-hue"></div>
CSS
[data-color="blue"] {
background-color: lch(0% 100 240);
}
[data-color="blue-light"] {
background-color: lch(100% 100 240);
}
[data-color="red"] {
background-color: lch(50% 130 20);
}
[data-color="red-chroma"] {
background-color: lch(100% 30 20);
}
[data-color="green"] {
background-color: lch(50% 132 130);
}
[data-color="green-hue"] {
background-color: lch(50% 132 180);
}
结果
用 lch() 调整不透明度
下列示例展示了改变函数记号 lch()
的 A
(alpha)值的效果。为演示不透明度的效果,red
和 red-alpha
元素与 #background-div
元素重叠。0.4
的 A
值使颜色有 40% 的不透明度。
HTML
<div id="background-div">
<div data-color="red"></div>
<div data-color="red-alpha"></div>
</div>
CSS
[data-color="red"] {
background-color: lch(50% 130 20);
}
[data-color="red-alpha"] {
background-color: lch(50% 130 20 / 0.4);
}
结果
规范
Specification |
---|
CSS Color Module Level 5 # relative-LCH |
CSS Color Module Level 4 # lab-colors |
浏览器兼容性
BCD tables only load in the browser
参见
<color>
数据类型所列的所有颜色记号- CSS 中的 LCH 颜色——是什么,为什么,怎么用?
- Safari 技术预览 122 发布记录:含
lch()
和lab()
颜色