1. Web
  2. CSS
  3. <color>
  4. lch()

lch()

Baseline 2023
新推出

自 ⁨2023 年 5 月⁩起，此功能可在最新的设备和浏览器版本上使用。此功能可能无法在旧版设备或浏览器上使用。

lch() 函数式表示法使用 LCH 色彩空间来表示指定颜色，它代表了亮度（lightness）、色度（chroma）和色相（hue）。它与 lab() 颜色函数使用相同的 L 轴，即 CIELab 色彩空间，但它使用极坐标 C（色度）和 H（色相）。

语法

css
/* Absolute values */
lch(29.2345% 44.2 27);
lch(52.2345% 72.2 56.2);
lch(52.2345% 72.2 56.2 / .5);

/* Relative values */
lch(from green l c h / 0.5)
lch(from #123456 calc(l + 10) c h)
lch(from hsl(180 100% 50%) calc(l - 10) c h)
lch(from var(--color-value) l c h / calc(alpha - 0.1))

值

下面描述了绝对颜色和相对颜色的允许值。

注意： 通常在 CSS 中，当百分比值有等效的数值时，100% 等于数字 1。但 lch() 不是这种情况。在这里，对于 L 值，100% 等于数字 100；对于 C 值，100% 等于数字 150。

绝对值语法

lch(L C H[ / A])

参数如下：

L

一个介于 0 和 100 之间的 <number>，一个介于 0% 和 100% 之间的 <percentage>，或关键字 none（等同于 0%）。数字 0 对应 0%（黑色），数字 100 对应 100%（白色）。这个值指定了颜色在 CIELab 色彩空间中的亮度。

注意： lch() 中的 L 是感知亮度，指的是我们肉眼视觉上感知的“明亮程度”。这与 hsl() 中的 L 不同，后者表示的是与其他颜色相比的亮度。

C

一个 <number>、一个 <percentage> 或关键字 none（在这种情况下等同于 0%）。这个值是颜色的色度（大致表示“颜色的量”）的度量。其有用的最小值为 0% 或 0，而其最大值理论上是无限的（但实际上不超过 230），其中 100% 等同于 150。

H

一个 <number>、一个 <angle> 或关键字 none（等同于 0deg），表示颜色的<hue> 角度。

注意： 特定色相对应的角度在 sRGB（由 hsl() 和 hwb() 使用）、CIELAB（由 lch() 使用）和 Oklab（由 oklch() 使用）色彩空间中是不同的。请参阅下面的LCH 中的色相示例以及 <hue> 参考页面了解更多详情和示例。

A 可选

一个 <alpha-value>，表示颜色的 alpha 通道值，其中数字 0 对应 0%（完全透明），1 对应 100%（完全不透明）。此外，关键字 none 可用于明确指定无 alpha 通道。如果未明确指定 A 通道值，则默认为 100%。如果包含该值，则其前面需要有一个斜杠（/）。

备注：有关 none 的效果，请参阅缺失的颜色分量。

相对值语法

lch(from <color> L C H[ / A])

参数如下：

from <color>

在定义相对颜色时，总是包含关键字 from，其后跟着一个 <color> 值，表示源颜色。这是相对颜色所基于的原始颜色。源颜色可以是任何有效的 <color> 语法，包括另一个相对颜色。

L

一个介于 0 和 100 之间的 <number>，一个介于 0% 和 100% 之间的 <percentage>，或关键字 none（等同于 0%）。数字 0 对应 0%（黑色），数字 100 对应 100%（白色）。这个值指定了颜色在 CIELab 色彩空间中的亮度。

C

一个 <number>、一个 <percentage> 或关键字 none（在这种情况下等同于 0%）。这个值表示输出颜色的色度值（大致表示“颜色的量”）。其有用的最小值为 0% 或 0，而其最大值理论上是无限的（但实际上不超过 230），其中 100% 等同于 150。

H

一个 <number>、一个 <angle> 或关键字 none（等同于 0deg），表示输出颜色的<hue> 角度。请参阅下面的色相示例。

A 可选

一个 <alpha-value>，表示输出颜色的 alpha 通道值，其中数字 0 对应 0%（完全透明），1 对应 100%（完全不透明）。此外，关键字 none 可用于明确指定无 alpha 通道。如果未明确指定 A 通道值，则默认为源颜色的 alpha 通道值。如果包含该值，则其前面需要有一个斜杠（/）。

定义相对颜色输出通道分量

在 lch() 函数中使用相对颜色语法时，浏览器会将源颜色转换为等效的 LCH 颜色（如果尚未指定为 LCH 颜色）。该颜色被定义为三个不同的颜色通道值——l（亮度）、c（色度）和 h（色相）——外加一个 alpha 通道值（alpha）。这些通道值在函数内部可用，用于定义输出颜色的通道值。

  • l 通道值解析为一个介于 0 和 100 之间（含）的 <number>。
  • c 通道值解析为一个介于 0 和 150 之间（含）的 <number>。
  • h 通道值解析为一个介于 0 和 360（含）之间的 <number>。
  • alpha 通道值解析为一个介于 0 和 1（含）之间的 <number>。

在定义相对颜色时，输出颜色的不同通道可以用几种不同的方式表示。下面，我们将通过一些示例来说明这些方式。

在下面的前两个示例中，我们使用了相对颜色语法。然而，第一个示例输出与源颜色相同的颜色，而第二个示例输出的颜色完全不基于源颜色。它们并没有真正创建相对颜色！你不太可能在实际的代码库中使用它们，而可能直接使用绝对颜色值。我们包含这些示例是为了帮助你开始学习相对 lch() 语法。

让我们从源颜色 hsl(0 100% 50%)（等同于 red）开始。下面的函数输出与源颜色相同的颜色——它使用源颜色的 l、c 和 h 通道值（54.29、106.854 和 40.856）作为输出通道值。

css
lch(from hsl(0 100% 50%) l c h)

此函数的输出颜色是 lch(54.29 106.854 40.856)。

下一个函数对输出颜色的通道值使用绝对值，输出了一个完全不同于源颜色的新颜色：

css
lch(from hsl(0 100% 50%) 29.6871% 66.83 327.109)

在上述情况下，输出颜色为 lch(29.6871 66.83 327.109)。

以下函数创建了一个基于源颜色的相对颜色：

css
lch(from hsl(0 100% 50%) 70 150 h)

此示例：

  • 将 hsl() 源颜色转换为等效的 lch() 颜色——lch(54.29 106.854 40.856)。
  • 将输出颜色的 H 通道值设置为源 lch() 等效颜色的 H 通道值——40.856。
  • 将输出颜色的 L 和 C 通道值设置为不基于源颜色的新值：分别为 70 和 150。

最终的输出颜色是 lch(70 150 40.856)。

备注：如上所述，如果输出颜色使用的颜色模型与源颜色不同，源颜色会在后台被转换为与输出颜色相同的模型，以便能够以兼容的方式表示（即使用相同的通道）。

在本节我们目前看到的示例中，源颜色和输出颜色的 alpha 通道都没有被明确指定。当未指定输出颜色的 alpha 通道时，它默认为与源颜色 alpha 通道相同的值。当未指定源颜色的 alpha 通道时（且它不是相对颜色），它默认为 1。因此，上述示例中的源和输出 alpha 通道值均为 1。

让我们看一些指定源和输出 alpha 通道值的示例。第一个示例将输出 alpha 通道值指定为与源 alpha 通道值相同，而第二个示例则指定一个与源 alpha 通道值无关的不同输出 alpha 通道值。

css
lch(from hsl(0 100% 50% / 0.8) l c h / alpha)
/* Computed output color: lch(54.29 106.854 40.856 / 0.8) */

lch(from hsl(0 100% 50% / 0.8) l c h / 0.5)
/* Computed output color: lch(54.29 106.854 40.856 / 0.5) */

在下面的示例中，hsl() 源颜色再次被转换为等效的 lch() 颜色——lch(54.29 106.854 40.856)。对 L、C、H 和 A 值应用 calc() 计算，最终输出颜色为 lch(74.29 86.8541 0.856018 / 0.9)。

css
lch(from hsl(0 100% 50%) calc(l + 20) calc(c - 20) calc(h - 40) / calc(alpha - 0.1))

备注：因为源颜色通道值被解析为 <number> 值，所以在使用它们进行计算时，你必须给它们加上数字，即使在通道通常接受 <percentage>、<angle> 或其他值类型的情况下也是如此。例如，将 <percentage> 添加到 <number> 是行不通的。

正式语法

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

<hue> = 
  <number>  |
  <angle>   

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

示例

调整颜色的亮度

这个例子展示了改变 lch() 函数式表示法中 L（亮度）值的效果。

HTML

html
<div data-color="blue-dark"></div>
<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red-dark"></div>
<div data-color="red"></div>
<div data-color="red-light"></div>

<div data-color="green-dark"></div>
<div data-color="green"></div>
<div data-color="green-light"></div>

CSS

css
[data-color="blue-dark"] {
  background-color: lch(10% 100 240);
}
[data-color="blue"] {
  background-color: lch(50% 100 240);
}
[data-color="blue-light"] {
  background-color: lch(90% 100 240);
}

[data-color="red-dark"] {
  background-color: lch(10% 130 20);
}
[data-color="red"] {
  background-color: lch(50% 130 20);
}
[data-color="red-light"] {
  background-color: lch(90% 130 20);
}

[data-color="green-dark"] {
  background-color: lch(10% 132 130);
}
[data-color="green"] {
  background-color: lch(50% 132 130);
}
[data-color="green-light"] {
  background-color: lch(90% 132 130);
}

结果

通过色度调整颜色强度

下面的例子展示了改变 lch() 函数式表示法中 C（色度）值的效果，随着 C 值从完全饱和降低到接近灰色，颜色强度也随之降低。

HTML

html
<div data-color="blue"></div>
<div data-color="blue-chroma1"></div>
<div data-color="blue-chroma2"></div>
<div data-color="blue-chroma3"></div>

<div data-color="red"></div>
<div data-color="red-chroma1"></div>
<div data-color="red-chroma2"></div>
<div data-color="red-chroma3"></div>

<div data-color="green"></div>
<div data-color="green-chroma1"></div>
<div data-color="green-chroma2"></div>
<div data-color="green-chroma3"></div>

CSS

以蓝色、红色和绿色作为初始颜色，我们为它们声明逐渐减小的色度值：从最高值 150（相当于 100%）的完全饱和度开始，一直到 3（相当于 2%），这对于所有颜色来说都几乎是灰色。

css
[data-color="blue"] {
  background-color: lch(50% 150 240);
}
[data-color="blue-chroma1"] {
  background-color: lch(50% 105 240);
}
[data-color="blue-chroma2"] {
  background-color: lch(50% 54 240);
}
[data-color="blue-chroma3"] {
  background-color: lch(50% 3 240);
}

[data-color="red"] {
  background-color: lch(50% 100% 20deg);
}
[data-color="red-chroma1"] {
  background-color: lch(50% 70% 20deg);
}
[data-color="red-chroma2"] {
  background-color: lch(50% 36% 20deg);
}
[data-color="red-chroma3"] {
  background-color: lch(50% 2% 20deg);
}

[data-color="green"] {
  background-color: lch(50% 150 130);
}
[data-color="green-chroma1"] {
  background-color: lch(50% 105 130);
}
[data-color="green-chroma2"] {
  background-color: lch(50% 54 130);
}
[data-color="green-chroma3"] {
  background-color: lch(50% 3 130);
}

结果

如果我们使用 0 而不是 3 和 2%，并且亮度值相同，那么所有颜色都将是相同色调的灰色。在这个例子中，它们是几乎灰色。

LCH 中的色相

以下示例展示了 lch() 函数式表示法中不同 H（色相）值的色块。

HTML

html
<div data-color="0">0deg</div>
<div data-color="20">20deg</div>
<div data-color="40">40deg</div>
<div data-color="60">60deg</div>

以此类推。

CSS

css
[data-color="0"] {
  background-color: lch(50% 150 0deg);
}
[data-color="20"] {
  background-color: lch(50% 150 20deg);
}
[data-color="40"] {
  background-color: lch(50% 150 40deg);
}
[data-color="60"] {
  background-color: lch(50% 150 60deg);
}

以此类推。

结果

lch() 中的色相角度与 hsl() 中的不同。更多信息请参见 <hue>。在 hsl() 中，sRGB 颜色的 0deg 代表红色。然而，在 CIELab 色彩空间中，0deg 对应品红色，而红色大约是 41deg。

使用 lch() 调整不透明度

以下示例展示了改变 lch() 函数式表示法中 A（alpha）值的效果。red 和 red-alpha 元素与 #background-div 元素重叠，以演示不透明度的效果。将 A 的值设为 0.4 会使颜色变为 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);
}

结果

使用 lch() 的相对颜色

本示例为三个 <div> 元素设置了不同的背景颜色，演示了如何使用 lch() 颜色函数通过相对颜色来改变颜色的亮度。中间的 <div> 保留了原始的 --base-color，而左边和右边的 <div> 则被赋予了 --base-color 的提亮和变暗版本。

这些变体是使用相对颜色定义的——将 --base-color 自定义属性传入一个 lch() 函数，并通过一个 calc() 函数修改其亮度通道来达到预期效果。提亮的颜色在亮度通道上增加了 15%，而变暗的颜色在亮度通道上减少了 15%。

CSS

css
:root {
  --base-color: orange;
}

#one {
  background-color: lch(from var(--base-color) calc(l + 15) c h);
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: lch(from var(--base-color) calc(l - 15) c h);
}

结果

输出如下：

规范

规范
CSS 颜色模块第五版
# relative-LCH
CSS 颜色模块第四版
# lab-colors

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面的最后修改时间是 ，由 MDN 贡献者们修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.