Spacing Uniformity — When Adjacent Shades Feel Too Close or Too Far
A 12-step palette gives you 12 shades. You'd expect each step to feel like a consistent unit — move one step, get one unit of visual change.
In practice, some adjacent pairs in a hand-built palette are nearly identical. Others jump sharply. Components that use consecutive shades for depth look inconsistent — sometimes you can barely see the difference, sometimes the jump is too large.
This is a spacing problem.
What "Perceptual Distance" Means
Not all color differences are equal. The sRGB color space is not perceptually uniform — a difference of 10 units in blue looks smaller than a difference of 10 units in yellow. The same numeric gap means different things in different hue regions.
Measuring spacing requires a color-difference formula that accounts for perceptual sensitivity. The standard is CIEDE2000 — the CIE's official metric for "how different do these two colors look?"
CIEDE2000 outputs a value called ΔE. A ΔE of 1 is approximately the threshold of visibility. A ΔE of 5 is clearly noticeable. A ΔE of 20 is a large jump.
The Spacing Uniformity Score
For a well-built 12-step palette, all 11 adjacent pairs should have approximately the same ΔE. The step from shade 1 to shade 2 should feel the same as the step from shade 8 to shade 9.
The metric:
- Compute ΔE₂₀₀₀ for each adjacent pair: δ₁, δ₂, ..., δ₁₁
- Compute the coefficient of variation: CV = σ(δ) / μ(δ)
- Score = 1 / (1 + CV)
CV measures how much the step sizes vary relative to their average. CV = 0 means all steps are identical (perfect uniformity). CV = 1 means the standard deviation equals the mean — high variation.
| CV | Score | Meaning |
|---|---|---|
| 0.0 | 1.00 | All steps perfectly equal |
| 0.2 | 0.83 | Low variation — good |
| 0.5 | 0.67 | Moderate variation — noticeable |
| 1.0 | 0.50 | High variation — problematic |
What Low Uniformity Looks Like
A concrete example: a blue palette where shades 3–5 were chosen to fill a "light" range and shades 6–9 to fill a "dark" range, with a join in the middle.
Adjacent ΔE values:
| Pair | ΔE |
|---|---|
| 2→3 | 4.2 |
| 3→4 | 4.8 |
| 4→5 | 9.1 ← jump at the join |
| 5→6 | 3.9 |
| 6→7 | 4.1 |
CV is high. The jump between shades 4 and 5 is twice the average step. Components that use shade 4 as a surface and shade 5 as a border will look disproportionately heavy. Components that use shade 5 and shade 6 will look too similar.
Why It Matters
Spacing uniformity is the foundation of predictable component design.
- Depth: nested containers use consecutive shades to signal hierarchy. Uneven steps mean the depth looks inconsistent — one level looks deeper than another.
- Hover states: a ±1 step hover should look the same across all components. Uneven spacing means some hover states are nearly invisible and others are too bold.
- Dark mode: a perceptually uniform palette inverts well. An uneven palette inverts into a different set of uneven jumps — requiring separate manual tuning for dark mode.
Equal steps mean predictable components. Predictable components mean the design system extends without exceptions.