What Is Chroma (and How Is It Not Saturation)?

Try a small experiment in any HSL color picker. Set one color to hsl(60, 100%, 50%) and another to hsl(240, 100%, 50%) — a yellow and a blue, both at “100% saturation.” Now ask which one carries more color. Measured perceptually, the answer isn’t a tie: the blue holds roughly half again as much colorfulness as the yellow (0.31 versus 0.21 in OKLCH chroma). Two colors, identical saturation values, different amounts of color.

That’s the difference in one sentence: chroma measures colorfulness as an absolute quantity — 0.15 chroma is the same amount of color in any hue — while saturation is a relative percentage of whatever maximum that particular hue and lightness happen to allow. Saturation tells you how far a slider is pushed; chroma tells you how much color is actually there. The distinction runs through everything in our OKLCH guide, and this article unpacks why it matters in practice.

Why does “100%” mean different amounts of color?

Because every hue has a different ceiling. The most colorful yellow a screen can show is, perceptually, a modest amount of color at a very high lightness; the most colorful blue is a large amount of color at a low lightness. The formal treatment of these terms — colorfulness, chroma, and saturation — separates them precisely, but the design-relevant part fits in a table. Here are the three most saturated corners of the sRGB gamut, measured in OKLCH:

All three are “100% saturated” in HSL terms — the slider can go no further. Yet their measured chroma differs by 50%, and each reaches its maximum at a completely different lightness. A percentage of ceilings this uneven can’t describe how colorful something is; it can only describe how close to its own hue’s limit it sits.

What does the chroma ceiling look like?

Chroma’s ceiling depends on both hue and lightness, and its shape drives how palettes behave. Near white, every hue’s ceiling collapses toward zero — a very light color can only ever be slightly colorful (there is no such thing as a vivid pastel). Near black the ceiling collapses the same way. The room for color lives in the midtones, and how much room — and at which lightness the peak sits — varies by hue, as the table above shows.

This is why generated color scales shape chroma deliberately instead of holding it constant. A ramp that requests the same chroma at every step would slam into the ceiling at both ends; a ramp that follows the ceiling would make every hue maximally garish. The practical middle is a profile: chroma rises toward the midtones and eases off toward the extremes, with a floor so even the near-white and near-black steps keep a trace of the hue instead of going gray.

Open a ramp with a bell-shaped chroma profile in Scale Composer — colorfulness peaks in the middle steps and tapers toward both ends, while the lightness curve stays independent. The two axes are doing different jobs, visibly.

How should chroma guide picking accent colors?

Think in chroma budget instead of saturation feel. Colors read as “equally vivid” when their chroma is comparable — not when their saturation percentages match. Practical consequences:

• Matching accents across hues. If your success green and your warning amber should feel equally strong, give them similar chroma. Matching saturation percentages will make one shout and the other whisper, because the two hues’ ceilings differ.
• A calm UI has a chroma cap. Interfaces that feel composed tend to spend high chroma in one or two places and keep everything else low. Because chroma is absolute, a cap like “nothing above 0.12 except the primary action” is enforceable across every hue — the same rule expressed in saturation percentages would permit wildly different intensities.
• Neutrals are low-chroma, not zero-chroma. A gray with 0.01–0.02 chroma toward the brand hue reads as intentional; the same idea is impossible to state cleanly in saturation terms.

What happens when you ask for more chroma than exists?

The request gets clamped to the gamut boundary — and where the clamping happens, ramps flatten: several steps end up pinned at the same maximum colorfulness, and the smooth progression dies exactly where the palette should glow. Scale generators guard against this by capping requested chroma slightly below the physical ceiling, keeping headroom at every lightness.

You can find the ceiling yourself: open the same ramp and raise the chroma multiplier step by step. Watch the midtones saturate first, then stop responding as they reach the cap while the light and dark ends — with their lower ceilings — stopped moving long before. The lightness column never flinches. That stubborn ceiling you just traced is the difference between chroma and saturation, felt: saturation is a percentage of it, chroma is the thing itself.