:Oklab color space

{{short description|Standard color space with color-opponent values}}

{{Infobox technology standard

| title = Oklab and Oklch

| image = Colour gradient comparison of HSV and okLCH.png

| caption = Irregular perceptual lightness in a gradient generated with constant value in HSV space, with light yellows and dark blues, compared to one generated with constant lightness in Oklch.

| status = Recommendation draft

| first_published = {{Start date|2020|12|23|df=y}}

| version =

| version_date = {{Start date|2024|2|13|df=y}}

| preview =

| preview_date = {{Start date|2024|2|29|df=y}}

| organization = W3C

| committee = CSS Working Group

| series = CSS Color

| predecessor = CIELAB color space

| successor =

| domain = Color model

| license = Public domain

| website = {{URL|www.w3.org/TR/css-color-4/|www.w3.org}}

}}

The Oklab color space is a uniform color space for device independent color designed to improve perceptual uniformity, hue and lightness prediction, color blending,{{efn|However, it is not suitable for image blending or processing, for which the gamma-expanded linear RGB color space is more appropriate.{{cite web |last1=Novak |first1=John |title=What every coder should know about gamma |url=https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/ |access-date=26 July 2024 |date=21 September 2016}}}} and usability while ensuring numerical stability and ease of implementation.{{cite web |last1=Ottosson |first1=Björn |title=A perceptual color space for image processing |url=https://bottosson.github.io/posts/oklab/ |website=GitHub Pages |access-date=24 July 2024 |date=23 Dec 2020}} 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.{{cite tech report |title=CSS Color Module Level 4 |url=https://www.w3.org/TR/css-color-4/ |institution=W3C |type=Candidate recommendation draft |access-date=24 July 2024}}{{cite tech report |title=CSS Color Module Level 5 |url=https://www.w3.org/TR/css-color-5/ |institution=W3C |type=Working draft |access-date=25 July 2024}} They are supported by recent versions of major web browsers{{cite web |title=Oklab color model |url=https://caniuse.com/mdn-css_types_color_oklab |website=Can I Use |access-date=24 July 2024}} and allow the specification of wide-gamut P3 colors.{{cite web |last1=Sitnik |first1=Andrey |last2=Turner |first2=Travis |title=OKLCH in CSS: why we moved from RGB and HSL |url=https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl |website=Evil Martians |access-date=24 July 2024 |date=25 January 2023}}

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.{{cite web |last1=Levien |first1=Raph |title=An interactive review of Oklab |url=https://raphlinus.github.io/color/2021/01/18/oklab-critique.html |publisher=GitHub Pages |access-date=24 July 2024 |date=18 January 2021}}

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.

Coordinates

File:Oklch colourwheel (L=0.7, C=0.2).png

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, C = 0, a = 0, b = 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 {{nowrap|(L, a, b)}} coordinates.{{cite web |last=Lilley |first=Chris |title=Better than Lab? Gamut reduction CIE Lab & OKLab |url=https://www.w3.org/Graphics/Color/Workshop/slides/talk/lilley |publisher=W3C |access-date=24 July 2024 |date=July 2021}}

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:

\begin{align}

C &= \sqrt{a^2 + b^2} \\

h &= \operatorname{atan2}(b, a)

\end{align}

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

\begin{align}

a &= C \cos(h) \\

b &= C \sin(h)

\end{align}

=Conversion from CIE XYZ=

Converting from CIE XYZ with a Standard Illuminant D65 involves:

  1. Applying the linear map:{{efn|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.}}
    \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}

Given:

\begin{align}

\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{align}

=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{align}

\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{align}

Notes

{{notelist}}

References