lch()

基线 2023

新发布

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

**lch()** 函数表达式使用 LCH 颜色空间来表达给定的颜色，该颜色空间表示亮度、色度和色调。它使用与 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 #0000FF calc(l + 10) c h)
lch(from hsl(180 100% 50%) calc(l - 10) c h)
lch(from var(--aColorValue) l c h / calc(alpha - 0.1))

值

以下是允许的绝对值和相对颜色值的描述。

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

绝对值语法

lch(L C H[ / A])

参数如下

L: 在 0 和 100 之间的 <number>、在 0% 和 100% 之间的 <percentage> 或关键字 none（等效于 0%）。数字 0 对应于 0%（黑色），数字 100 对应于 100%（白色）。此值指定颜色在 CIELab 颜色空间中的亮度。

注意： lch() 中的 L 是感知亮度，它指的是我们用眼睛看到的“亮度”。这与 hsl() 中的 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 通道值的 <alpha-value>，其中数字 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 通道值的 <alpha-value>，其中数字 0 对应 0%（完全透明），1 对应 100%（完全不透明）。此外，关键字 none 可以用来明确指定没有 alpha 通道。如果 A 通道值没有明确指定，则默认为原色的 alpha 通道值。如果包含，则该值前缀为斜杠 (/)。

定义相对颜色输出通道组件

在 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)。calc() 计算应用于 L、C、H 和 A 值，导致输出颜色为 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( [ <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

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
div {
  height: 50px;
  border: 1px solid black;
}

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%），对于所有颜色来说，这几乎都是灰色。

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}
div {
  height: 50px;
  border: 1px solid black;
}

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>

等等。

<div data-color="80">80deg</div>
<div data-color="100">100deg</div>
<div data-color="120">120deg</div>
<div data-color="140">140deg</div>
<div data-color="160">160deg</div>
<div data-color="180">180deg</div>
<div data-color="200">200deg</div>
<div data-color="220">220deg</div>
<div data-color="240">240deg</div>
<div data-color="260">260deg</div>
<div data-color="280">280deg</div>
<div data-color="300">300deg</div>
<div data-color="320">320deg</div>
<div data-color="340">340deg</div>
<div data-color="360">360deg</div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
div {
  flex: 0 0 4em;
  text-align: center;
  line-height: 4em;
  display: inline-block;
  border: 1px solid black;
  color: white;
  font-family: monospace;
}

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);
}

等等。

[data-color="80"] {
  background-color: lch(50% 150 80deg);
}
[data-color="100"] {
  background-color: lch(50% 150 100deg);
}
[data-color="120"] {
  background-color: lch(50% 150 120deg);
}
[data-color="140"] {
  background-color: lch(50% 150 140deg);
}
[data-color="160"] {
  background-color: lch(50% 150 160deg);
}
[data-color="180"] {
  background-color: lch(50% 150 180deg);
}
[data-color="200"] {
  background-color: lch(50% 150 200deg);
}
[data-color="220"] {
  background-color: lch(50% 150 220deg);
}
[data-color="240"] {
  background-color: lch(50% 150 240deg);
}
[data-color="260"] {
  background-color: lch(50% 150 260deg);
}
[data-color="280"] {
  background-color: lch(50% 150 280deg);
}
[data-color="300"] {
  background-color: lch(50% 150 300deg);
}
[data-color="320"] {
  background-color: lch(50% 150 320deg);
}
[data-color="340"] {
  background-color: lch(50% 150 340deg);
}
[data-color="360"] {
  background-color: lch(50% 150 360deg);
}

结果

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

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: lch(100% 100 240);
  width: 150px;
  height: 40px;
}

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%。

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

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 颜色模块级别 5 # relative-LCH
CSS 颜色模块级别 4 # lab-colors

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

所有颜色表示法的列表
使用相对颜色
CSS 颜色模块
<hue> 数据类型
CSS 中的 LCH 颜色：什么、为什么以及如何？ by Lea Verou (2020)