Menu
Home Explore People Places Arts History Plants & Animals Science Life & Culture Technology
On this page
Oklab color space
Standard color space with color-opponent values

The Oklab color space is a device independent color model designed for improved perceptual uniformity, hue, and lightness prediction, as well as enhanced color blending and usability. Introduced by Björn Ottosson in 2020, Oklab and its cylindrical variant, Oklch, are included in the CSS Color Level 4 and 5 drafts and supported by recent web browsers. The model improves on issues found in the CIELAB color space, particularly for blue hues, simplifying the creation of color schemes and smoother gradients. Ottosson named it "Oklab" to reflect its OK performance and the three coordinates L, a, and b.

Related Image Collections Add Image
Profiles
1 Image
We don't have any YouTube videos related to Oklab color space yet.
We don't have any PDF documents related to Oklab color space yet.
We don't have any Books related to Oklab color space yet.
We don't have any archived web articles related to Oklab color space yet.

Coordinates

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 both11
    • 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%12
  • 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, C = 0 {\displaystyle C=0} , a = 0 {\displaystyle a=0} , b = 0 {\displaystyle b=0} , and h is undefined. Assigning any real value to their hue component has no effect on conversions between color spaces.13

Color differences

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

Conversions 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:

C = a 2 + b 2 h = atan2 ⁡ ( b , a ) {\displaystyle {\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:

a = C cos ⁡ ( h ) b = C sin ⁡ ( h ) {\displaystyle {\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:16

  1. Applying the linear map:17 [ l m s ] = M 1 [ X Y Z ] {\displaystyle {\begin{bmatrix}l\\m\\s\end{bmatrix}}=\mathbf {M} _{1}{\begin{bmatrix}X\\Y\\Z\end{bmatrix}}}
  2. Applying a cube root non-linearity: [ l ′ m ′ s ′ ] = [ l 1 / 3 m 1 / 3 s 1 / 3 ] {\displaystyle {\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: [ L a b ] = M 2 [ l ′ m ′ s ′ ] {\displaystyle {\begin{bmatrix}L\\a\\b\end{bmatrix}}=\mathbf {M} _{2}{\begin{bmatrix}l'\\m'\\s'\end{bmatrix}}}

Given:

M 1 = [ 0.8189330101 − 0.3618667424 − 0.1288597137 0.0329845436 − 0.9293118715 − 0.0361456387 0.0482003018 − 0.2643662691 − 0.6338517070 ] M 2 = [ 0.2104542553 − 0.7936177850 − 0.0040720468 1.9779984951 − 2.4285922050 − 0.4505937099 0.0259040371 − 0.7827717662 − 0.8086757660 ] {\displaystyle {\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

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:18

[ l m s ] = [ 0.4122214708 0.5363325363 0.0514459929 0.2119034982 0.6806995451 0.1073969566 0.0883024619 0.2817188376 0.6299787005 ] [ R linear G linear B linear ] {\displaystyle {\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:19

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

Notes

References

  1. However, it is not suitable for image blending or processing, for which the gamma-expanded linear RGB color space is more appropriate.[4][5] /wiki/Blend_modes ↩

  2. Ottosson, Björn (23 Dec 2020). "A perceptual color space for image processing". GitHub Pages. Retrieved 24 July 2024. https://bottosson.github.io/posts/oklab/ ↩

  3. CSS Color Module Level 4 (Candidate recommendation draft). W3C. Retrieved 24 July 2024. https://www.w3.org/TR/css-color-4/ ↩

  4. CSS Color Module Level 5 (Working draft). W3C. Retrieved 25 July 2024. https://www.w3.org/TR/css-color-5/ ↩

  5. "Oklab color model". Can I Use. Retrieved 24 July 2024. https://caniuse.com/mdn-css_types_color_oklab ↩

  6. Sitnik, Andrey; Turner, Travis (25 January 2023). "OKLCH in CSS: why we moved from RGB and HSL". Evil Martians. Retrieved 24 July 2024. https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl ↩

  7. Ottosson, Björn (23 Dec 2020). "A perceptual color space for image processing". GitHub Pages. Retrieved 24 July 2024. https://bottosson.github.io/posts/oklab/ ↩

  8. Sitnik, Andrey; Turner, Travis (25 January 2023). "OKLCH in CSS: why we moved from RGB and HSL". Evil Martians. Retrieved 24 July 2024. https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl ↩

  9. Levien, Raph (18 January 2021). "An interactive review of Oklab". GitHub Pages. Retrieved 24 July 2024. https://raphlinus.github.io/color/2021/01/18/oklab-critique.html ↩

  10. Ottosson, Björn (23 Dec 2020). "A perceptual color space for image processing". GitHub Pages. Retrieved 24 July 2024. https://bottosson.github.io/posts/oklab/ ↩

  11. CSS Color Module Level 4 (Candidate recommendation draft). W3C. Retrieved 24 July 2024. https://www.w3.org/TR/css-color-4/ ↩

  12. CSS Color Module Level 4 (Candidate recommendation draft). W3C. Retrieved 24 July 2024. https://www.w3.org/TR/css-color-4/ ↩

  13. CSS Color Module Level 4 (Candidate recommendation draft). W3C. Retrieved 24 July 2024. https://www.w3.org/TR/css-color-4/ ↩

  14. Lilley, Chris (July 2021). "Better than Lab? Gamut reduction CIE Lab & OKLab". W3C. Retrieved 24 July 2024. https://www.w3.org/Graphics/Color/Workshop/slides/talk/lilley ↩

  15. CSS Color Module Level 4 (Candidate recommendation draft). W3C. Retrieved 24 July 2024. https://www.w3.org/TR/css-color-4/ ↩

  16. Ottosson, Björn (23 Dec 2020). "A perceptual color space for image processing". GitHub Pages. Retrieved 24 July 2024. https://bottosson.github.io/posts/oklab/ ↩

  17. The (l,m,s) space used here is not the same as the LMS color space, but rather an arbitrary space that was found numerically to best fit the color appearance data. /wiki/LMS_color_space ↩

  18. Ottosson, Björn (23 Dec 2020). "A perceptual color space for image processing". GitHub Pages. Retrieved 24 July 2024. https://bottosson.github.io/posts/oklab/ ↩

  19. Ottosson, Björn (23 Dec 2020). "A perceptual color space for image processing". GitHub Pages. Retrieved 24 July 2024. https://bottosson.github.io/posts/oklab/ ↩