oklch()

Baseline 2023

Newly available

Since May 2023, 此功能在最新的设备和浏览器版本中都能正常使用。此功能可能无法在较旧的设备或浏览器中使用。

**oklch()** 函数表示法用 Oklab 颜色空间表达给定颜色。oklch() 是 oklab() 的圆柱形式，使用相同的 L 轴，但使用极坐标色度 (C) 和色调 (h) 坐标。

语法

css

/* Absolute values */
oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)

/* Relative values */
oklch(from green l c h / 0.5)
oklch(from #0000FF calc(l + 0.1) c h)
oklch(from hsl(180 100% 50%) calc(l - 0.1) c h)
oklch(from var(--aColor) l c h / calc(alpha - 0.1))

Values

以下是绝对颜色和相对颜色允许值的描述。

注意： 通常，当百分比值在 CSS 中具有数字等效值时，100% 等于数字 1。oklch() 并非如此。在此，100% 等于 L 值的数字 100，以及 C 值的 0.4。

绝对值语法

oklch(L C H[ / A])

参数如下

L: 一个介于 0 和 1 之间的 <number>，一个介于 0% 和 100% 之间的 <percentage>，或关键字 none（在本例中相当于 0%）。在本例中，数字 0 对应于 0%（黑色），数字 1 对应于 100%（白色）。此值指定颜色的感知亮度或“亮度”。

注意： oklch() 中的 L 是感知亮度，指的是我们用眼睛视觉感知的“亮度”。这与 hsl() 中的 L 不同，后者表示亮度与其他颜色的比较。
C: 一个 <number>，一个 <percentage>，或关键字 none（在本例中相当于 0%）。此值是颜色色度的一种度量（大致表示“颜色量”。其最小有用值为 0，而最大值理论上是无界的（但实际上不会超过 0.5）。在本例中，0% 是 0，100% 是数字 0.4。
H: 一个 <number>，一个 <angle>，或关键字 none（在本例中相当于 0deg），表示颜色的 <hue> 角。

注意：与特定色调相对应的角度在 sRGB（由 hsl() 和 hwb() 使用）、CIELAB（由 lch() 使用）和 Oklab（由 oklch() 使用）颜色空间中有所不同。请参阅下面的 oklch() 中的色调示例以及 <hue> 参考页面以获取更多详细信息和示例。
A 可选: 一个 <alpha-value>，表示颜色的 alpha 通道值，其中数字 0 对应于 0%（完全透明），1 对应于 100%（完全不透明）。此外，关键字 none 可用于明确指定没有 alpha 通道。如果未显式指定 A 通道值，则默认为 100%。如果包含，则该值之前应加上斜杠（/）。

注意：有关 none 影响的更多信息，请参阅缺少的颜色组件。

相对值语法

oklch(from <color> L C H[ / A])

参数如下

from <color>: 定义相对颜色时，始终包含关键字 from，后面跟着一个 <color> 值，表示原始颜色：这是相对颜色所基于的原始颜色。原始颜色可以是任何有效的 <color> 语法，包括另一个相对颜色。
L: 一个介于 0 和 1 之间的 <number>，一个介于 0% 和 100% 之间的 <percentage>，或关键字 none（在本例中等效于 0%）。它表示输出颜色的亮度值。这里数字 0 对应于 0%（黑色），数字 1 对应于 100%（白色）。
C: 一个 <number>，一个 <percentage>，或关键字 none（在本例中等效于 0%）。此值表示输出颜色的色度值（大致表示“颜色量”。它的最小有用值是 0，而其最大值理论上是无界的（但在实践中不会超过 0.5）。在本例中，0% 是 0，100% 是数字 0.4。
H: 一个 <number>，一个 <angle>，或关键字 none（在本例中等效于 0deg），表示输出颜色的 <hue> 角。请参阅不同色调的示例，它位于下面的示例部分。
A 可选: 一个 <alpha-value>，表示输出颜色的 alpha 通道值，其中数字 0 对应于 0%（完全透明），1 对应于 100%（完全不透明）。此外，关键字 none 可用于明确指定没有 alpha 通道。如果未显式指定 A 通道值，则默认为原始颜色的 alpha 通道值。如果包含，则该值之前应加上斜杠（/）。

定义相对颜色输出通道组件

在 oklch() 函数内使用相对颜色语法时，浏览器会将原始颜色转换为等效的 Oklch 颜色（如果它不是已经指定为这样的）。该颜色被定义为三个不同的颜色通道值 - l（亮度）、c（色度）和 h（色调） - 以及一个 alpha 通道值（alpha）。这些通道值在函数内可用，用于定义输出颜色通道值

l 通道值解析为介于 0 和 1（含）之间的 <number>。
c 通道值解析为介于 0 和 0.4（含）之间的 <number>。
h 通道值解析为介于 0 和 360（含）之间的 <number>。
alpha 通道解析为介于 0 和 1（含）之间的 <number>。

定义相对颜色时，输出颜色的不同通道可以用几种不同的方式表达。下面，我们将研究一些示例来说明这些。

在下面的前两个示例中，我们使用的是相对颜色语法。但是，第一个示例输出的颜色与原始颜色相同，第二个示例输出的颜色根本不基于原始颜色。它们并没有真正创建相对颜色！您不太可能在实际代码库中使用这些，并且可能会改用绝对颜色值。我们包含这些示例作为学习相对 oklch() 语法的起点。

让我们从原始颜色 hsl(0 100% 50%)（等效于 red）开始。下面的函数输出的颜色与原始颜色相同 - 它使用原始颜色的 l、c 和 h 通道值（0.627966、0.257704 和 29.2346）作为输出通道值

css

oklch(from hsl(0 100% 50%) l c h)

此函数的输出颜色是 oklch(0.627966 0.257704 29.2346)。

下一个函数为输出颜色的通道值使用绝对值，输出一个与原始颜色无关的完全不同的颜色

css

oklch(from hsl(0 100% 50%) 42.1% 0.25 328.363)

在上述情况下，输出颜色是 oklch(0.421 0.25 328.363)。

下面的函数根据原始颜色创建相对颜色

css

oklch(from hsl(0 100% 50%) 0.8 0.4 h)

此示例

将 hsl() 原始颜色转换为等效的 oklch() 颜色 - oklch(0.627966 0.257704 29.2346)。
将输出颜色的 H 通道值设置为原始 oklch() 等效值的 H 通道值 - 29.2346。
将输出颜色的 L 和 C 通道值设置为不基于原始颜色的新值：分别为 0.8 和 0.4。

最终的输出颜色是 oklch(0.8 0.4 29.2346)。

注意：如上所述，如果输出颜色使用与原始颜色不同的颜色模型，则原始颜色会在后台转换为与输出颜色相同的模型，以便它可以用兼容的方式表示（即使用相同的通道）。

在本节中，我们迄今为止看到的示例中，既没有为原始颜色也没有为输出颜色显式指定 alpha 通道。当未指定输出颜色 alpha 通道时，它默认为与原始颜色 alpha 通道相同的值。当原始颜色 alpha 通道未指定（并且它不是相对颜色）时，它默认为 1。因此，以上示例的原始和输出 alpha 通道值都为 1。

让我们来看一些指定原始和输出 alpha 通道值的示例。第一个示例将输出 alpha 通道值指定为与原始 alpha 通道值相同，而第二个示例指定了一个不同的输出 alpha 通道值，与原始 alpha 通道值无关。

css

oklch(from hsl(0 100% 50% / 0.8) l c h / alpha)
/* Computed output color: oklch(0.627966 0.257704 29.2346 / 0.8) */

oklch(from hsl(0 100% 50% / 0.8) l c h / 0.5)
/* Computed output color: oklch(0.627966 0.257704 29.2346 / 0.5) */

在下面的示例中，hsl() 原始颜色再次转换为 oklch() 等效值 - oklch(0.627966 0.257704 29.2346)。对 L、C、H 和 A 值应用 calc() 计算，导致输出颜色为 oklch(0.827966 0.357704 9.23462 / 0.9)

css

oklch(from hsl(0 100% 50%) calc(l + 0.2) calc(c + 0.1) calc(h - 20) / calc(alpha - 0.1))

注意：由于原始颜色通道值解析为 <number> 值，因此在使用它们进行计算时，您必须向它们添加数字，即使在通道通常接受 <percentage>、<angle> 或其他值类型的某些情况下也是如此。例如，将 <percentage> 添加到 <number> 并不起作用。

正式语法

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

<hue> = 
  <number>  |
  <angle>   

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

示例

调整颜色的亮度

此示例显示了更改 oklch() 函数符号的 L（亮度）值的影响。

HTML

html

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

<div data-color="red-dark"></div>
<div data-color="red"></div>
<div data-color="red-light"></div>

<div data-color="green-dark"></div>
<div data-color="green"></div>
<div data-color="green-light"></div>

CSS

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
div {
  height: 50px;
  border: 1px solid black;
}

css

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

[data-color="red-dark"] {
  background-color: oklch(10% 0.4 20);
}
[data-color="red"] {
  background-color: oklch(50% 0.4 20);
}
[data-color="red-light"] {
  background-color: oklch(90% 0.4 20);
}

[data-color="green-dark"] {
  background-color: oklch(10% 0.4 130);
}
[data-color="green"] {
  background-color: oklch(50% 0.4 130);
}
[data-color="green-light"] {
  background-color: oklch(90% 0.4 130);
}

结果

通过色度调整颜色强度

以下示例显示了更改 oklch() 函数符号的 C（色度）值的影响，随着 C 值从完全饱和度降低到几乎灰色，颜色强度逐渐降低。

HTML

html

<div data-color="blue"></div>
<div data-color="blue-chroma1"></div>
<div data-color="blue-chroma2"></div>
<div data-color="blue-chroma3"></div>

<div data-color="red"></div>
<div data-color="red-chroma1"></div>
<div data-color="red-chroma2"></div>
<div data-color="red-chroma3"></div>

<div data-color="green"></div>
<div data-color="green-chroma1"></div>
<div data-color="green-chroma2"></div>
<div data-color="green-chroma3"></div>

CSS

对于初始颜色蓝色、红色和绿色，我们为它们声明了逐渐减小的色度值：从 0.4（等效于 100%）的高值开始，一直降低到 0.01（等效于 2%），对于所有颜色来说，这几乎是灰色。

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}
div {
  height: 50px;
  border: 1px solid black;
}

css

[data-color="blue"] {
  background-color: oklch(50% 0.4 240);
}
[data-color="blue-chroma1"] {
  background-color: oklch(50% 0.2 240);
}
[data-color="blue-chroma2"] {
  background-color: oklch(50% 0.1 240);
}
[data-color="blue-chroma3"] {
  background-color: oklch(50% 0.01 240);
}

[data-color="red"] {
  background-color: oklch(50% 100% 20deg);
}
[data-color="red-chroma1"] {
  background-color: oklch(50% 50% 20deg);
}
[data-color="red-chroma2"] {
  background-color: oklch(50% 25% 20deg);
}
[data-color="red-chroma3"] {
  background-color: oklch(50% 2% 20deg);
}

[data-color="green"] {
  background-color: oklch(50% 0.4 130);
}
[data-color="green-chroma1"] {
  background-color: oklch(50% 0.2 130);
}
[data-color="green-chroma2"] {
  background-color: oklch(50% 0.1 130);
}
[data-color="green-chroma3"] {
  background-color: oklch(50% 0.01 130);
}

结果

如果我们使用 0 而不是 0.01 和 2%，并且亮度值相同，那么所有颜色都会变成相同的灰色阴影。在本例中，它们几乎是灰色。

`oklch` 中的色调

以下示例显示了具有不同 oklch() 函数符号的 H（色调）值的色板。

HTML

html

<div data-color="0">0deg</div>
<div data-color="20">20deg</div>
<div data-color="40">40deg</div>
<div data-color="60">60deg</div>

等等。

<div data-color="80">80deg</div>
<div data-color="100">100deg</div>
<div data-color="120">120deg</div>
<div data-color="140">140deg</div>
<div data-color="160">160deg</div>
<div data-color="180">180deg</div>
<div data-color="200">200deg</div>
<div data-color="220">220deg</div>
<div data-color="240">240deg</div>
<div data-color="260">260deg</div>
<div data-color="280">280deg</div>
<div data-color="300">300deg</div>
<div data-color="320">320deg</div>
<div data-color="340">340deg</div>
<div data-color="360">360deg</div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
div {
  flex: 0 0 4em;
  text-align: center;
  line-height: 4em;
  display: inline-block;
  border: 1px solid black;
  color: white;
  font-family: monospace;
}

css

[data-color="0"] {
  background-color: oklch(50% 0.4 0deg);
}
[data-color="20"] {
  background-color: oklch(50% 0.4 20deg);
}
[data-color="40"] {
  background-color: oklch(50% 0.4 40deg);
}
[data-color="60"] {
  background-color: oklch(50% 0.4 60deg);
}

等等。

[data-color="80"] {
  background-color: oklch(50% 0.4 80deg);
}
[data-color="100"] {
  background-color: oklch(50% 0.4 100deg);
}
[data-color="120"] {
  background-color: oklch(50% 0.4 120deg);
}
[data-color="140"] {
  background-color: oklch(50% 0.4 140deg);
}
[data-color="160"] {
  background-color: oklch(50% 0.4 160deg);
}
[data-color="180"] {
  background-color: oklch(50% 0.4 180deg);
}
[data-color="200"] {
  background-color: oklch(50% 0.4 200deg);
}
[data-color="220"] {
  background-color: oklch(50% 0.4 220deg);
}
[data-color="240"] {
  background-color: oklch(50% 0.4 240deg);
}
[data-color="260"] {
  background-color: oklch(50% 0.4 260deg);
}
[data-color="280"] {
  background-color: oklch(50% 0.4 280deg);
}
[data-color="300"] {
  background-color: oklch(50% 0.4 300deg);
}
[data-color="320"] {
  background-color: oklch(50% 0.4 320deg);
}
[data-color="340"] {
  background-color: oklch(50% 0.4 340deg);
}
[data-color="360"] {
  background-color: oklch(50% 0.4 360deg);
}

结果

oklch() 中的色调角度与 hsl() 中的色调角度不同。有关更多信息，请参阅 <hue>。在 hsl() 中，sRGB 颜色 0deg 代表红色。但是，在 CIELab 颜色空间中，0deg 对应于洋红色，而红色大约为 41deg。

调整颜色的 alpha 值

以下示例显示了更改 oklch() 颜色函数的 A（alpha）值的影响。red 和 red-alpha 元素与 #background-div 元素重叠，以演示不透明度的影响。将 A 的值设置为 0.4 使颜色不透明度为 40%。

HTML

html

<div id="background-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: oklch(100% 0.57 217);
  width: 150px;
  height: 40px;
}

css

[data-color="red"] {
  background-color: oklch(50% 0.5 20);
}
[data-color="red-alpha"] {
  background-color: oklch(50% 0.5 20 / 0.4);
}

结果

使用 `oklch()` 的相对颜色

此示例使用不同的背景颜色来设置三个 <div> 元素的样式。中间一个使用未修改的 --base-color，而左右两个使用该 --base-color 的亮度和暗度变体。

这些变体使用相对颜色定义 - --base-color 自定义属性传递到 oklch() 函数中，并且输出颜色的亮度通道通过 calc() 函数修改以达到所需的效果。亮度颜色在亮度通道中添加了 0.15（15%），而暗度颜色在亮度通道中减去了 0.15（15%）。

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

css

:root {
  --base-color: orange;
}

#one {
  background-color: oklch(from var(--base-color) calc(l + 0.15) c h);
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: oklch(from var(--base-color) calc(l - 0.15) c h);
}

结果

输出如下所示

规范

规范
CSS 颜色模块级别 5 # relative-Oklch
CSS 颜色模块级别 4 # ok-lab

浏览器兼容性

BCD 表格仅在浏览器中加载