Building a UI Color Scale: How Many Shades Do You Actually Need?
A single brand color — one hex code — is nowhere near enough to build a real interface. The moment you need a button's hover state, a subtle background tint, a border that's slightly darker than a card, or body text that meets contrast requirements against a colored background, you need a whole scale of lighter and darker steps derived from that one color, not the single value itself repeated everywhere.
Here's how many steps that scale actually needs, and what each one tends to get used for.
The common answer: 9 to 11 steps
Most mature design systems (Tailwind, Radix, Material) land somewhere between 9 and 11 shades per color, running from a near-white tint at one end to a near-black shade at the other, with the 'base' brand color sitting somewhere in the middle of the scale rather than at either extreme. That range isn't arbitrary — fewer steps and you don't have enough granularity for every UI state that needs a slightly different value; more steps and most of them end up visually indistinguishable from their neighbors, adding maintenance overhead without adding real design value.
What the light and dark ends are actually for
The lightest 2-3 steps in a scale are almost never used for text — they're subtle background tints: a hover state on a list row, a light fill behind a badge, a section background that's barely distinguishable from white but still reads as 'tinted.' The darkest 2-3 steps serve the opposite role: they're for text and icons that need to sit on a light background and clear contrast requirements, or for a dark-mode surface where the relationship inverts. The middle of the scale is where the actual 'brand color' usually lives — the shade you'd point to on a swatch and call the color, even though it's really just one stop on a much longer scale.
Dark mode needs its own pass, not an inversion
A common mistake is assuming dark mode is just the light-mode scale reversed. It isn't — a shade that reads as a subtle light-mode background tint often becomes far too saturated and vibrant against a dark surface, because saturation perception shifts with the surrounding lightness. Most systems that support both modes generate a genuinely separate dark-mode scale (or apply a saturation adjustment when inverting) rather than literally flipping the same nine values end to end.
Generate a scale from your brand color
Our Color Shades tool generates a full range of tints and shades from any hex code, so you can pick the specific steps your interface actually needs rather than guessing at lighter and darker values by eye.