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.

函数记号 lab() 在 CIE L*a*b* 颜色空间中表示指定颜色。Lab 表示人可见的全部颜色的范围。

语法

css
lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);
lab(52.2345% 40.1645 59.9971 / .5);

取值

  • 函数记号:lab(L a b [/ A])

    • L 为介于 0100 之间的 <number> 或介于 0%100% 之间的 <percentage>,指定了 CIE 明度,此处数值 0 对应 0%(黑),数值 100 对应 100%(白)。

    • a 为介于 -125125 之间的 <number> 或介于 -100%100% 之间的 <percentage>,指定了在 Lab 颜色空间中沿 a 轴的距离,即颜色绿或红的程度。

    • b 为介于 -125125 之间的 <number> 或介于 -100%100% 之间的 <percentage>,指定了在 Lab 颜色空间中沿 b 轴的距离,即颜色蓝或黄的程度。

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

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

形式语法

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

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

示例

用 lab() 调整明度和颜色轴

下列示例展示了改变 lab() 函数的明度、a 轴和 b 轴值的效果。

HTML

html
<div data-color="red"></div>
<div data-color="red-a"></div>

<div data-color="green"></div>
<div data-color="green-b"></div>

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

CSS

css
[data-color="red"] {
  background-color: lab(100 125 125);
}
[data-color="red-a"] {
  background-color: lab(100 110 125);
}

[data-color="green"] {
  background-color: lab(75% -120 125);
}
[data-color="green-b"] {
  background-color: lab(75% -120 10);
}

[data-color="blue"] {
  background-color: lab(0 -120 -120);
}
[data-color="blue-light"] {
  background-color: lab(70 -120 -120);
}

结果

用 lab() 调整不透明度

下列示例展示了改变函数记号 lab()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: lab(100 125 125);
}
[data-color="red-alpha"] {
  background-color: lab(100 125 125 / 0.4);
}

结果

规范

Specification
CSS Color Module Level 5
# relative-Lab
CSS Color Module Level 4
# lab-colors

浏览器兼容性

BCD tables only load in the browser

参见