Kelly Mears

OKLCH

A perceptually uniform color space that makes lightness and chroma behave predictably.

Design & Interface2 min read204 words12 out · 12 in
also calledPerceptual colorLCH

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 also11

Dark Mode

Serving an alternate palette for low-light preference, and the three states that implies.

Design & Interface19 connections

Scoped Styling

Confining a set of style decisions to a subtree so the same component can look different in different contexts.

Design & Interface11 connections

Motion Design

Using movement to communicate change, continuity, and hierarchy rather than to decorate.

Design & Interface23 connections

CSS Custom Property

A user-defined CSS property that participates in the cascade and inherits down the tree.

Design & Interface12 connections

Utility-First CSS

Composing styles from many small single-purpose classes rather than authoring semantic rules.

Design & Interface15 connections

Cascade

The algorithm deciding which declaration wins when several apply to the same element.

Design & Interface12 connections

Design Token

Named design decisions — color, spacing, radius, type — stored as data so they can be shared and re-themed.

Design & Interface21 connections

Shader

A small program run on the graphics processor for every vertex or every pixel.

Graphics & Rendering22 connections

Silent Failure

A failure that produces no signal, so the absence of an error reads as success.

Method73 connections

HSL and HSV

Two rearrangements of the RGB color cube into hue, saturation, and lightness or value, made in the 1970s so people could pick colors intuitively, which are convenient for color pickers but don't match how bright colors actually look.

Graphics & Rendering6 connections

Heat Map

A grid that encodes values as color, used for correlation tables, gene expression, calendars of activity, and website click maps, whose usefulness depends on the color scale and the order of rows and columns.

Design & Interface3 connections

Linked from12