What is a color scale in design systems?

A color scale 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 color variations across your UI.

How many steps should my color scale have?

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.

Can I export the scale as Tailwind config?

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.

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

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

Design System Color Scale Generator

Generate consistent color scales for design systems, CSS variables, and Tailwind config

Color Scale Settings

Base Color

Scale Size: 10

Scale Method

Vary Lightness (Light to Dark)

Vary Saturation (Muted to Vibrant)

Vary Both (Light/Muted to Dark/Vibrant)

Naming Convention

Generating color scale...

How to Use

Select a base color for your design system
Choose the scale size (number of color variations)
Select a scale method (lightness, saturation, or both)
Choose a naming convention for your colors
Copy the generated CSS variables or Tailwind config for your project