How to Create a UI Color Scale for Design Systems

Why Scales Matter

Without a scale, designers pick ad-hoc shades. A button gets one blue, a badge another, a chart a third. Nothing is individually wrong, but the product looks incoherent. A scale enforces that every blue comes from the same family — creating visual unity without restricting flexibility.

Anatomy of a 50–950 Scale

• 50 — Near-white. Page backgrounds, hover states on white surfaces.
• 100–200 — Light tints. Backgrounds, tags, badges.
• 300–400 — Mid-light. Borders, disabled states, placeholder text.
• 500 — The base color. Brand primary, buttons, links.
• 600–700 — Mid-dark. Hover and pressed states.
• 800–900 — Dark shades. Text on light backgrounds, dark mode surfaces.
• 950 — Near-black. Deep backgrounds in dark mode.

The Lightness Curve

A well-designed scale does not step linearly in lightness — it follows a perceptual curve. Human vision is more sensitive to differences in dark tones, so darker steps need smaller lightness increments to appear equally spaced. Use OKLCH or HSL when building scales, not RGB.

Saturation Compensation

Pure lightness scaling creates washed-out light tints and muddy dark shades. Counter this by slightly adjusting saturation: increase it in the mid-range (400–600) and reduce it at the extremes. This keeps the scale feeling "alive" throughout rather than fading to near-gray.

Hue Shift

Advanced scales introduce a subtle hue rotation — blues might shift slightly warmer toward lighter steps. This mimics how pigments behave physically. A 5–15 degree rotation across the full range is usually sufficient.

How Many Scales?

• 1–2 brand color scales (primary, secondary)
• 1 neutral / gray scale
• 1 each for semantic: success (green), warning (yellow), danger (red), info (blue)

That is 6–8 total — enough to cover every UI state without creating an unmanageable library.