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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
lab() (Lab color model)
Mix <percentage> and <number> in parameters
Relative Lab colors

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

参见