oklab()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

lightness

A <percentage> between 0% representing black and 100% representing white, specifying the perceived lightness.

a-axis

The distance along the a axis in the Oklab colorspace, that is how green/red the color is.

b-axis

the distance along the b axis in the Oklab colorspace, that is how blue/yellow the color is.

alpha

A <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity), representing 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

Green with oklab()

div {
  padding: 1em;
  margin: 1em;
  border: solid 1px black;
}

.ref {
  background-color: green;
}

.oklab {
  background-color: oklab(51.975% -0.1403 0.10768);
}

<div class="ref">RGB</div>
<div class="oklab">OKLAB</div>

Specifications

Specification
CSS Color Module Level 4
# ok-lab

Browser compatibility

BCD tables only load in the browser

See also