Tailwind Shades Generator
Generate 50 to 950 color shade scales ready for Tailwind CSS
Copy the exported object and paste it under theme.extend.colors inside your tailwind.config.js file, or under @theme in Tailwind v4.
Simple white/black blending loses color saturation; this generator uses perceptual lightness curves to maintain vibrant, crisp tones across all shades.
In standard Tailwind design systems, shade 500 or 600 is optimal for primary buttons with white text, providing strong WCAG AA contrast.
100% Free & Private
All tools execute client-side in your browser. Zero tracking.
Generate Tailwind colour scales
