Color scale (tonal ramp)

A color scale takes one hue and stretches it into an ordered ladder of lightness steps, usually numbered 50, 100, 200, on up to 900 or 950. Tailwind popularized the numbering, Material and Radix ship their own versions, and every design system needs one, because interfaces do not use 'blue', they use a hover blue, a border blue, a focus-ring blue, and a text-on-white blue.

Good scales are built in a perceptual space (OKLCH or CIELAB lightness) so that step 400 to 500 feels like the same jump as 700 to 800. Many also shift hue slightly along the ramp, cooling the darks and warming the lights, which is what keeps a scale from looking like someone dragged a brightness slider. A common convention: steps 50 to 200 are backgrounds, 300 to 500 are borders and fills, 600 to 900 are text and strong surfaces.

Gotcha: interpolating channel by channel in gamma-encoded sRGB (which is what plain hex math does) gives you an uneven ramp. Lightness bunches up in places and the mixtures often land darker and muddier than the numbers suggest. Whether the hue drifts on the way, blues sliding purple for instance, depends on which two endpoints you picked, so check the ramp rather than assuming. Also, do not assume the same step number means the same contrast across hues: yellow-500 on white is unreadable while blue-500 is fine, so pin your ramps to measured contrast, not to a naming pattern.