Andrew's Digital Garden

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: vividness of coour, from 0.0 to 0.37
  • 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. Where previously two colours with the same HSL lightness could appear to be different brightness, OKLCH aims to balance this.

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)

Additionally, OKLCH works in the newer colour gamuts than most older colour systems which work in the sRGB gamut. OKLCH currently supports P3, and can also support even newer gamuts like Rec2020.

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

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

Referred in

OKLCH