How are the shades calculated?

Your base color is converted to HSL, then the lightness is adjusted across each step (50 lightest to 950 darkest) while keeping the original hue and saturation, matching Tailwind's scale style.

How do I use the output in Tailwind?

Click 'Copy all' to get a named color object, then paste it inside theme.extend.colors in your tailwind.config file to use classes like bg-brand-500 or text-brand-900.

🎨

Tailwind Color Shades

Generate a 50–950 shade scale from a color.

Loading tool…

How to use the Tailwind Color Shades

1Pick or paste a base hex color.
2Review the generated 50–950 swatch scale.
3Copy a single hex or 'Copy all' for the Tailwind config.

About the Tailwind Color Shades

Free Tailwind color shades generator. Enter a hex color to create a full 50–950 palette scale, copy each hex, and export a ready-to-paste Tailwind config object.

Part of our Color Tools collection. Browse all tools.

Frequently asked questions

How are the shades calculated?: Your base color is converted to HSL, then the lightness is adjusted across each step (50 lightest to 950 darkest) while keeping the original hue and saturation, matching Tailwind's scale style.
How do I use the output in Tailwind?: Click 'Copy all' to get a named color object, then paste it inside theme.extend.colors in your tailwind.config file to use classes like bg-brand-500 or text-brand-900.