OKLCH color space

OKLCH is the canonical perceptual color space for design-token work: L (lightness 0–1), C (chroma 0–~0.4), H (hue 0–360°). Equal numeric deltas in any channel produce equal perceived deltas, unlike HSL. Chroma is independent of lightness, so two stops of a palette can share saturation without sharing brightness.

When to use

• Picking color values for any token system that will be exported as DTCG, CSS variables, Tailwind, etc.
• Constructing or auditing a palette around a starting hue.
• Generating a foreground color that must pair against a known background at a specific APCA Lc target.
• Reviewing color-picking decisions in code review — flag pick-and-test patterns and propose inverse composition.

When NOT to use

• Single one-off color picks that aren't entering a token catalog (a marketing landing-page splash, a one-time illustration). The convention overhead isn't earned.
• Color spaces (gradients, interpolation) where the design choice is the interpolation curve, not a fixed value — see the host platform's documentation for color() interpolation.

Primitive ranges and naming

Every OKLCH primitive that lands in a catalog uses the hue-angle naming convention: <name>-<angle> (e.g. red-30, teal-180, purple-280). The name is mnemonic; the angle is load-bearing — adding a new hue does not renumber existing ones. Reserve generic accent labels (accent-teal, primary) for the theme layer above primitives, not the primitives themselves.