此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
lab()
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年5月.
* Some parts of this feature may have varying levels of support.
函数记号lab() 在 CIE L*a*b* 颜色空间中表示指定颜色。Lab 表示人可见的全部颜色的范围。
语法
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为介于0和100之间的<number>或介于0%和100%之间的<percentage>，指定了 CIE 明度，此处数值0对应0%（黑），数值100对应100%（白）。a为介于-125和125之间的<number>或介于-100%和100%之间的<percentage>，指定了在 Lab 颜色空间中沿a轴的距离，即颜色绿或红的程度。b为介于-125和125之间的<number>或介于-100%和100%之间的<percentage>，指定了在 Lab 颜色空间中沿b轴的距离，即颜色蓝或黄的程度。A（alpha）可为介于0和1之间的<number>或<percentage>，此处数值1对应100%（完全不透明）。
备注：在 CSS 中，通常当百分比值有等价数值时，100% 等于数值1。此处注意100% 对于L 值等于数值100，对于a 值和b 值等于125。
形式语法
<lab()> =
lab([from<color>]?[<percentage>|<number>|none][<percentage>|<number>|none][<percentage>|<number>|none][ /[<alpha-value>|none]]?)
<alpha-value> =
<number>|
<percentage>
示例
用 lab() 调整明度和颜色轴
下列示例展示了改变lab() 函数的明度、a 轴和 b 轴值的效果。
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
div { width: 50px; height: 50px; padding: 5px; margin: 5px; display: inline-block; border: 1px solid black;}[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）值的效果。为演示不透明度的效果，red 和red-alpha 元素与#background-div 元素重叠。0.4 的A 值使颜色有 40% 的不透明度。
HTML
<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;}[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 |
浏览器兼容性
参见
<color>数据类型所列的所有颜色记号- CSS 中的 LCH 颜色——是什么，为什么，怎么用？
- Safari 技术预览 122 发布记录：含
lab()和lch()颜色