How do I generate a color scale from one color?

Enter a base color and the tool builds an 11-step 50–950 scale, ready to copy as Tailwind, Radix, or CSS custom-property formats.

What do the 50–950 numbers mean?

They are lightness steps: 50 is the lightest tint, 500 is roughly your base, and 950 is the darkest shade — the convention used by most modern design systems.

Why use this instead of just lightening in HSL?

HSL lightness isn't perceptually even, so HSL scales jump unevenly. This tool spaces steps to look balanced to the eye.

Color Scale Generator

Enter a primary color to generate a 50–950 design system scale

Primary HEX

Generate Scale

11 steps — copy, save or export

Preview

Simulate buttons, alerts, backgrounds and dark UI hierarchy

About Color Scale Generator

Generate an 11-step 50–950 color scale from any base color. Outputs Tailwind CSS, Radix Colors, and CSS custom properties for design systems. Dark mode ready. One base color generates the full 11-step scale, with Tailwind, Radix, and CSS custom property output all provided at once — no separate manual conversion needed.

Fits naturally into building out a design system color spec, or filling in a complete scale for a project that only has a single base color today.

Common questions

How do I generate a color scale from one color? Enter a base color and the tool builds an 11-step 50–950 scale, ready to copy as Tailwind, Radix, or CSS custom-property formats.
What do the 50–950 numbers mean? They are lightness steps: 50 is the lightest tint, 500 is roughly your base, and 950 is the darkest shade — the convention used by most modern design systems.
Why use this instead of just lightening in HSL? HSL lightness isn't perceptually even, so HSL scales jump unevenly. This tool spaces steps to look balanced to the eye.