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(lightness a-axis b-axis) */
oklab(40.1% 0.1143 0.045);
oklab(59.69% 0.1007 0.1191);

/* oklab(lightness a-axis b-axis / Alpha) */
oklab(59.69% 0.1007 0.1191 / 0.5);

Note: The oklab() function does not support commas to separate its values as some other color functions do, and the optional alpha value needs to be preceded with a forward slash (/) when specified.

Values

Functional notation: oklab(L a b [/ A])
- L is a <number> between 0 and 1 or a <percentage> between 0% and 100%, where the number 0 corresponds to 0% (black) and the number 1 corresponds to 100% (white). L specifies the perceived lightness.
- a is a <number> between -0.4 and 0.4 or a <percentage> between -100% and 100%. It specifies the distance along the a axis in the Oklab colorspace, that is, how green or red the color is.
- b is a <number> between -0.4 and 0.4 or a <percentage> between -100% and 100%. It specifies the distance along the b axis in the Oklab colorspace, that is, how blue or yellow the color is.
- A is a <number> between 0 and 1 or a <percentage>, where the number 1 corresponds to 100% (full opacity). A represents the transparency (or alpha channel) of the color.

Formal syntax

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

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

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.

<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>

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.

<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

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

Specifications

Specification
CSS Color Module Level 4 # ok-lab

Browser compatibility

BCD tables only load in the browser