Oklab color space

The Oklab color space is a uniform color space for device independent color designed to improve perceptual uniformity, hue and lightness prediction, color blending, and usability while ensuring numerical stability and ease of implementation. Introduced by Björn Ottosson in 2020, Oklab and its cylindrical counterpart, Oklch, have been included in the CSS Color Level 4 draft for device-independent web colors. They are supported by recent versions of major web browsers, allowing the specification of wide-gamut P3 colors.

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 CIELAB, and simplifies the creation of color schemes and smoother color gradients.

Oklab uses the same spatial structure as the CIELAB color space, expressing color by three values:

• L for perceptual lightness, ranging from 0.0 (black) to 1.0 (white), often expressed as a percentage
• a and b for opponent channels of the four unique hues, unbounded but in practice ranging from -0.5 to +0.5
  • a for green (negative) to red (positive)
  • b for blue (negative) to yellow (positive)

Like CIELCh, Oklch represents colors using:

• L for perceptual lightness
• C for chroma representing chromatic intensity, unbounded and not negative but in practice not exceeding 0.5
• h for hue angle in a color wheel, typically denoted in decimal degrees

Color differences

The perceptual color difference in Oklab is calculated as the Euclidean distance between the (L, a, b) coordinates.

Conversion from CIE XYZ

Converting from CIE XYZ with a Standard Illuminant D65 involves:

1. Converting to an LMS color space with a linear map:
   ${\begin{bmatrix}l\\m\\s\end{bmatrix}}=M_{1}\times {\begin{bmatrix}X\\Y\\Z\end{bmatrix}}$
2. Applying a cube-root non-linearity:
   ${\begin{bmatrix}l'\\m'\\s'\end{bmatrix}}={\begin{bmatrix}l^{1/3}\\m^{1/3}\\s^{1/3}\end{bmatrix}}$
3. Converting to Oklab with another linear map:
   ${\begin{bmatrix}L\\a\\b\end{bmatrix}}=M_{2}\times {\begin{bmatrix}l'\\m'\\s'\end{bmatrix}}$

Given:

${\begin{aligned}M_{1}&={\begin{bmatrix}0.8189330101&0.3618667424&-0.1288597137\\0.0329845436&0.9293118715&0.0361456387\\0.0482003018&0.2643662691&0.6338517070\end{bmatrix}}\\M_{2}&={\begin{bmatrix}0.2104542553&0.7936177850&-0.0040720468\\1.9779984951&-2.4285922050&0.4505937099\\0.0259040371&0.7827717662&-0.8086757660\end{bmatrix}}\end{aligned}}$

Conversion from sRGB

See also: SRGB § From sRGB to CIE XYZ

Converting from sRGB 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 the multiplied matrix representing the composition of the two linear maps:

${\begin{bmatrix}l\\m\\s\end{bmatrix}}={\begin{bmatrix}0.4122214708&0.5363325363&0.0514459929\\0.2119034982&0.6806995451&0.1073969566\\0.0883024619&0.2817188376&0.6299787005\end{bmatrix}}{\begin{bmatrix}R_{\text{linear}}\\G_{\text{linear}}\\B_{\text{linear}}\end{bmatrix}}$

Conversion to CIE XYZ and sRGB

Converting to CIE XYZ and sRGB simply involves applying the respective inverse functions in reverse order:

${\begin{aligned}{\begin{bmatrix}l'\\m'\\s'\end{bmatrix}}&=M_{2}^{-}1\times {\begin{bmatrix}L\\a\\b\end{bmatrix}}\\{\begin{bmatrix}l\\m\\s\end{bmatrix}}&={\begin{bmatrix}\left(l'\right)^{3}\\\left(m'\right)^{3}\\\left(s'\right)^{3}\end{bmatrix}}\\{\begin{bmatrix}X\\Y\\Z\end{bmatrix}}&=M_{1}^{-}1\times {\begin{bmatrix}l'\\m'\\s'\end{bmatrix}}\end{aligned}}$

Conversion to and from Oklch

Like CIELch, the Cartesian coordinates a and b are converted to the polar coordinates C and h° as follows:

${\begin{aligned}C&={\sqrt {a^{2}+b^{2}}}\\h^{\circ }&=\operatorname {atan2} (b,a)\end{aligned}}$

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

${\begin{aligned}a&=C\cos(h^{\circ })\\b&=C\sin(h^{\circ })\end{aligned}}$