Practical color tool

Color Shades Generator

Generate a 50-950 shade scale from one base color for Tailwind-style UI surfaces, borders, hover states and dark mode.

Open in the main toolBack to tool
EnglishItalianoEspañolFrançaisDeutsch

What this page gives you

  • Generate lighter tints and deeper shades from one hue.
  • Use 50-200 for backgrounds, 500-600 for actions, 800-950 for dark UI.
  • Export the scale as CSS variables, Tailwind config, SCSS or JSON.

Good for

  • Tailwind scales
  • Design tokens
  • Hover states

How to use it

Generate a 50-950 shade scale from one base color for Tailwind-style UI surfaces, borders, hover states and dark mode.

Palette generatorGenerate a 50-950 shade scale from one base color for Tailwind-style UI surfaces, borders, hover states and dark mode.WCAG checkerGenerate a 50-950 shade scale from one base color for Tailwind-style UI surfaces, borders, hover states and dark mode.Image extractorGenerate a 50-950 shade scale from one base color for Tailwind-style UI surfaces, borders, hover states and dark mode.
Can I use this with the main generator?

Yes. Start from this page, then open the main Chromaforge tool with the same base color and export the palette.