Chroma Profiles: Where Saturation Should Peak

Generate two ramps from the same blue seed — #2563eb, which is oklch(0.546 0.215 262.9) — and set them side by side. Same ten steps, same lightness curve, same hue. In the first ramp, color builds gradually and burns brightest around the middle steps, where buttons and links live; the light tints stay quiet. In the second, the vividness arrives early: steps 100–300 — the tints you would use for hover fills and colored surfaces — carry visibly more color, and the ramp has spent most of its saturation budget before the midpoint. Neither ramp is wrong. They are two answers to a question every generated color scale has to answer somewhere.

That answer is the chroma profile: the ramp’s saturation plan — a curve that decides where along the scale colorfulness peaks and how it falls away toward the ends. A ramp can’t hold saturation constant: near white and near black the gamut leaves almost no room for color, and even in between, uniform saturation reads badly — so a well-built scale shapes chroma deliberately, rising to a peak where the palette works hardest, easing off toward the extremes, and keeping a floor so the ends never go fully gray. Choosing that shape is the subject of this article, part of our color scales guide. (Chroma is OKLCH’s absolute measure of colorfulness — the formal distinction between colorfulness, chroma and saturation is its own topic; here it’s enough that more chroma means more color.)

Why can’t a ramp hold saturation constant?

Two reasons — one physical, one aesthetic.

The physical one: the ceiling collapses at both ends. A color at lightness 0.97 has almost no room for chroma before it leaves the gamut — there is no such thing as a vivid near-white — and the same collapse happens approaching black. A ramp that requests the same chroma at every step gets clamped at both ends: several steps pinned to whatever little the ceiling allows, and the even progression dies exactly where backgrounds and dark text live.

The aesthetic one: even where constant chroma is achievable, it looks wrong. Light tints running at full saturation read radioactive — highlighter colors where a calm surface should sit — and dark steps at full saturation tend to go muddy, because at low lightness heavy chroma reads as murk rather than richness. The intuition worth keeping: the eye grants color the most room in the midtones, and the gamut’s shape mirrors that. Vividness placed mid-ramp feels intentional; vividness forced to the ends feels like an error.

So the question is not whether to shape saturation along the ramp, but where to put the peak.

Where should the saturation peak sit?

Two shapes cover most palettes.

Bell — peak mid-ramp. Chroma rises to a maximum just before the ramp’s midpoint and falls away on both sides. In Scale Composer this is the default profile: the peak lands around steps 400–500, which is where a seed like #2563eb sits on the lightness curve — so the brand core renders at peak vividness while tints and shades stay supporting. Choose bell when the ramp’s job is classic brand work: buttons, links, filled components, the color moments of a UI.

Front — peak earlier. Chroma peaks about a third of the way down, in light territory, then decays through the midtones. Choose front when the ramp earns its living in the light steps: background-heavy interfaces, tinted cards and surfaces, marketing pages washed in brand tint — palettes where 100–300 are the working steps and 500 is an occasional visitor.

What do the two profiles look like in numbers?

In Scale Composer, both profiles are weight curves over the ramp position t (0 = lightest step, 1 = darkest), multiplied by the ramp’s peak chroma:

bell(t)  = exp(−10 · (t − 0.45)²)
front(t) = exp(−7 · (t − 0.30)²)

For the blue seed’s peak chroma of 0.215, the ten steps come out like this:

Two things to read out of the table. First, the profiles are requests, not guarantees: the generator still caps every step below the gamut ceiling, so front’s ≈0.115 at step 50 — a lot to ask of a near-white blue — gets trimmed to what the gamut can hold, with headroom to spare. Second, look at step 200: ≈0.128 under bell against ≈0.206 under front — over half again as much color in the same tint. That difference is most of the practical meaning of the profile choice.

Open both profiles on the same blue seed in Scale Composer — bell and front side by side, lightness identical, only the chroma plan differing. The light steps tell the story.

Why do the ramp ends need a chroma floor?

Both columns in the table bottom out at ≈0.026 instead of continuing toward zero. That is the floor: 12 % of the peak, applied so even steps 50 and 900 keep a hint of the hue.

Without it, the exponential decay takes the extreme steps to effectively zero chroma — and a step at zero chroma is generic gray, indistinguishable across brands. With it, the near-white 50 is faintly but recognizably blue, and the 900 is a blue-black rather than a flat one. The reasoning is the same one behind tinted neutrals: a whisper of chroma is invisible in a swatch but felt across a surface, and it is what makes a page background or a dark heading read as belonging to this palette rather than to no palette. The floor ties the ends of the ramp to the brand.

How do you choose between bell and front?

Ask where the ramp earns its living. If its working steps are the midtones — buttons, links, active states — take bell, and the brand core renders at full vividness. If its working steps are light — surface tints, washes, background-heavy layouts — take front, and the tints carry the color while the midtones calm down. A product palette can mix: bell for the brand ramp, front for a supporting hue used mostly as tinted surfaces.

Two boundary notes. A profile shapes one ramp, not the whole theme: a dark palette derived from a light one re-plans chroma on its own terms — in the Scale Composer, derived dark palettes run their own lightness curve and boost chroma by roughly 20 %, because dark surroundings mute perceived colorfulness. And no profile rescues a peak set too high: the profile distributes the peak, the gamut cap still rules it.

The floor is the easiest of these ideas to understand by deleting it. Open the same ramp with the floor off, then on — with the floor gone, steps 50 and 900 collapse to plain gray and the ramp’s ends could belong to any product; restore it and watch them rejoin the palette.