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( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<hue> =
<number> |
<angle>
<alpha-value> =
<number> |
<percentage>
示例
用 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 |
浏览器兼容性
Loading…
参见
<color>数据类型所列的所有颜色记号- CSS 中的 LCH 颜色——是什么，为什么，怎么用？
- Safari 技术预览 122 发布记录：含
lch()和lab()颜色