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>
between0%
representing black and100%
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>
between0
and1
, or a<percentage>
, where the number1
corresponds to100%
(full opacity), representing the transparency (or alpha channel) of the color.
Formal syntax
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
- A perceptual color space for image processing
oklch()
use the same color space asoklab()
but a polar coordinate system.