High Chroma vs Low Chroma Palettes — What You Actually Trade Away
The tension shows up in every design review: the vivid palette looks better on the slide. The muted palette works better in the product.
This isn't taste. It's geometry. High chroma colors occupy a specific region of color space that creates structural problems for systematic palette design — problems that surface as metric failures before they surface as visual complaints.
What Chroma Actually Controls
Chroma (in OKLCH terms) is the distance from the gray axis. Zero chroma is pure gray. Maximum chroma is the most saturated version of a hue that the display can render.
The problem is that maximum achievable chroma varies dramatically by lightness — this is a geometric property of the sRGB gamut boundary in OKLCH space, not a design choice. At L=0.5 (middle gray), a blue (h≈264°) can reach C≈0.37 before going out of sRGB gamut. At L=0.9 (near white), the same hue is capped at C≈0.08. At L=0.1 (near black), at C≈0.05. The gamut is a cone-like volume — wide at middle lightness, narrow at both extremes.
The gamut — the space of valid colors — narrows sharply at both extremes. High chroma in the midtones is geometrically incompatible with smooth transitions to the light and dark ends.
The Four Metrics That Break Under High Chroma
1. Chroma Smoothness
This is the most direct failure. A high-chroma palette must peak in the midtones and then drop sharply toward both extremes to stay within gamut. The drop is rarely smooth — it creates a chroma spike at the base color and a cliff toward the dark and light ends.
Low chroma palettes don't have this problem. When peak chroma is modest, the arc from dark to light stays within a zone where gradual transitions are geometrically possible. The chroma curve is smooth because there's room to maneuver.
The trade-off: High chroma gives you a vivid base color. It costs you a smooth chroma arc across the ramp. Components built on the ramp will have a visible "saturation cliff" where shades suddenly become gray.
2. Hue Stability
In OKLCH, hue and chroma are independent dimensions — but in practice, pushing chroma toward the gamut boundary forces the color toward regions where hue linearity breaks down.
The specific failure: blue and purple hues at high chroma shift significantly when lightness changes. A vivid blue at L=0.5 and C=0.37 becomes noticeably purple at L=0.3 and noticeably cyan at L=0.7, even when the OKLCH hue value is held constant. This is a known artifact of the OKLCH model at gamut edges.
Low chroma palettes stay well inside the gamut. Hue behaves predictably across the full lightness range. The brand color reads as the same hue whether it appears as a text shade, a surface shade, or a fill.
The trade-off: High chroma gives you maximum vibrancy at the base. It costs you hue identity at the extremes. Your "brand blue" may read as blue only in the midtones.
3. Lightness Linearity
A perceptually linear lightness ramp requires equal perceived steps from dark to light. At high chroma, the gamut constraint at the extremes forces a choice: clip the color (desaturate suddenly) or compress the lightness range (leave the dark and light ends underdeveloped).
Either choice breaks linearity. Clipping creates a step in perceived brightness at the point where saturation drops. Compressing creates a cluster of near-identical shades at the extremes.
Low chroma palettes don't face this constraint. The full lightness range is accessible without hitting gamut limits, so the ramp can be distributed evenly from dark to light.
The trade-off: High chroma forces a compromise between saturation and lightness range. You get a vivid midtone and compressed extremes.
4. Spacing Uniformity
This is the composite failure. Spacing uniformity measures the overall perceptual equidistance between adjacent steps — combining lightness, chroma, and hue deltas into a single distance metric.
When chroma smoothness is poor, hue shifts occur, and lightness linearity breaks down, the overall spacing between steps becomes irregular. Some adjacent pairs are perceptually far apart (the chroma cliff zone). Others are nearly identical (the compressed extremes).
The result: a palette that behaves differently at different positions on the scale. Hover states are invisible at some steps and dramatic at others. Interactive states require per-zone calibration instead of a single systematic rule.
The trade-off: High chroma introduces irregularity into the entire step structure. The palette stops functioning as a predictable system.
What High Chroma Does Well
The metrics tell one side of the story. The other side is real.
High chroma palettes are immediately legible as a specific color. "Brand blue" at C=0.35 reads unambiguously as blue — rich, specific, memorable. The same blue at C=0.15 reads as "blue-gray" and risks being mistaken for a neutral.
For brand identity, this matters. A brand color that reads clearly as itself, at a glance, across contexts — that's a legitimate design goal that metrics don't capture.
High chroma also has better visual hierarchy. Vivid shades naturally draw attention. In a UI where the accent color needs to be immediately distinguishable from the neutral surface, higher chroma does that work without requiring large size or weight differences.
The Structural Ceiling
The issue isn't that high chroma is wrong. It's that chroma has a structural ceiling beyond which the palette can no longer be both vivid and systematic.
Below that ceiling: you can have meaningful chroma, smooth transitions, stable hue, and good WCAG coverage. The palette is vivid enough to read as a color, systematic enough to work as a design tool.
Above it: at least one metric will break. Usually chroma smoothness goes first. Then hue stability. Then the downstream metrics follow.
The ceiling isn't a fixed number — it depends on the hue. Blues and purples have a lower ceiling (the gamut is narrower at high chroma). Yellows and greens have a higher ceiling. A vivid yellow palette can be more saturated than a vivid blue palette before the same structural failures appear.
The 11-system benchmark confirms this indirectly: Atlassian (Sc=0.909, score 84.23) uses relatively high chroma across its accent ramps and still maintains smooth curves — its hues (lime, teal, blue) sit in the mid-to-high gamut ceiling zone. Radix UI (Sc=0.768, score 67.80) uses deep saturated hues (crimson, purple, iris) that push against the blue-violet gamut ceiling, producing the characteristic chroma cliff at the dark end.
Practical Guidance
For brand identity work: Push chroma as high as the hue allows before the score drops below 80. This is the zone where vibrancy and structure coexist. Use the composite score as a ceiling, not a floor.
For design system work: Target the midrange — enough chroma to read as a specific color, not so much that the ramp structure breaks. C=0.10–0.18 covers most hues without hitting the gamut ceiling.
For neutral ramps: Low chroma (C < 0.05) is almost always correct. Neutrals don't need to read as a specific color — they need to be invisible as backgrounds. High-chroma "warm grays" or "cool grays" introduce hue instability that shows up as inconsistent perceived temperature across components.
For multi-hue systems: Use low chroma for the neutral ramp and reserve higher chroma for the accent ramps. The neutral needs to be a reliable, invisible foundation. The accent can carry the visual identity.
The palette that photographs well is not always the palette that works. Measure both — and know which trade-off you're making.
→ Chroma Smoothness metric → Hue Stability metric → Try the Generator