Tailwind CSS Color Palette
Complete Tailwind CSS 3.x default color palette — every shade from 50 to 950 with hex values.
How to Use
- Click any swatch to copy its hex.
- Shades go 50 (lightest) → 950 (darkest).
Tailwind palette
| name | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| slate | |||||||||||
| gray | |||||||||||
| zinc | |||||||||||
| neutral | |||||||||||
| stone | |||||||||||
| red | |||||||||||
| orange | |||||||||||
| amber | |||||||||||
| yellow | |||||||||||
| lime | |||||||||||
| green | |||||||||||
| emerald | |||||||||||
| teal | |||||||||||
| cyan | |||||||||||
| sky | |||||||||||
| blue | |||||||||||
| indigo | |||||||||||
| violet | |||||||||||
| purple | |||||||||||
| fuchsia | |||||||||||
| pink | |||||||||||
| rose |
Notes
Shade scale
50 (lightest) to 950 (darkest) — 500 is the base
Grays
slate, gray, zinc, neutral, stone — pick one and stick with it
Colors
22 hues × 11 shades = 242 swatches
Use in Tailwind
class="bg-blue-500" — or arbitrary via class="bg-[#3b82f6]"
Last updated: