Oklab color space

<h2 id="coordinates">Coordinates</h2>

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

<ul><li>L for perceptual lightness, ranging from 0 (pure black) to 1 (reference white, if achromatic), often denoted as a <a href="/facts/Percentage/Wugt2XEf">percentage</a></li>
<li>a and b for opponent channels of the four <a href="/facts/Unique_hues/fhnTSulg">unique hues</a>, unbounded but in practice ranging from −0.5 to +0.5; <a href="/facts/CSS/tA90XBQo">CSS</a> assigns ±100% to ±0.4 for both<a class="footnote-ref" id="fnref:11" href="#fn:11">11</a>
<ul><li>a for green (negative) to red (positive)</li>
<li>b for blue (negative) to yellow (positive)</li></ul></li></ul>
Like <a href="/facts/CIELAB_color_space/jxx4j975">CIELCh</a>, Oklch represents colors using:

<ul><li>L for perceptual lightness</li>
<li>C for <a href="/facts/Colorfulness/WaePy7Ga">chroma</a> 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%<a class="footnote-ref" id="fnref:12" href="#fn:12">12</a></li>
<li>h for hue angle in a <a href="/facts/Color_wheel/RxVBIr7g">color wheel</a>, typically denoted in <a href="/facts/Decimal_degrees/kNoEsSDG">decimal degrees</a></li></ul>
<h3>Achromatic colors</h3>
Neutral <a href="/facts/Grey/wGvycLY0">greys</a>, 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 <a href="/facts/Undefined_(mathematics)/Bc1Q3px4">undefined</a>. Assigning any real value to their hue component has no effect on conversions between color spaces.<a class="footnote-ref" id="fnref:13" href="#fn:13">13</a>

<h3>Color differences</h3>
The perceptual <a href="/facts/Color_difference/WhQyyzQ9">color difference</a> in Oklab is calculated as the <a href="/facts/Euclidean_distance/9qDoQKQe">Euclidean distance</a> between the (L, a, b) coordinates.<a class="footnote-ref" id="fnref:14" href="#fn:14">14</a><a class="footnote-ref" id="fnref:15" href="#fn:15">15</a>

<h2 id="conversions-between-color-spaces">Conversions between color spaces</h2>
<h3>Conversion to and from Oklch</h3>
Like CIELCh, the <a href="/facts/Cartesian_coordinate_system/lkTqvMmB">Cartesian coordinates</a> a and b are converted to the <a href="/facts/Polar_coordinate_system/HBko4YoN">polar coordinates</a> 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}}}

<h3>Conversion from CIE XYZ</h3>
Converting from CIE XYZ with a <a href="/facts/Illuminant_D65/5bzuVsKc">Standard Illuminant D65</a> involves:<a class="footnote-ref" id="fnref:16" href="#fn:16">16</a>

<ol><li>Applying the <a href="/facts/Linear_map/Q1PBKNVV">linear map</a>:<a class="footnote-ref" id="fnref:17" href="#fn:17">17</a>
 
 
 
 
 
 [
 
 
 
 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}}}
 
</li>
<li>Applying a <a href="/facts/Cube_root/c8klHLFb">cube root</a> <a href="/facts/Non-linearity/4aYItALC">non-linearity</a>:
 
 
 
 
 
 [
 
 
 
 
 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}}}
 
</li>
<li>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}}}
 
</li></ol>
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}}}

<h3>Conversion from sRGB</h3>
See also: <a href="/facts/SRGB/Hsfl1GuK">SRGB § From sRGB to CIE XYZ</a>
Converting from <a href="/facts/SRGB/Hsfl1GuK">sRGB</a> 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 <a href="/facts/Matrix_multiplication/lYDB6Ro2">multiplied matrix</a> representing the <a href="/facts/Function_composition/r5Pvnmth">composition</a> of the two linear maps:<a class="footnote-ref" id="fnref:18" href="#fn:18">18</a>

[
            
              
                
                  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}}}

<h3>Conversion to CIE XYZ and sRGB</h3>
Converting to CIE XYZ and sRGB simply involves applying the respective <a href="/facts/Inverse_function/Tg5nnXlu">inverse functions</a> in reverse order:<a class="footnote-ref" id="fnref:19" href="#fn:19">19</a>

 
 
 
 
 
 
 
 
 
 [
 
 
 
 
 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}}}

<h2 id="notes">Notes</h2>

<h2 id="references">References</h2>

<ol>
<li id="fn: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] <a href="/wiki/Blend_modes" target="_blank">/wiki/Blend_modes</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></li>
<li id="fn:2">Ottosson, Björn (23 Dec 2020). "A perceptual color space for image processing". GitHub Pages. Retrieved 24 July 2024. <a href="https://bottosson.github.io/posts/oklab/" target="_blank">https://bottosson.github.io/posts/oklab/</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></li>
<li id="fn:3">CSS Color Module Level 4 (Candidate recommendation draft). W3C. Retrieved 24 July 2024. <a href="https://www.w3.org/TR/css-color-4/" target="_blank">https://www.w3.org/TR/css-color-4/</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></li>
<li id="fn:4">CSS Color Module Level 5 (Working draft). W3C. Retrieved 25 July 2024. <a href="https://www.w3.org/TR/css-color-5/" target="_blank">https://www.w3.org/TR/css-color-5/</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></li>
<li id="fn:5">"Oklab color model". Can I Use. Retrieved 24 July 2024. <a href="https://caniuse.com/mdn-css_types_color_oklab" target="_blank">https://caniuse.com/mdn-css_types_color_oklab</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></li>
<li id="fn:6">Sitnik, Andrey; Turner, Travis (25 January 2023). "OKLCH in CSS: why we moved from RGB and HSL". Evil Martians. Retrieved 24 July 2024. <a href="https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl" target="_blank">https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></li>
<li id="fn:7">Ottosson, Björn (23 Dec 2020). "A perceptual color space for image processing". GitHub Pages. Retrieved 24 July 2024. <a href="https://bottosson.github.io/posts/oklab/" target="_blank">https://bottosson.github.io/posts/oklab/</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></li>
<li id="fn:8">Sitnik, Andrey; Turner, Travis (25 January 2023). "OKLCH in CSS: why we moved from RGB and HSL". Evil Martians. Retrieved 24 July 2024. <a href="https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl" target="_blank">https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl</a> <a href="#fnref:8" class="footnote-back-ref">↩</a></li>
<li id="fn:9">Levien, Raph (18 January 2021). "An interactive review of Oklab". GitHub Pages. Retrieved 24 July 2024. <a href="https://raphlinus.github.io/color/2021/01/18/oklab-critique.html" target="_blank">https://raphlinus.github.io/color/2021/01/18/oklab-critique.html</a> <a href="#fnref:9" class="footnote-back-ref">↩</a></li>
<li id="fn:10">Ottosson, Björn (23 Dec 2020). "A perceptual color space for image processing". GitHub Pages. Retrieved 24 July 2024. <a href="https://bottosson.github.io/posts/oklab/" target="_blank">https://bottosson.github.io/posts/oklab/</a> <a href="#fnref:10" class="footnote-back-ref">↩</a></li>
<li id="fn:11">CSS Color Module Level 4 (Candidate recommendation draft). W3C. Retrieved 24 July 2024. <a href="https://www.w3.org/TR/css-color-4/" target="_blank">https://www.w3.org/TR/css-color-4/</a> <a href="#fnref:11" class="footnote-back-ref">↩</a></li>
<li id="fn:12">CSS Color Module Level 4 (Candidate recommendation draft). W3C. Retrieved 24 July 2024. <a href="https://www.w3.org/TR/css-color-4/" target="_blank">https://www.w3.org/TR/css-color-4/</a> <a href="#fnref:12" class="footnote-back-ref">↩</a></li>
<li id="fn:13">CSS Color Module Level 4 (Candidate recommendation draft). W3C. Retrieved 24 July 2024. <a href="https://www.w3.org/TR/css-color-4/" target="_blank">https://www.w3.org/TR/css-color-4/</a> <a href="#fnref:13" class="footnote-back-ref">↩</a></li>
<li id="fn:14">Lilley, Chris (July 2021). "Better than Lab? Gamut reduction CIE Lab & OKLab". W3C. Retrieved 24 July 2024. <a href="https://www.w3.org/Graphics/Color/Workshop/slides/talk/lilley" target="_blank">https://www.w3.org/Graphics/Color/Workshop/slides/talk/lilley</a> <a href="#fnref:14" class="footnote-back-ref">↩</a></li>
<li id="fn:15">CSS Color Module Level 4 (Candidate recommendation draft). W3C. Retrieved 24 July 2024. <a href="https://www.w3.org/TR/css-color-4/" target="_blank">https://www.w3.org/TR/css-color-4/</a> <a href="#fnref:15" class="footnote-back-ref">↩</a></li>
<li id="fn:16">Ottosson, Björn (23 Dec 2020). "A perceptual color space for image processing". GitHub Pages. Retrieved 24 July 2024. <a href="https://bottosson.github.io/posts/oklab/" target="_blank">https://bottosson.github.io/posts/oklab/</a> <a href="#fnref:16" class="footnote-back-ref">↩</a></li>
<li id="fn: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. <a href="/wiki/LMS_color_space" target="_blank">/wiki/LMS_color_space</a> <a href="#fnref:17" class="footnote-back-ref">↩</a></li>
<li id="fn:18">Ottosson, Björn (23 Dec 2020). "A perceptual color space for image processing". GitHub Pages. Retrieved 24 July 2024. <a href="https://bottosson.github.io/posts/oklab/" target="_blank">https://bottosson.github.io/posts/oklab/</a> <a href="#fnref:18" class="footnote-back-ref">↩</a></li>
<li id="fn:19">Ottosson, Björn (23 Dec 2020). "A perceptual color space for image processing". GitHub Pages. Retrieved 24 July 2024. <a href="https://bottosson.github.io/posts/oklab/" target="_blank">https://bottosson.github.io/posts/oklab/</a> <a href="#fnref:19" class="footnote-back-ref">↩</a></li>
</ol>

Oklab color space open-in-new

Oklab color space