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(色相)。

语法

css
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 为介于 0100 之间的 <number> 或介于 0%100% 之间的 <percentage>,指定了 CIE 明度,此处数值 0 对应 0%(黑),数值 100 对应 100%(白)。

    • C<number><percentage>,此处 0% 对应 0100% 对应数值 150。此值衡量了色度(大概表示“颜色的量”),其有用的最小值为 0,最大值无理论上限(但实际不超过 230)。

    • H<number><angle>,指定了沿正半 a 轴(紫红方向)的色相角。90deg 指向正半 b 轴(芥末黄方向),180deg 指向负半 a 轴(蓝绿方向),270deg 指向负半 b 轴(天蓝方向)。

    • A(alpha)可为介于 01 之间的 <number><percentage>,此处数值 1 对应 100%(完全不透明)。

备注: 在 CSS 中,通常当百分比值有等价数值时,100% 等于数值 1。此处注意 100% 对于 L 值等于数值 100,对于 C 值等于 150

形式语法

<lch()> = 
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<hue> =
<number> |
<angle>

<alpha-value> =
<number> |
<percentage>

示例

用 lch() 调整明度、色度和色相

下列示例展示了改变函数记号 lch()L(明度)、C(色度)和 H(色相)值的效果。

HTML

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

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)值的效果。为演示不透明度的效果,redred-alpha 元素与 #background-div 元素重叠。0.4A 值使颜色有 40% 的不透明度。

HTML

html
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

CSS

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
lch() (LCH color model)
Mix <percentage> and <number> in parameters
Relative LCH colors

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

参见