OKLCH

OKLCH is a new way to define [[css]] [[colour]]. Similar to HSL, it's a bit more human readable than HEX/RGB, and is compromised of three parts:

• Lightness: 0% - 100%
• Chroma: 0 - infinity
  • The upper bound is dictated by the colour gamut. P3 and sRGB has an upper limit of 0.37, Rec2020 is larger.
  • Each hue has a different maximum chroma.
• Hue: 0deg - 360deg

The tl;dr of OKLCH is it's based on human perception.

Note that Chroma is not a percentage, due to how monitors display colours. Also note that the Hue values don't match HSL Hues, and have been shifted up by around ~30deg, depending on the colour.

Unlike HSL, OKLCH is based more in the human perception of colour, or 'preceptual lightness'. Where previously two colours with the same HSL lightness could appear to be different brightness, OKLCH aims to balance this. As you change the Hue, the perceived saturation of the colour should should remain the same. This allows OKLCH to be used for colour modification.

The downside with colour modification is that not all number combinations in OKLCH generate visible colours. When this happens, the browser will render the closest support colour, depending on supported colour gamuts. This is called 'gamut mapping' or 'gamut correction'. Every hue has a different maximum chroma. For some lightness values, there is only a blue color with a large chroma. For other lightness values, a green color will not have a corresponding pair in a blue or a red with the same chroma.

Note that OKLCH supports multiple colour gamuts, including sRGB, P3, and Rec2020. Most older colours systems only work in sRGB.

There are 2 ways of gamut mapping:

• Convert the color to RGB (or P3) and clip values above 100% or below 0%: rgb(150% -20% 30%) → rgb(100% 0 30%). This is the fastest method, but it has the worst results—it could change a color’s hue and this change will be visible to users.
• Convert the color to OKLCH and reduce the chroma and lightness. This keeps the origin hue but is a little slower to render.

Tools like stylelint-gamut can automatically add @media queries to render more accurate p3 colours, to force a browser to use the OKLCH method rather than clipping.

For example when we convert from HSL to OKLCH, we receive different lightness values between the two colours. hsl(217deg 55% 50%) -> oklch(55% 0.15 260) hsl(110deg 55% 50%) -> oklch(73% 0.2 141)

https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl https://keithjgrant.com/posts/2023/04/its-time-to-learn-oklch-color/

[[20260316115201-colour-spaces]]

[[css]] [[colour]] [[design]]