Tailwind CSS Colors Complete Color Palette Reference
The complete Tailwind CSS color palette with visual swatches and hex values for all 22 color families. Use this reference to find the perfect colors for your Tailwind CSS projects from backgrounds and text to borders and gradients.
💡 Quick Answer
Tailwind CSS color syntax: Use bg-blue-500 for background, text-blue-500 for text, border-blue-500 for borders. Shades range from 50 (lightest) to 950 (darkest). Add opacity with slash syntax: bg-blue-500/50 for 50% opacity.
Color Usage Syntax
| Utility | Syntax | Example |
|---|---|---|
| Background | bg-{color}-{shade} | bg-blue-500 |
| Text | text-{color}-{shade} | text-gray-700 |
| Border | border-{color}-{shade} | border-red-300 |
| Ring | ring-{color}-{shade} | ring-cyan-400 |
| With Opacity | bg-{color}-{shade}/{opacity} | bg-blue-500/50 |
| Gradient From | from-{color}-{shade} | from-purple-500 |
| Gradient To | to-{color}-{shade} | to-pink-500 |
Slate
slate-50
#f8fafc
slate-100
#f1f5f9
slate-200
#e2e8f0
slate-300
#cbd5e1
slate-400
#94a3b8
slate-500
#64748b
slate-600
#475569
slate-700
#334155
slate-800
#1e293b
slate-900
#0f172a
slate-950
#020617
Red
red-50
#fef2f2
red-100
#fee2e2
red-200
#fecaca
red-300
#fca5a5
red-400
#f87171
red-500
#ef4444
red-600
#dc2626
red-700
#b91c1c
red-800
#991b1b
red-900
#7f1d1d
red-950
#450a0a
Orange
orange-50
#fff7ed
orange-100
#ffedd5
orange-200
#fed7aa
orange-300
#fdba74
orange-400
#fb923c
orange-500
#f97316
orange-600
#ea580c
orange-700
#c2410c
orange-800
#9a3412
orange-900
#7c2d12
orange-950
#431407
Amber
amber-50
#fffbeb
amber-100
#fef3c7
amber-200
#fde68a
amber-300
#fcd34d
amber-400
#fbbf24
amber-500
#f59e0b
amber-600
#d97706
amber-700
#b45309
amber-800
#92400e
amber-900
#78350f
amber-950
#451a03
Green
green-50
#f0fdf4
green-100
#dcfce7
green-200
#bbf7d0
green-300
#86efac
green-400
#4ade80
green-500
#22c55e
green-600
#16a34a
green-700
#15803d
green-800
#166534
green-900
#14532d
green-950
#052e16
Cyan
cyan-50
#ecfeff
cyan-100
#cffafe
cyan-200
#a5f3fc
cyan-300
#67e8f9
cyan-400
#22d3ee
cyan-500
#06b6d4
cyan-600
#0891b2
cyan-700
#0e7490
cyan-800
#155e75
cyan-900
#164e63
cyan-950
#083344
Blue
blue-50
#eff6ff
blue-100
#dbeafe
blue-200
#bfdbfe
blue-300
#93c5fd
blue-400
#60a5fa
blue-500
#3b82f6
blue-600
#2563eb
blue-700
#1d4ed8
blue-800
#1e40af
blue-900
#1e3a8a
blue-950
#172554
Indigo
indigo-50
#eef2ff
indigo-100
#e0e7ff
indigo-200
#c7d2fe
indigo-300
#a5b4fc
indigo-400
#818cf8
indigo-500
#6366f1
indigo-600
#4f46e5
indigo-700
#4338ca
indigo-800
#3730a3
indigo-900
#312e81
indigo-950
#1e1b4b
Violet
violet-50
#f5f3ff
violet-100
#ede9fe
violet-200
#ddd6fe
violet-300
#c4b5fd
violet-400
#a78bfa
violet-500
#8b5cf6
violet-600
#7c3aed
violet-700
#6d28d9
violet-800
#5b21b6
violet-900
#4c1d95
violet-950
#2e1065
Pink
pink-50
#fdf2f8
pink-100
#fce7f3
pink-200
#fbcfe8
pink-300
#f9a8d4
pink-400
#f472b6
pink-500
#ec4899
pink-600
#db2777
pink-700
#be185d
pink-800
#9d174d
pink-900
#831843
pink-950
#500724
Rose
rose-50
#fff1f2
rose-100
#ffe4e6
rose-200
#fecdd3
rose-300
#fda4af
rose-400
#fb7185
rose-500
#f43f5e
rose-600
#e11d48
rose-700
#be123c
rose-800
#9f1239
rose-900
#881337
rose-950
#4c0519
Frequently Asked Questions
Tailwind CSS v4 includes 22 color families: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose. Each family has 11 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) totaling 242 color values.
In Tailwind CSS v4, add custom colors using the @theme directive in your CSS: @theme { --color-brand: #06b6d4; --color-brand-light: #22d3ee; }. These become available as bg-brand, text-brand-light, border-brand, etc. No separate config file is needed.
Tailwind CSS offers five gray-toned families with different undertones: slate (blue-gray undertone), gray (neutral-cool), zinc (true neutral), neutral (warm neutral), and stone (warm brown undertone). Choose based on your design aesthetic slate for modern tech, stone for warm/organic designs.
Use the slash syntax for opacity: bg-blue-500/50 applies blue background at 50% opacity. This works with text colors (text-white/80), borders (border-gray-200/30), and any color utility. Values range from 0 to 100 in steps of 5.
Each Tailwind CSS color shade maps to a specific hex value. For example, blue-50 is #eff6ff (lightest), blue-500 is #3b82f6 (default/medium), and blue-950 is #172554 (darkest). The 500 shade is typically the primary/default shade used for buttons and accents.
See the Tailwind CSS Cheat Sheet for all utility classes, or explore Tailwind CSS Components to see colors in action.