🍋 Design Tools
Color Shade Generator
chars
words
sentences
lines
Shade Scale Options
Results
Result
About Color Shade Generator
Generate a complete shade scale (50-950) from any base color. Creates Tailwind-compatible scales with WCAG contrast ratios for each shade.
How It Works
Pick a base color and the tool generates a full shade scale from 50 (lightest) to 950 (darkest), adjusting saturation and lightness. Output includes Tailwind config or CSS variables plus a WCAG contrast analysis table.
Frequently Asked Questions
What is a shade scale?
A shade scale is a range of tints (lighter) and shades (darker) from a base color, typically numbered 50 to 950. Tailwind uses this for every color.
Why include WCAG contrast ratios?
Knowing which shades pass WCAG AA (4.5:1) and AAA (7:1) contrast against white helps you choose accessible text and background color combinations.