The OKLCH color wheel is one horizontal slice through a three-dimensional color space. The slice fixes lightness, places hue around the angle, and uses chroma as the distance from the neutral center.

Anatomy of the wheel

Visual positionOKLCH coordinateInterpretation
Angle around centerHHue family; 0° and 360° meet.
Distance from centerCChroma; the center approaches neutral gray.
Separate wheel sliceLPerceptual lightness; changing it changes the available boundary.

Useful hue landmarks

Hue names are approximate and shift with lightness, chroma and adaptation. The angles below are navigation landmarks, not standardized semantic labels.

Why displayable color is not a perfect circle

sRGB and Display P3 are device color gamuts with irregular boundaries when represented in OKLCH. At the same lightness and chroma, one hue may fit while another does not. At very high or low lightness, the available chroma usually narrows.

A wheel that paints every radius without a gamut warning may be displaying clipped or mapped values. That is why the live wheel uses the selected target gamut and the swatch details show both original intent and mapped delivery.

What perceptual uniformity does and does not mean

Equal angular steps create consistent geometric relationships, and equal lightness values are easier to compare than HSL lightness values. But human vision is not perfectly uniform, displays vary, and color appearance depends on surroundings. Visual review is still part of the workflow.

Three decisions to make before export

  1. Which lightness slice represents the role you are designing?
  2. How much chroma survives across all chosen hue angles in the target gamut?
  3. Which color pairs will carry text, icons or state information and therefore need contrast checks?

Move the live wheel.
Choose a harmony, then tune L, C and the target gamut.

Open OKLCH wheel

Sources and further reading

Technical claims are grounded in specifications and primary documentation. Product observations are dated snapshots from direct use.