Tailwind Color Generator
Complete Tailwind CSS color palette reference. All 19 color families with 10 shades each — copy HEX values or download the full palette as CSS variables.
What Is the Tailwind Color Palette?
The Tailwind CSS color palette is a curated set of 19 color families (slate, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose), each with 10 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900). It is one of the most popular design-system color foundations in modern web development.
How to Use This Reference
Browse all 19 families. Click any swatch to copy its HEX value. Use "Copy CSS Variables" to get the entire palette as CSS custom properties, or "Download .css" to save it as a file for use in non-Tailwind projects.
Using Tailwind Colors Outside Tailwind
/* If you use Tailwind: */ class="bg-blue-500 text-blue-100"
/* If you don't: */
background: var(--tw-blue-500);
color: var(--tw-blue-100);