Color Scale
Color Scale Generator
Give a base color and instantly get an 11-step scale with common variants for your UI system and code.
Tailwind-like scale (50–950)
Copy any step or export the whole set as CSS variables.Tints (add white)
Shades (add black)
Tones (add gray)
What is a color scale
Why you need scales
A design system needs ~11 lightness steps per hue: hover, active, disabled, borders and backgrounds all want different lightness. Hand-tuning is inconsistent; a generator keeps it controlled.
Lightness distribution
Tailwind puts 50 lightest and 950 darkest, with the visual center around 500/600. This tool follows that distribution so you can drop it in directly.
About this tool
📘Color scale takes one base color and generates an 11-step 50–950 lightness ramp in the Tailwind distribution for your design system.
- Pick a base color and the tool builds the 11-step ramp you can drop into design variables.
- Copy HEX or export CSS variables; in dark mode re-check that the deepest steps are dark enough.
- Scales are perfect for button hover/active/disabled and background layers, keeping tints consistent.
Tips
💡- Pick a base color; the tool builds 11 lightness steps (50–950) following Tailwind’s distribution for easy swap-in.
- Copy HEX or export CSS variables; in dark mode re-check the darkest steps are dark enough.
- Scales suit button hover/active/disabled and background layers — avoids inconsistent hand-tuning.