Question 1

What is a colour scale (or color scale)?

Accepted Answer

A colour scale — spelled 'color scale' in US English — is a systematic set of shades derived from a single hue, ranging from very light (tint) to very dark (shade). Design systems like Tailwind CSS use 10-step scales (50 through 950) so you can apply consistent colour variations across your UI.

Question 2

How many steps should my color scale have?

Accepted Answer

Most design systems use 10–11 steps. Tailwind uses 11 (50, 100, 200...900, 950). Material Design uses 12. For a lightweight custom system, 7–8 steps often covers all your needs from backgrounds to dark text.

Question 3

Can I export the scale as Tailwind config?

Accepted Answer

Yes. The tool generates a ready-to-paste Tailwind color config object. Add it to your tailwind.config.js under the colors key to use your custom scale across all Tailwind utilities.

Question 4

What's the difference between a tint and a shade?

Accepted Answer

A tint is your base colour mixed with white (lighter), and a shade is your base colour mixed with black (darker). A full colour scale typically includes both tints (light end) and shades (dark end) of your base colour.

Design System Color Scale Generator (Colour Scale Tool)

Color Scale Settings

How to Use

Frequently Asked Questions

Design System Color Scale Generator (Colour Scale Tool)

Color Scale Settings

How to Use

Frequently Asked Questions