OKLCH
A perceptually uniform color space that makes lightness and chroma behave predictably.
OKLCH is a color space expressing a color 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 colors 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 colors outside sRGB, with well-defined behavior 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 colors 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
Design Token
Named design decisions — color, spacing, radius, type — stored as data so they can be shared and re-themed.
Design & Interface17 connections
Color Contrast
The measured luminance difference between foreground and background, and the accessibility floor it must clear.
Design & Interface14 connections
Dark Mode
Serving an alternate palette for low-light preference, and the three states that implies.
Design & Interface13 connections
Shader
A small program run on the graphics processor for every vertex or every pixel.
Graphics & Rendering14 connections
Related6
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from10
- 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 — color, spacing, radius, type — stored as data so they can be shared and re-themed.
- DispersionMatter & Energy
Refractive index varies with wavelength, so a medium bends colors by different amounts.
- Opponent Process TheoryDesign & Interface
Color is recoded after the cones into red-green, blue-yellow and light-dark opponent channels.
- Physically Based RenderingGraphics & Rendering
A shading approach that derives surface appearance from measured, energy-conserving material parameters instead of hand-tuned highlights.
- Scoped StylingDesign & Interface
Confining a set of style decisions to a subtree so the same component can look different in different contexts.
- ShaderGraphics & Rendering
A small program run on the graphics processor for every vertex or every pixel.