lab()

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.

The lab() functional notation expresses a given color in the CIE L*a*b* color space.

Lab represents the entire range of colors that humans can see by specifying the color's lightness, a red/green axis value, a blue/yellow axis value, and an optional alpha transparency value.

语法

css

/* Absolute values */
lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);
lab(52.2345% 40.1645 59.9971 / .5);

/* Relative values */
lab(from green l a b / 0.5)
lab(from #0000FF calc(l + 10) a b)
lab(from hsl(180 100% 50%) calc(l - 10) a b)

Values

Below are descriptions of the allowed values for both absolute and relative colors.

Absolute value syntax

lab(L a b[ / A])

The parameters are as follows

L: A <number> between 0 and 100, a <percentage> between 0% and 100%, or the keyword none (equivalent to 0% in this case). This value specifies the color's lightness. Here the number 0 corresponds to 0% (black) and the number 100 corresponds to 100% (white).
a: A <number> between -125 and 125, a <percentage> between -100% and 100%, or the keyword none (equivalent to 0% in this case). This value specifies the color's distance along the a axis, which defines how green (moving towards -125) or red (moving towards +125) the color is. Note that these values are signed (allowing both positive and negative values) and theoretically unbounded, meaning that you can set values outside the ±125 (±100%) limits. In practice, values cannot exceed ±160.
b: A <number> between -125 and 125, a <percentage> between -100% and 100%, or the keyword none (equivalent to 0% in this case). This value specifies the color's distance along the b axis, which defines how blue (moving towards -125) or yellow ( moving towards +125) the color is. Note that these values are signed (allowing both positive and negative values) and theoretically unbounded, meaning that you can set values outside the ±125 (±100%) limits. In practice, values cannot exceed ±160.
A Optional: 一个<alpha-value>，代表颜色的 alpha 通道值，其中数字 0 对应 0%（完全透明）和 1 对应 100%（完全不透明）。此外，可以使用关键字 none 明确指定没有 alpha 通道。如果A 通道值未明确指定，则默认为 100%。如果包含，该值将以斜杠（/）开头。

注意：有关none 的影响的更多信息，请参阅缺少颜色组件。

相对值语法

lab(from <color> L a b[ / A])

The parameters are as follows

from <color>: 定义相对颜色时始终包含关键字 from，后跟一个<color> 值，表示原色。这是相对颜色所基于的原始颜色。原色可以是任何有效的 <color> 语法，包括另一个相对颜色。
L: 一个在 0 到 100 之间的 <number>，一个在 0% 到 100% 之间的 <percentage>，或关键字 none（在本例中相当于 0%）。此值表示输出颜色的亮度。这里数字 0 对应 0%（黑色）和数字 100 对应 100%（白色）。
a: 一个在 -125 到 125 之间的 <number>，一个在 -100% 到 100% 之间的 <percentage>，或关键字 none（在本例中相当于 0%）。此值表示输出颜色沿 a 轴的距离，它定义了颜色是多么的绿色（向 -125 移动）或红色（向 +125 移动）。请注意，这些值是有符号的（允许正值和负值）并且理论上是无界的，这意味着您可以设置超出 ±125 (±100%) 限制的值。在实践中，值不能超过 ±160。
b: 一个在 -125 到 125 之间的 <number>，一个在 -100% 到 100% 之间的 <percentage>，或关键字 none（在本例中相当于 0%）。此值表示输出颜色沿 b 轴的距离，它定义了颜色是多么的蓝色（向 -125 移动）或黄色（向 +125 移动）。请注意，这些值是有符号的（允许正值和负值）并且理论上是无界的，这意味着您可以设置超出 ±125 (±100%) 限制的值。在实践中，值不能超过 ±160。
A 可选: 一个<alpha-value>，代表输出颜色的 alpha 通道值，其中数字 0 对应 0%（完全透明）和 1 对应 100%（完全不透明）。此外，可以使用关键字 none 明确指定没有 alpha 通道。如果A 通道值未明确指定，则默认为原色的 alpha 通道值。如果包含，该值将以斜杠（/）开头。

注意：通常，当百分比值在 CSS 中具有数值等效值时，100% 等于数字 1。这并不总是适用于 LAB 的亮度和 a 和 b 轴，如上所述。对于 L，范围为 0 到 100，100% 等于 100。a 和 b 值支持正值和负值，100% 等于 125，-100% 等于 -125。

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

在 lab() 函数内使用相对颜色语法时，浏览器会将原色转换为等效的 Lab 颜色（如果它还没有以这种方式指定）。该颜色定义为三个不同的颜色通道值 - l（亮度）、a（绿色/红色轴）和 b（蓝色/黄色轴） - 以及一个 alpha 通道值 (alpha)。这些通道值在函数内可用，用于定义输出颜色通道值

l 通道值解析为一个在 0 到 100（含）之间的 <number>。
a 和 b 通道分别解析为一个在 -125 到 125（含）之间的 <number>。
alpha 通道解析为一个在 0 到 1（含）之间的 <number>。

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

在下面的前两个例子中，我们使用的是相对颜色语法。但是，第一个输出的颜色与原色相同，而第二个输出的颜色根本不基于原色。它们并没有真正创建相对颜色！你不太可能在实际代码库中使用这些，可能只会使用绝对颜色值。我们包含这些例子作为学习相对 lab() 语法的起点。

让我们从 hsl(0 100% 50%)（相当于 red）的原色开始。以下函数输出的颜色与原色相同 - 它使用原色的 l、a 和 b 通道值 (54.29、80.8198 和 69.8997) 作为输出通道值

css

lab(from hsl(0 100% 50%) l a b)

此函数的输出颜色为 lab(54.29 80.8198 69.8997)。

下一个函数对输出颜色的通道值使用绝对值，输出一个完全不同的颜色，不基于原色

css

lab(from hsl(0 100% 50%) 29.692% 44.89% -29.034%)

在上面的情况下，输出颜色为 lab(29.692 56.1125 -36.2925)。

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

css

lab(from hsl(0 100% 50%) l -100 b)

此示例

将 hsl() 原色转换为等效的 lab() 颜色 - lab(54.29 80.8198 69.8997)。
将输出颜色的 l 和 b 通道值设置为原 lab() 等效值的 L 和 b 通道值 - 这些值分别为 54.29 和 69.8997。
将输出颜色的 a 通道值设置为一个不基于原色的新值：-100。

最终的输出颜色为 lab(54.29 -100 69.8997)。

注意：如上所述，如果输出颜色使用与原色不同的颜色模型，则原色将在后台转换为与输出颜色相同的模型，以便它可以用兼容的方式表示（即使用相同的通道）。

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

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

css

lab(from hsl(0 100% 50% / 0.8) l a b / alpha)
/* Computed output color: lab(54.29 80.8198 69.8997 / 0.8) */

lab(from hsl(0 100% 50% / 0.8) l a b / 0.5)
/* Computed output color: lab(54.29 80.8198 69.8997 / 0.5) */

在以下示例中，hsl() 原色再次转换为 lab() 等效值 - lab(54.29 80.8198 69.8997)。对 L、a、b 和 A 值应用 calc() 计算，得出输出颜色为 lab(74.29 60.8198 29.8997 / 0.9)

css

lab(from hsl(0 100% 50%) calc(l + 20) calc(a - 20) calc(b - 40) / calc(alpha - 0.1))

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

正式语法

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

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

示例

调整亮度

以下示例显示了改变 lab() 函数的亮度值的效果。

HTML

html

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

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

CSS

body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
div {
  height: 50px;
  flex: 0 0 28%;
  border: 1px solid black;
}

css

[data-color="red-dark"] {
  background-color: lab(5 125 71);
}
[data-color="red"] {
  background-color: lab(40 125 71);
}
[data-color="red-light"] {
  background-color: lab(95 125 71);
}

[data-color="green-dark"] {
  background-color: lab(10% -120 125);
}
[data-color="green"] {
  background-color: lab(50% -120 125);
}
[data-color="green-light"] {
  background-color: lab(90% -120 125);
}

[data-color="blue-dark"] {
  background-color: lab(10 -120 -120);
}
[data-color="blue"] {
  background-color: lab(50 -120 -120);
}
[data-color="blue-light"] {
  background-color: lab(90 -120 -120);
}

结果

调整颜色轴

此示例演示了将 lab() 函数的 a 和 b 值设置为 a 轴的端点和中点（从绿色 (-125) 到红色 (125)）以及 b 轴（从黄色 (-125) 到蓝色 (125)）的效果。

HTML

html

<div data-color="redyellow"></div>
<div data-color="redzero"></div>
<div data-color="redblue"></div>

<div data-color="zeroyellow"></div>
<div data-color="zerozero"></div>
<div data-color="zeroblue"></div>

<div data-color="greenyellow"></div>
<div data-color="greenzero"></div>
<div data-color="greenblue"></div>

CSS

使用 CSS background-color 属性，我们沿 a 轴和 b 轴改变 lab() 颜色函数的 a 和 b 值，展示了每种情况下最大值、中点值和最小值的效果。

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
div {
  height: 50px;
  flex: 0 0 28%;
  border: 1px solid black;
}

css

/* a-axis max, variable b-axis */
[data-color="redyellow"] {
  background-color: lab(50 125 125);
}
[data-color="redzero"] {
  background-color: lab(50 125 0);
}
[data-color="redblue"] {
  background-color: lab(50 125 -125);
}

/* a-axis center, variable b-axis */
[data-color="zeroyellow"] {
  background-color: lab(50 0 125);
}
[data-color="zerozero"] {
  background-color: lab(50 0 0);
}
[data-color="zeroblue"] {
  background-color: lab(50 0 -125);
}

/* a-axis min, variable b-axis */
[data-color="greenyellow"] {
  background-color: lab(50 -125 125);
}
[data-color="greenzero"] {
  background-color: lab(50 -125 0);
}
[data-color="greenblue"] {
  background-color: lab(50 -125 -125);
}

结果

左列位于 b 轴的黄色端 (-125)，右列位于蓝色端 (125)。顶行显示 a 轴红色端 (-125) 的颜色，底行位于绿色端 (125)。中间列和行位于每个轴的中点 (0)，中间单元格为灰色；它不包含红色、绿色、黄色或蓝色，两个轴的 0 值。

沿 a 轴和 b 轴的线性渐变

此示例包含线性渐变，以演示 lab() 函数沿 a 轴（从红色到绿色）和沿 b 轴（从黄色到蓝色）的值的变化。在每个渐变图像中，一个轴保持静态，而另一个轴从轴值的低端到高端变化。

<div data-color="redtogreen-yellow">
  <span>red</span><span>`b`= -125 (yellow)</span><span>green</span>
</div>
<div data-color="redtogreen-zero">
  <span>red</span><span>no yellow or blue</span><span>green</span>
</div>
<div data-color="redtogreen-blue">
  <span>red</span><span>`b`= 125 (blue)</span><span>green</span>
</div>

<div data-color="yellowtoblue-red">
  <span>yellow</span><span>`a` = -125 (red)</span><span>blue</span>
</div>
<div data-color="yellowtoblue-zero">
  <span>yellow</span><span>no red or green</span><span>blue</span>
</div>
<div data-color="yellowtoblue-green">
  <span>yellow</span><span>`a` = 125 (green)</span><span>blue</span>
</div>

CSS

div {
  height: 50px;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
span {
  background-color: #ffffffcc;
  padding: 3px;
}

css

/* a-axis gradients */
[data-color="redtogreen-yellow"] {
  background-image: linear-gradient(to right, lab(50 125 125), lab(50 -125 125));
}
[data-color="redtogreen-zero"] {
  background-image: linear-gradient(to right, lab(50 125 0), lab(50 -125 0));
}
[data-color="redtogreen-blue"] {
  background-image: linear-gradient(to right, lab(50 125 -125), lab(50 -125 -125));
}

/* b-axis gradients */
[data-color="yellowtoblue-red"] {
  background-image: linear-gradient(to right, lab(50 125 125), lab(50 125 -125));
}
[data-color="yellowtoblue-zero"] {
  background-image: linear-gradient(to right, lab(50 0 125), lab(50 0 -125));
}
[data-color="yellowtoblue-green"] {
  background-image: linear-gradient(to right, lab(50 -125 125),lab(50 -125 -125));
}

结果

调整不透明度

以下示例显示了改变 lab() 函数表示法的 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: lightblue;
  width: 150px;
  height: 40px;
}

css

[data-color="red"] {
  background-color: lab(80 125 125);
}
[data-color="red-alpha"] {
  background-color: lab(80 125 125 / 0.4);
}

结果

将相对颜色与 lab() 一起使用

此示例使用不同的背景颜色对三个 <div> 元素进行样式设置。中间元素使用未修改的 --base-color，而左右元素使用该 --base-color 的亮化和暗化变体。

这些变体使用相对颜色定义 - --base-color 自定义属性被传递到 lab() 函数中，输出颜色使用 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;
  /* equivalent of lab(75 24 79) */
}

#one {
  background-color: lab(from var(--base-color) calc(l + 15) a b);
}

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

#three {
  background-color: lab(from var(--base-color) calc(l - 15) a b);
}

结果

输出如下

规范

规范
CSS 颜色模块 Level 5 # relative-Lab
CSS 颜色模块 Level 4 # lab-colors

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

<color> 数据类型
<color-function> 数据类型
Using relative colors
CSS 颜色模块
CSS 中的 LCH 颜色：是什么、为什么以及如何？ by Lea Verou (2020)
Safari 技术预览版 122 发行说明：包含 lab() 和 lch() 颜色