oklch()

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.

函数记号 oklch() 在 Oklch 颜色空间中表示指定颜色。此函数记号与 oklab() 有相同的 L 轴,但使用极坐标 C(色度)和 H(色相)。

语法

css
oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)

取值

  • 函数记号:oklch(L C H [/ A])

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

    • C<number><percentage>,此处 0% 对应 0100% 对应数值 0.4。此值衡量了色度(大概表示“颜色的量”),其有用的最小值为 0,最大值无理论上限(但实际不超过 0.5)。

    • H<number><angle>,指定了沿正半 a 轴(紫红方向)的色相角。90deg 指向正半 b 轴(芥末黄方向),180deg 指向负半 a 轴(蓝绿方向),270deg 指向负半 b 轴(天蓝方向)。

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

形式语法

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

<hue> =
<number> |
<angle>

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

示例

调整颜色的明度、色度和色相

下列示例展示了改变颜色函数 oklch()L(明度)、C(色度)和 H(色相)值的效果。

HTML

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

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

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

CSS

css
[data-color="blue"] {
  background-color: oklch(60% 0.4 240);
}
[data-color="blue-light"] {
  background-color: oklch(90% 0.4 240);
}

[data-color="red"] {
  background-color: oklch(100% 0.4 30);
}
[data-color="red-chroma"] {
  background-color: oklch(100% 0.3 40);
}

[data-color="green"] {
  background-color: oklch(60% 0.57 161);
}
[data-color="green-hue"] {
  background-color: oklch(60% 0.57 181);
}

结果

调整颜色的 alpha 值

下列示例展示了改变颜色函数 oklch()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: oklch(50% 130 20);
}
[data-color="red-alpha"] {
  background-color: oklch(50% 130 20 / 0.4);
}

结果

规范

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

浏览器兼容性

BCD tables only load in the browser

参见