Chroma

Chroma is the colour-attribute axis that captures “how much colour is in the colour” independent of brightness. A pure red and a pure pink can have similar hues and lightnesses but very different chromas — pink is closer to grey, red is further from grey.

Chroma is sometimes confused with saturation. The distinction:

• Chroma is the absolute distance from the achromatic (grey) axis at a given lightness, measured in the chosen colour space (OKLab, CIELAB, etc.).
• Saturation is the ratio of chroma to lightness — a relative measure.

This matters in design because OKLCH (the modern CSS colour function) uses chroma, not saturation. oklch(0.72 0.18 47) means lightness 0.72, chroma 0.18, hue 47°. Adjusting the chroma alone keeps the lightness and hue stable; with saturation, adjusting one value changes the perceived brightness too.

Maximum achievable chroma varies with hue and lightness. In sRGB, yellow at medium lightness can support more chroma than blue at the same lightness — yellow primaries are closer to the sRGB gamut boundary. OKLCH values that exceed the sRGB gamut clip to the boundary, sometimes shifting the rendered colour unexpectedly. For perceptually-consistent design across a wide hue range, pick a chroma value (e.g., 0.12-0.15) that’s achievable at every hue you need.