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

css
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).

Note: See Missing color components for the effect of none.

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.

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

Result

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

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(0.628 0.225 0.126);
}
[data-color="red-alpha"] {
  background-color: oklab(0.628 0.225 0.126 / 0.4);
}

Result

Specifications

Specification
CSS Color Module Level 4
# ok-lab

Browser compatibility

BCD tables only load in the browser

See also