Tailwind Color Shades Generator
Free online Tailwind shades generator. Turn any base color into a 50–950 shade palette and copy it as a Tailwind config or CSS variables.
About the Tailwind Color Shades Generator
Build eleven HSL-based color shades from 50 to 950 and copy a theme color object or CSS variables. The scale changes lightness and may adjust saturation; the input color is not necessarily preserved at step 500. This is an approximate palette, not the exact Tailwind palette algorithm or a contrast certification. Check intended foreground and background combinations.
Features
- Eleven numbered shades
- Swatch preview
- Theme color object and CSS variables
How to use this tool
The Tailwind Color Shades Generator works right in your browser — no signup, no installation. Follow these steps:
- Pick or paste your base hex color.
- Review the generated 50–950 shades and their hex codes.
- Choose Tailwind config or CSS variables output.
- Click Copy and paste the palette into your project.
Frequently asked questions
How does this tool work?
Build eleven HSL-based color shades from 50 to 950 and copy a theme color object or CSS variables. The scale changes lightness and may adjust saturation; the input color is not necessarily preserved at step 500. This is an approximate palette, not the exact Tailwind palette algorithm or a contrast certification. Check intended foreground and background combinations.
Using the results
Skip writing CSS by hand. The Tailwind Color Shades Generator generates clean, copy-ready code with a live preview, all in your browser — tweak the controls, watch it update in real time, and paste the result straight into your stylesheet.