Tailwind Color Generator
Complete Tailwind CSS color palette reference. Browse all 19 color families with shades 50–900, 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.
Every Tailwind color is carefully tuned so that shades are perceptually consistent across families — that is, `blue-500` and `red-500` feel equally weighted. This makes the palette exceptionally useful for building consistent UIs quickly.
How to Use This Reference
Browse all 19 families below. Click any swatch to copy its HEX value. Use the Copy CSS Variables button to copy the entire palette as CSS custom properties for use in non-Tailwind projects, or download it as a .css file.