lab()

Baseline 2023

新推出

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

lab() 函数式表示法用于在 CIE L*a*b* 色彩空间中表示指定颜色。

Lab 通过指定颜色的亮度、红/绿轴值、蓝/黄轴值以及可选的 alpha 透明度值，来表示人类可以看到的整个颜色范围。

语法

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 #123456 calc(l + 10) a b)
lab(from hsl(180 100% 50%) calc(l - 10) a b)

值

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

绝对值语法

lab(L a b[ / A])

参数如下：

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 通道值，则默认为 100%。如果包含该值，则其前面需要有一个斜杠（/）。

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

相对值语法

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

参数如下：

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)。calc() 计算被应用于 L、a、b 和 A 值，最终得到输出颜色 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( [ from <color> ]? [ <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="red-yellow"></div>
<div data-color="red-zero"></div>
<div data-color="red-blue"></div>

<div data-color="zero-yellow"></div>
<div data-color="zero-zero"></div>
<div data-color="zero-blue"></div>

<div data-color="green-yellow"></div>
<div data-color="green-zero"></div>
<div data-color="green-blue"></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="red-yellow"] {
  background-color: lab(50 125 125);
}
[data-color="red-zero"] {
  background-color: lab(50 125 0);
}
[data-color="red-blue"] {
  background-color: lab(50 125 -125);
}

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

/* a-axis min, variable b-axis */
[data-color="green-yellow"] {
  background-color: lab(50 -125 125);
}
[data-color="green-zero"] {
  background-color: lab(50 -125 0);
}
[data-color="green-blue"] {
  background-color: lab(50 -125 -125);
}

结果

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

沿 a 轴和 b 轴的线性渐变

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

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

<div data-color="yellow-to-blue-red">
  <span>yellow</span><span>`a` = -125 (red)</span><span>blue</span>
</div>
<div data-color="yellow-to-blue-zero">
  <span>yellow</span><span>no red or green</span><span>blue</span>
</div>
<div data-color="yellow-to-blue-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="red-to-green-yellow"] {
  background-image: linear-gradient(to right, lab(50 125 125), lab(50 -125 125));
}
[data-color="red-to-green-zero"] {
  background-image: linear-gradient(to right, lab(50 125 0), lab(50 -125 0));
}
[data-color="red-to-green-blue"] {
  background-image: linear-gradient(to right, lab(50 125 -125), lab(50 -125 -125));
}

/* b-axis gradients */
[data-color="yellow-to-blue-red"] {
  background-image: linear-gradient(to right, lab(50 125 125), lab(50 125 -125));
}
[data-color="yellow-to-blue-zero"] {
  background-image: linear-gradient(to right, lab(50 0 125), lab(50 0 -125));
}
[data-color="yellow-to-blue-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 颜色模块第五版 # 相对 Lab
CSS 颜色模块第四版 # lab-colors

浏览器兼容性

另见

<color> 数据类型
<color-function> 数据类型
使用相对颜色
CSS 颜色模块
LCH colors in CSS: what, why, and how?（Lea Verou，2020 年）
Safari Technology Preview 122 release notes：包含 lab() 和 lch() 颜色

帮助改进 MDN

了解如何贡献

此页面的最后修改时间是 ⁨2025 年 9 月 21 日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题