CSS oklab() Function

The CSS oklab() function defines a color in the Oklab color space, which provides enhanced perceptual uniformity and accurate color blending without hue shifts.

Introduced in CSS Color Module Level 4, oklab() uses a Cartesian coordinate system similar to the lab() function (Lightness, a-axis, b-axis). However, it uses an improved color model created in 2020 by Björn Ottosson that eliminates the notorious "blue shift" bug found in CIELAB, where blue shades inadvertently shift towards purple as saturation increases.

Syntax

The oklab() function accepts three space-separated values representing Lightness, the a-axis (green-to-red), and the b-axis (blue-to-yellow), plus an optional alpha transparency channel:

Parameters

L (Lightness): A number from 0 to 1 (e.g. 0.7) or a percentage from 0% to 100%. 0 represents black, and 1 (or 100%) represents diffuse white.
a (Green-Red axis): A signed number typically between -0.4 and +0.4 (or percentage from -100% to 100%, where 100% corresponds to 0.4). Negative values represent green, while positive values represent red/magenta.
b (Blue-Yellow axis): A signed number typically between -0.4 and +0.4 (or percentage from -100% to 100%, where 100% corresponds to 0.4). Negative values represent blue, while positive values represent yellow.
A (Alpha, optional): Preceded by a forward slash (/), specifying the transparency as a decimal between 0 and 1 (e.g. 0.5) or a percentage between 0% and 100%.

Basic Examples

Here are some basic color examples specified using oklab():

Using `oklab()` in Style Sheets

The CSS specifications state that you can use oklab() wherever a CSS <color> value is accepted. For example, you can use oklab() to set the colors of text, backgrounds, and borders:

Specifying Transparency

An alpha channel can be added after a forward slash (/) to create semi-transparent colors:

How the a and b Axes Work

Like CIELAB, Oklab uses opponent color dimensions that correspond to the way human vision processes color signals:

Axis	Negative Values (−)	Zero (0)	Positive Values (+)
a-axis	Green	Neutral	Red / Magenta
b-axis	Blue	Neutral	Yellow

When both a and b are set to 0, the color has no chroma and is a neutral shade of gray, determined entirely by the L (lightness) value.

`oklab()` vs `lab()`

While both functions share the same Cartesian structure, they have important differences:

Feature	`lab()` (CIELAB)	`oklab()` (Oklab)
Lightness Scale	`0` to `100` (or `0%` to `100%`)	`0` to `1` (or `0%` to `100%`)
a and b Range	Typically `-125` to `+125`	Typically `-0.4` to `+0.4`
Hue Uniformity (Blue Shift)	Suffers from hue curvature; blues shift toward purple when saturation changes.	Mathematically optimized; hue remains constant across varying saturation levels.
Perceived Lightness	Good perceptual uniformity.	Superior perceptual uniformity across all hues.

Related Color Functions

oklch(): The polar/cylindrical counterpart to oklab() (using Lightness, Chroma, and Hue). It uses the exact same Oklab color space, but in a wheel-based format that is much more intuitive for everyday UI styling.
lab(): The older CIELAB rectangular model from 1976.
lch(): The polar counterpart to lab().