Generator
Explore
Trends
Picker
Gradient
Contrast
Tailwind
Blog
Try Demo
Tailwind CSS Colors
The complete Tailwind CSS v4 color palette
slate
50
50
#f8fafc
100
100
#f1f5f9
200
200
#e2e8f0
300
300
#cbd5e1
400
400
#94a3b8
500
500
#64748b
600
600
#475569
700
700
#334155
800
800
#1e293b
900
900
#0f172a
950
950
#020617
gray
50
50
#f9fafb
100
100
#f3f4f6
200
200
#e5e7eb
300
300
#d1d5db
400
400
#9ca3af
500
500
#6b7280
600
600
#4b5563
700
700
#374151
800
800
#1f2937
900
900
#111827
950
950
#030712
zinc
50
50
#fafafa
100
100
#f4f4f5
200
200
#e4e4e7
300
300
#d4d4d8
400
400
#a1a1aa
500
500
#71717a
600
600
#52525b
700
700
#3f3f46
800
800
#27272a
900
900
#18181b
950
950
#09090b
neutral
50
50
#fafafa
100
100
#f5f5f5
200
200
#e5e5e5
300
300
#d4d4d4
400
400
#a3a3a3
500
500
#737373
600
600
#525252
700
700
#404040
800
800
#262626
900
900
#171717
950
950
#0a0a0a
stone
50
50
#fafaf9
100
100
#f5f5f4
200
200
#e7e5e4
300
300
#d6d3d1
400
400
#a8a29e
500
500
#78716c
600
600
#57534e
700
700
#44403c
800
800
#292524
900
900
#1c1917
950
950
#0c0a09
red
50
50
#fef2f2
100
100
#fee2e2
200
200
#fecaca
300
300
#fca5a5
400
400
#f87171
500
500
#ef4444
600
600
#dc2626
700
700
#b91c1c
800
800
#991b1b
900
900
#7f1d1d
950
950
#450a0a
orange
50
50
#fff7ed
100
100
#ffedd5
200
200
#fed7aa
300
300
#fdba74
400
400
#fb923c
500
500
#f97316
600
600
#ea580c
700
700
#c2410c
800
800
#9a3412
900
900
#7c2d12
950
950
#431407
amber
50
50
#fffbeb
100
100
#fef3c7
200
200
#fde68a
300
300
#fcd34d
400
400
#fbbf24
500
500
#f59e0b
600
600
#d97706
700
700
#b45309
800
800
#92400e
900
900
#78350f
950
950
#451a03
yellow
50
50
#fefce8
100
100
#fef9c3
200
200
#fef08a
300
300
#fde047
400
400
#facc15
500
500
#eab308
600
600
#ca8a04
700
700
#a16207
800
800
#854d0e
900
900
#713f12
950
950
#422006
lime
50
50
#f7fee7
100
100
#ecfccb
200
200
#d9f99d
300
300
#bef264
400
400
#a3e635
500
500
#84cc16
600
600
#65a30d
700
700
#4d7c0f
800
800
#3f6212
900
900
#365314
950
950
#1a2e05
green
50
50
#f0fdf4
100
100
#dcfce7
200
200
#bbf7d0
300
300
#86efac
400
400
#4ade80
500
500
#22c55e
600
600
#16a34a
700
700
#15803d
800
800
#166534
900
900
#14532d
950
950
#052e16
emerald
50
50
#ecfdf5
100
100
#d1fae5
200
200
#a7f3d0
300
300
#6ee7b7
400
400
#34d399
500
500
#10b981
600
600
#059669
700
700
#047857
800
800
#065f46
900
900
#064e3b
950
950
#022c22
teal
50
50
#f0fdfa
100
100
#ccfbf1
200
200
#99f6e4
300
300
#5eead4
400
400
#2dd4bf
500
500
#14b8a6
600
600
#0d9488
700
700
#0f766e
800
800
#115e59
900
900
#134e4a
950
950
#042f2e
cyan
50
50
#ecfeff
100
100
#cffafe
200
200
#a5f3fc
300
300
#67e8f9
400
400
#22d3ee
500
500
#06b6d4
600
600
#0891b2
700
700
#0e7490
800
800
#155e75
900
900
#164e63
950
950
#083344
sky
50
50
#f0f9ff
100
100
#e0f2fe
200
200
#bae6fd
300
300
#7dd3fc
400
400
#38bdf8
500
500
#0ea5e9
600
600
#0284c7
700
700
#0369a1
800
800
#075985
900
900
#0c4a6e
950
950
#082f49
blue
50
50
#eff6ff
100
100
#dbeafe
200
200
#bfdbfe
300
300
#93c5fd
400
400
#60a5fa
500
500
#3b82f6
600
600
#2563eb
700
700
#1d4ed8
800
800
#1e40af
900
900
#1e3a8a
950
950
#172554
indigo
50
50
#eef2ff
100
100
#e0e7ff
200
200
#c7d2fe
300
300
#a5b4fc
400
400
#818cf8
500
500
#6366f1
600
600
#4f46e5
700
700
#4338ca
800
800
#3730a3
900
900
#312e81
950
950
#1e1b4b
violet
50
50
#f5f3ff
100
100
#ede9fe
200
200
#ddd6fe
300
300
#c4b5fd
400
400
#a78bfa
500
500
#8b5cf6
600
600
#7c3aed
700
700
#6d28d9
800
800
#5b21b6
900
900
#4c1d95
950
950
#2e1065
purple
50
50
#faf5ff
100
100
#f3e8ff
200
200
#e9d5ff
300
300
#d8b4fe
400
400
#c084fc
500
500
#a855f7
600
600
#9333ea
700
700
#7e22ce
800
800
#6b21a8
900
900
#581c87
950
950
#3b0764
fuchsia
50
50
#fdf4ff
100
100
#fae8ff
200
200
#f5d0fe
300
300
#f0abfc
400
400
#e879f9
500
500
#d946ef
600
600
#c026d3
700
700
#a21caf
800
800
#86198f
900
900
#701a75
950
950
#4a044e
pink
50
50
#fdf2f8
100
100
#fce7f3
200
200
#fbcfe8
300
300
#f9a8d4
400
400
#f472b6
500
500
#ec4899
600
600
#db2777
700
700
#be185d
800
800
#9d174d
900
900
#831843
950
950
#500724
rose
50
50
#fff1f2
100
100
#ffe4e6
200
200
#fecdd3
300
300
#fda4af
400
400
#fb7185
500
500
#f43f5e
600
600
#e11d48
700
700
#be123c
800
800
#9f1239
900
900
#881337
950
950
#4c0519
