OKLCH
A perceptually uniform colour space that makes lightness and chroma behave predictably.
OKLCH is a colour space expressing a colour as lightness, chroma, and hue, built on the Oklab model. Its defining property is perceptual uniformity: equal numeric steps correspond to roughly equal perceived differences, which is emphatically not true of the older sRGB or HSL representations.
That property is what makes it useful for design systems. In HSL, holding lightness constant while changing hue produces colours that look wildly different in brightness — yellow at fifty percent lightness is far brighter than blue at fifty percent. Building a palette in HSL therefore requires hand-correcting every hue. In OKLCH, a lightness ramp reads as a lightness ramp across the whole hue circle, so a systematic palette can be generated rather than tuned.
It also handles wide-gamut displays. OKLCH can express colours outside sRGB, with well-defined behaviour when clamping into a narrower gamut, which matters as displays outgrow the old standard.
The practical caution is that perceptual uniformity is not the same as contrast compliance. Two colours with equal OKLCH lightness may still fail an accessibility contrast ratio, because that ratio is computed from relative luminance under a different formula. Use OKLCH to build the ramp and a contrast check to validate the pairs; see Color Contrast.
See also4
Hand-picked in the note itself — the neighbours worth reading next.
Design Token
Named design decisions — colour, spacing, radius, type — stored as data so they can be shared and re-themed.
Design & Interface14 connections
Color Contrast
The measured luminance difference between foreground and background, and the accessibility floor it must clear.
Design & Interface9 connections
Dark Mode
Serving an alternate palette for low-light preference, and the three states that implies.
Design & Interface10 connections
Shader
A small program run on the graphics processor for every vertex or every pixel.
Graphics & Games12 connections
Related6
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from7
Notes elsewhere in the wiki that reach for this one.
- CascadeDesign & Interface
The algorithm deciding which declaration wins when several apply to the same element.
- Color ContrastDesign & Interface
The measured luminance difference between foreground and background, and the accessibility floor it must clear.
- CSS Custom PropertyDesign & Interface
A user-defined CSS property that participates in the cascade and inherits down the tree.
- Dark ModeDesign & Interface
Serving an alternate palette for low-light preference, and the three states that implies.
- Design TokenDesign & Interface
Named design decisions — colour, spacing, radius, type — stored as data so they can be shared and re-themed.
- Scoped StylingDesign & Interface
Confining a set of style decisions to a subtree so the same component can look different in different contexts.
- ShaderGraphics & Games
A small program run on the graphics processor for every vertex or every pixel.