Tailwind CSS Colors
22 color families, 242 shades. Click any color to copy.
Slate
Gray
Zinc
Neutral
Stone
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
About Tailwind CSS Colors
Tailwind CSS ships with a carefully curated color palette designed for building modern user interfaces. The palette includes 22 color families — from neutral grays (Slate, Gray, Zinc, Neutral, Stone) to vibrant hues (Red through Rose) — each with 11 shades from 50 (lightest) to 950 (darkest).
Shade 500 serves as the base swatch for each family, while lighter shades (50–200) are ideal for backgrounds and hover states, and darker shades (700–950) work well for text and emphasis. This consistent scale makes it easy to build accessible, well-contrasted interfaces without guesswork.
Click any swatch above to copy its hex, RGB, HSL, or Tailwind utility class. Use the Export button to download the entire palette — or a single family — as CSS custom properties, Tailwind config, SCSS variables, or raw JSON.