# What is a Colour Scale?

> A colour scale is an ordered set of shades of one hue, numbered 50 to 900, built for even perceptual steps and predictable contrast at each pairing.

- Source: https://flashdsm.com/glossary/color-scale
- Site: Flash DS (https://flashdsm.com)
- Updated: 2026-08-06

---

## Definition

A colour scale is an ordered set of shades of one hue, conventionally numbered from 50 to 900, built so that steps are perceptually even and specific pairings meet known contrast ratios. It lets a team pick colours by role and step rather than choosing arbitrary hex values.

Also written as: Color scale, Colour ramp, Tonal palette

## The numbering convention

Most systems number scales from 50 (lightest) to 900 or 950 (darkest), in steps of 100. The convention comes from Material Design and was reinforced by Tailwind, and it is now common enough to be worth following.

```
--blue-50:  #EFF6FF
--blue-100: #DBEAFE
...
--blue-500: #3B82F6
...
--blue-900: #1E3A8A
```

The value of a shared convention is that "use blue-600 for the border" means the same thing to a designer, an engineer and an AI assistant.

## What makes a scale good

**Perceptual evenness.** Steps should look equally spaced. Interpolating in sRGB does not achieve this - it produces scales that bunch up in the middles and go muddy through certain hues. Working in a perceptually uniform space such as OKLCH gives noticeably better results.

**Predictable contrast.** In a well-built scale, certain pairings are reliable: step 600 or higher on step 50 will hold AA for body text, step 500 works for large text. When those relationships hold, people stop checking contrast by hand for routine pairings.

**Consistent hue.** Naive lightness adjustment shifts hue at the extremes. Blues drift purple as they darken; yellows go green. Keeping perceived hue steady across the scale takes deliberate correction.

## How many steps

Ten (50 through 900) is the common default and works for most products. Some systems use eleven, adding 950 for dark themes that need something below 900.

Fewer than about seven tends to leave gaps where someone needs a shade that does not exist, which is exactly where drift starts.

## Which scales a system needs

- A **primary** scale for the brand colour
- A **neutral** or grey scale, used more than everything else combined
- **Semantic** scales for success, warning, error and information
- Optionally a **secondary** or accent scale

The neutral scale deserves the most attention, being where most of the interface actually lives. A slight hue in the greys, warm or cool, is usually what distinguishes a considered interface from a default one.

## Where this fits with Flash DS

Generated systems include full scales for primary, secondary, neutral and semantic colours, produced in a perceptually uniform space with light and dark variants and contrast checked across pairings.

## Related terms

- https://flashdsm.com/glossary/design-token
- https://flashdsm.com/glossary/dark-mode-tokens
- https://flashdsm.com/glossary/semantic-token