oklab()

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.

函数记号 oklab() 在 Oklab 颜色空间中表示指定颜色,此颜色空间尽力模仿人眼感知颜色的方式。oklab() 在 Oklab 颜色空间中使用直角坐标系,有 a 轴和 b 轴。若想要极坐标颜色系统——色度和色相,请使用 oklch()

Oklab 为感知颜色空间,可用于:

  • 在不改变图像明度的前提下,将图像转换为灰度图。
  • 在保持用户所感知的色相和明度的前提下,修改颜色的饱和度。
  • 创建平滑均匀的颜色渐变(例如在 <canvas> 元素中手动插值)。

oklab() 函数可表示 Oklab 颜色空间中的任意颜色。此颜色空间比 RGB 更宽广,包含宽色域颜色和 P3 颜色。

语法

css
/* oklab(明度 a 轴 b 轴) */
oklab(40.1% 0.1143 0.045);
oklab(59.69% 0.1007 0.1191);

/* oklab(明度 a 轴 b 轴 / alpha) */
oklab(59.69% 0.1007 0.1191 / 0.5);

备注: oklab() 函数像其他某些颜色函数一样支持以逗号分隔其值,且可选的 alpha 值在指定时需置于正斜杠(/)之后。

取值

  • 函数记号:oklab(L a b [/ A])
    • L 为介于 01 之间的 <number> 或介于 0%100% 之间的 <percentage>,此处数值 0 对应 0%(黑),数值 1 对应 100%(白)。L 指定了感知明度。
    • a 为介于 -0.40.4 之间的 <number> 或介于 -100%100% 之间的 <percentage>。此值指定了在 Oklab 空间中沿 a 轴的距离,即颜色绿或红的程度。
    • b 为介于 -0.40.4 之间的 <number> 或介于 -100%100% 之间的 <percentage>。此值指定了在 Oklab 空间中沿 b 轴的距离,即颜色蓝或黄的程度。
    • A(alpha)为介于 01 之间的 <number><percentage>,此处数值 1 对应 100%(完全不透明)。A 表示颜色的透明度(即 alpha 通道)。

形式语法

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

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

示例

用 oklab() 调整明度和轴

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

HTML

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

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

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

CSS

css
[data-color="blue"] {
  background-color: oklab(0.5 -0.3 -0.4);
}
[data-color="blue-light"] {
  background-color: oklab(0.7 -0.3 -0.4);
}

[data-color="red"] {
  background-color: oklab(100% 0.4 0.4);
}
[data-color="red-a"] {
  background-color: oklab(100% 0.2 0.4);
}

[data-color="green"] {
  background-color: oklab(100% -100% 0.4);
}
[data-color="green-b"] {
  background-color: oklab(100% -100% 0.6);
}

结果

用 oklab() 调整不透明度

下列示例展示了改变 oklab() 函数的 A(alpha)值的效果。为演示不透明度的效果,redred-alpha 元素与 #background-div 元素重叠。给予 red-alpha 元素 0.4 的不透明度使其显得比 red 元素更透明。

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: oklab(50% 130 20);
}
[data-color="red-alpha"] {
  background-color: oklab(50% 130 20 / 0.4);
}

结果

规范

Specification
CSS Color Module Level 5
# relative-Oklab
CSS Color Module Level 4
# ok-lab

浏览器兼容性

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
oklab() (Oklab color model)
Mix <percentage> and <number> in parameters
Relative Oklab colors

Legend

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

Full support
Full support
No support
No support

参见