Every color in the Tailwind CSS v3 palette — all 22 color families, 11 shades each (50–950). Click any swatch to copy the hex code or Tailwind class name instantly.
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
| Shade | Hex | |
|---|---|---|
| 50 | ||
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 | ||
| 950 |
Every color in this reference maps directly to a Tailwind CSS utility class. To apply a background, use bg-blue-500. For text, use text-blue-500. For borders, use border-blue-500.
Tailwind colors run from 50 (near-white) through 950 (near-black). The 500 shade is typically the "base" color. Light shades (50–300) work for backgrounds and hover states. Dark shades (600–950) work for text and borders.
Tailwind ships five neutral grays: Slate (cool blue-gray), Gray (balanced neutral), Zinc (slightly warm), Neutral (pure gray), and Stone (warm earthy). Pick the one that complements your accent color.
To use a custom color in Tailwind v3, add it to your tailwind.config.js under theme.extend.colors. You can generate a full 50–950 scale from any hex using our Tint & Shade Generator.