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.

Worked example

Build a 9-step grey-to-red palette. In HSL you might start at hsl(0 0% 50%) and end at hsl(0 100% 50%), scaling saturation linearly. The middle steps look fine on red but the same approach for blue (hsl(240 0% 50%) → hsl(240 100% 50%)) produces a midpoint that looks noticeably darker than the red midpoint — HSL lightness is not perceptually uniform. In OKLCH, fixing lightness at 0.65 and scaling chroma from 0 to 0.18 produces nine steps that match in perceived brightness across hues. Concretely: oklch(0.65 0.00 0), oklch(0.65 0.0225 0), …, oklch(0.65 0.18 0) all sit on the same perceived-lightness line. Repeat the same chroma ramp at hue 240 (blue) and the resulting blue scale will visually parallel the red scale step-for-step — impossible to achieve with HSL alone.

Numerically, OKLCH chroma values for in-gamut sRGB colours fall roughly in the range 0 to 0.37. The maximum is hue- and lightness-dependent: at L=0.6, the most saturated red achievable in sRGB has chroma around 0.25; the most saturated yellow around 0.21; the most saturated blue around 0.31. Knowing these ceilings prevents specifying impossible palette values that the browser will silently clip.

When and why it matters

Chroma matters whenever you need colours that look consistent across hues — design systems with semantic colour scales (red-50 through red-900, blue-50 through blue-900, etc.), data visualisations with categorical palettes that must be equally readable, and accessibility-conscious UI where contrast ratios depend on perceived (not raw) lightness. The Tailwind v4 palette, Radix Colors, and the IBM Carbon design system all publish chroma-controlled OKLCH ramps for exactly this reason. The mistake to avoid is treating “saturation” as a synonym for “intensity”: increasing saturation in HSL drags lightness with it, while increasing chroma in OKLCH does not. For data viz, the practical rule is to pick the maximum chroma that’s achievable at every hue you need (typically around 0.10-0.13 for in-gamut sRGB across all hues), then keep chroma fixed and vary lightness for the scale steps. Reference: W3C CSS Color Module Level 4 — OKLab and OKLCH.

Why OKLab/OKLCH replaced HSL for serious design work: HSL is a simple algebraic transformation of RGB — its “lightness” axis is not perceptually uniform. Two HSL colours with identical lightness values can look very different in actual brightness; a yellow at HSL lightness 50% looks much brighter than a blue at the same value. OKLab (Björn Ottosson, 2020) was specifically designed so the L axis matches human lightness perception, and the chroma axis matches perceived saturation. Equal steps in OKLab look like equal steps to the eye. CSS Color Module Level 4 added oklab() and oklch() functions for this reason, and design systems (Tailwind 4, Radix Colors) increasingly publish palette scales generated in OKLCH for guaranteed perceptual consistency. Related: chromaticity, sRGB, gamut. Reference: Björn Ottosson — A perceptual colour space for image processing (2020).