Oklab and Oklch

Irregular perceptual lightness in a gradient generated with constantvalue inHSV space, with light yellows and dark blues, compared to one generated with constant lightness in Oklch.
Status	Recommendation draft
First published	23 December 2020 (2020-12-23)[1]
Latest version	13 February 2024 (2024-2-13)[2]
Preview version	29 February 2024 (2024-2-29)[3]
Organization	W3C
Committee	CSS Working Group
Series	CSS Color
Predecessor	CIELAB color space
Domain	Color model
License	Public domain
Website	www.w3.org

TheOklab color space is auniform color space fordevice independent color designed to improveperceptual uniformity,hue andlightness prediction,color blending,^[a] andusability while ensuringnumerical stability andease of implementation.^[1] Introduced by Björn Ottosson in December 2020, Oklab and itscylindrical counterpart,Oklch, have been included in theCSS Color Level 4 and Level 5 drafts for device-independentweb colors since December 2021.^[2][3] They are supported by recent versions of majorweb browsers^[6] and allow the specification ofwide-gamutP3 colors.^[7]

Oklab's model is fitted with improved color appearance data: CAM16 data for lightness and chroma, and IPT data for hue. The new fit addresses issues such as unexpected hue and lightness changes in blue colors present in theCIELAB color space, simplifying the creation ofcolor schemes and smoothercolor gradients.^[1][7][4]

As Ottosson explained,^[1] he chose the nameOklab because the model does an OK (adequate) job and is based on the three color-space coordinatesL,a, andb.

Oklab uses the same spatial structure as CIELAB, representing color using three components:

• L for perceptual lightness, ranging from 0 (pure black) to 1 (reference white, if achromatic), often denoted as apercentage
• a andb for opponent channels of the fourunique hues, unbounded but in practice ranging from −0.5 to +0.5;CSS assigns ±100% to ±0.4 for both^[2]
  • a for green (negative) to red (positive)
  • b for blue (negative) to yellow (positive)

LikeCIELCh, Oklch represents colors using:

• L for perceptual lightness
• C forchroma representing chromatic intensity, with values from 0 (achromatic) with no upper limit, but in practice not exceeding +0.5; CSS treats +0.4 as 100%^[2]
• h for hue angle in acolor wheel, typically denoted indecimal degrees

Neutralgreys, pure black and the reference white are achromatic, that is,${\displaystyle C=0}$,${\displaystyle a=0}$,${\displaystyle b=0}$, andh isundefined. Assigning any real value to their hue component has no effect on conversions between color spaces.^[2]

The perceptualcolor difference in Oklab is calculated as theEuclidean distance between the(L,a,b) coordinates.^[8][2]

Like CIELCh, theCartesian coordinatesa andb are converted to thepolar coordinatesC andh as follows:

And the polar coordinates are converted to the Cartesian coordinates as follows:

Converting from CIE XYZ with aStandard Illuminant D65 involves:^[1]

1. Applying thelinear map:^[b]
   ${\displaystyle \left[\begin{array}{c}l\\ m\\ s\end{array}\right]={\mathbf{M}}_1\left[\begin{array}{c}X\\ Y\\ Z\end{array}\right]}$
2. Applying acube rootnon-linearity:
   ${\displaystyle \left[\begin{array}{c}{l}^{\prime }\\ m^{\prime }\\ s^{\prime }\end{array}\right]=\left[\begin{array}{c}{l}^{1/3}\\ m^{1/3}\\ s^{1/3}\end{array}\right]}$
3. Converting to Oklab with another linear map:
   ${\displaystyle \left[\begin{array}{c}L\\ a\\ b\end{array}\right]={\mathbf{M}}_2\left[\begin{array}{c}{l}^{\prime }\\ m^{\prime }\\ s^{\prime }\end{array}\right]}$

Given:

Converting fromsRGB requires first converting from sRGB to CIE XYZ with a Standard Illuminant D65. As the last step of this conversion is a linear map from linear RGB to CIE XYZ, the reference implementation directly employs themultiplied matrix representing thecomposition of the two linear maps:^[1]

Converting to CIE XYZ and sRGB simply involves applying the respectiveinverse functions in reverse order:^[1]

• Color space
• Color appearance models
• 2020 introductions

• Articles with short description
• Short description is different from Wikidata