Reference articles on history, science, culture and more
Encyclopedia

Oklab color space

Standard color space with color-opponent values

Image credit is listed at the end of this article.

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 December 2020, Oklab and its cylindrical counterpart, Oklch, have been included in the CSS Color Level 4 and Level 5 drafts for device-independent web colors since December 2021. They are supported by recent versions of major web browsers and allow the specification of colors within the DCI-P3 gamut but outside sRGB.

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

As Ottosson explained, he chose the name Oklab because the model does an OK (adequate) job and is based on the three color-space coordinates L, a, and b.

01Coordinates

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 a percentage
  • a and b for opponent channels of the four unique hues, unbounded but in practice ranging from −0.5 to +0.5; CSS assigns ±100% to ±0.4 for both
    • 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, with values from 0 (achromatic) with no upper limit, but in practice not exceeding +0.5; CSS treats +0.4 as 100%
  • h for hue angle in a color wheel, typically denoted in decimal degrees

Achromatic colors

Neutral greys, pure black and the reference white are achromatic, that is, a=0, b=0, C=0, and h is undefined. Assigning any real value to their hue component has no effect on conversions between color spaces.

Color differences

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

Oklch color wheel
Oklch color wheel
Oklab vs. Oklch color spaces. The color bins shown are the ones within the Rec. 2020 gamut (a wide gamut RGB).
Oklab vs. Oklch color spaces. The color bins shown are the ones within the Rec. 2020 gamut (a wide gamut RGB).

02Conversions between color spaces

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&=\operatorname {atan2} (b,a),\end{aligned}} and the polar coordinates are converted to the Cartesian coordinates as follows: {\begin{aligned}a&=C\cos h,\\b&=C\sin h.\end{aligned}}

Conversion from CIE XYZ

Converting from CIE XYZ with a Standard Illuminant D65 involves:

  1. Applying the linear map which converts the XYZ values into a space analogous to the LMS color space:{\begin{bmatrix}l\\m\\s\end{bmatrix}}=\mathbf {M} _{1}{\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}}=\mathbf {M} _{2}{\begin{bmatrix}l'\\m'\\s'\end{bmatrix}}.

The linear-map matrices are {\begin{aligned}\mathbf {M} _{1}&={\begin{bmatrix}0.8189330101&{\phantom {-}}0.3618667424&-0.1288597137\\0.0329845436&{\phantom {-}}0.9293118715&{\phantom {-}}0.0361456387\\0.0482003018&{\phantom {-}}0.2643662691&{\phantom {-}}0.6338517070\end{bmatrix}},\\\mathbf {M} _{2}&={\begin{bmatrix}0.2104542553&{\phantom {-}}0.7936177850&-0.0040720468\\1.9779984951&-2.4285922050&{\phantom {-}}0.4505937099\\0.0259040371&{\phantom {-}}0.7827717662&-0.8086757660\end{bmatrix}}.\end{aligned}}

Conversion from sRGB

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}}&=\mathbf {M} _{2}^{-1}{\begin{bmatrix}L\\a\\b\end{bmatrix}},\\{\begin{bmatrix}l\\m\\s\end{bmatrix}}&={\begin{bmatrix}(l')^{3}\\(m')^{3}\\(s')^{3}\end{bmatrix}},\\{\begin{bmatrix}X\\Y\\Z\end{bmatrix}}&=\mathbf {M} _{1}^{-1}{\begin{bmatrix}l\\m\\s\end{bmatrix}}.\end{aligned}}

Visualization of linear color values mapping to locations in perceptual color spaces
Visualization of linear color values mapping to locations in perceptual color spaces
Watch videos about Oklab color spaceExplainers and documentaries on YouTube (opens in a new tab)

Sources and credits

This article is adapted from the Wikipedia article Oklab color space, written by its contributors and licensed under CC BY-SA 4.0. Fathomly has changed the layout, removed citation markers, navigation and maintenance notices, and adjusted punctuation. This adapted version is shared under the same license. For references, see the original article.

Images, from Wikimedia Commons:

Fathomly is not affiliated with or endorsed by the Wikimedia Foundation. Spotted a problem? Tell us.