Tailwind CSS Color Generator
Enter a hex code or drag the HSL sliders to build a complete Tailwind color scale. Every shade is checked for contrast against white and black, so you can see which ones are safe for text before you ship them.
mediumslateblue
Frequently asked
How is the scale generated?
Your color is placed on the shade whose lightness it matches most closely, then the remaining shades are interpolated toward white and black. Because the base color keeps its exact hex value, the scale always contains the color you started with.
Why did my color land on a shade other than 500?
The shade is chosen by lightness, not by position. A pale mint sits naturally around 200 and a deep navy around 800. Forcing every color to 500 would distort the rest of the scale, so the tool places it where it actually belongs.
What do 'distance to white' and 'distance to black' do?
They control how far the lightest and darkest ends stretch. Raising them pushes the extremes further toward pure white and pure black, which is useful when the default scale feels too flat at the ends.
Can I use the output with Tailwind v4?
Yes. The exported JSON works as-is inside a v3 `tailwind.config.js` under `theme.extend.colors`. For v4, paste the same values into your CSS `@theme` block as `--color-<name>-<shade>` custom properties.
What do the contrast numbers on each shade mean?
Hovering a shade shows its WCAG contrast ratio against white and black, along with the level it passes (AA or AAA). Use it to pick text colors that stay readable on that background.