css types color oklab()

The oklab() functional notation expresses a given color in the Oklab color space, which attempts to mimic how color is perceived by the human eye. The oklab() works with a Cartesian coordinate system on the Oklab color space, the a- and b-axes. If you want a polar color system, chroma and hue, use oklch().

Oklab is a perceptual color space and is useful to:

• Transform an image to grayscale, without changing its lightness.
• Modify the saturation of colors, while keeping user perception of hue and lightness
• Create smooth and uniform gradients of colors (when interpolated manually, for example, in a <canvas> element).

The function oklab() can represent any color from the Oklab color space that is wider than RGB and include wide gamut and P3 colors.

Syntax

oklab(40.1% 0.1143 0.045);
oklab(59.69% 0.1007 0.1191);
oklab(59.69% 0.1007 0.1191 / 0.5);

Values

Functional notation: oklab(L a b[ / A])

L

A <number>() between 0 and 1, a <percentage>() between 0% and 100%, or the keyword none, where the number 0 corresponds to 0% (black) and the number 1 corresponds to 100% (white). L specifies the perceived lightness.

a

A <number>() between -0.4 and 0.4, a <percentage>() between -100% and 100%, or the keyword none. It specifies the distance along the a axis in the Oklab colorspace, that is, how green or red the color is.

b

A <number>() between -0.4 and 0.4, a <percentage>() between -100% and 100%, or the keyword none. It specifies the distance along the b axis in the Oklab colorspace, that is, how blue or yellow the color is.

A Optional

An <alpha-value>() or the keyword none, where the number 1 corresponds to 100% (full opacity).

Examples

Adjusting the lightness and axes with oklab()

The following example shows the effect of varying the lightness, a-axis, and b-axis values of the oklab() function.

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

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

[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);
}

Adjusting opacity with oklab()

The following example shows the effect of varying the A (alpha) value of the oklab() function. The red and red-alpha elements overlap the #background-div element to demonstrate the effect of opacity. Giving the red-alpha element an opacity of 0.4 makes it appear more transparent than the red element.

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: lightblue;
  width: 150px;
  height: 40px;
}

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

See also

• The <color> data type for a list of all color notations
• oklch(): Another functional notation using the same color space as oklab() but in a polar coordinate system
• A perceptual color space for image processing