How to build a colour scale from a single brand colour

One brand colour is never enough. You need a lighter version for backgrounds, a darker one for text, and several in between for borders and hover states. Picking those by eye produces a palette that feels inconsistent; generating them from one colour does not.

Why shades are numbered

The 50-to-950 convention, popularised by Tailwind CSS, names each step by lightness: 50 is nearly white, 500 sits around the base colour, 950 is nearly black. Numbering rather than naming makes a palette usable — border-slate-200 communicates intent, while light-grey-2 does not.

It also makes palettes swappable. If every colour family exposes the same steps, changing the accent colour across a product becomes a find-and-replace rather than a redesign.

Keeping a ramp even

Stepping lightness in equal numeric increments does not produce an even-looking ramp, because perceived lightness is not linear. The middle steps look bunched while the ends look far apart.

Saturation needs attention too. Holding it constant makes the lightest and darkest steps look garish, so easing it off toward the extremes keeps the ends feeling like neutrals rather than neon. This is the main reason a generated ramp usually looks better than a hand-picked one.

Contrast is a requirement, not a preference

WCAG asks for a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text, with 7:1 as the stricter AAA target. These are the figures accessibility audits check against.

In practice this decides which steps can carry text. Light steps take dark text, dark steps take light text, and the middle of a ramp is usually where legibility quietly fails — which is exactly where brand colours tend to sit. Check the ratio rather than trusting the look.