Tailwind background colors
Tailwind background color utilities allow developers to effortlessly manipulate background colors using intuitive classes, such as bg, bg-indigo-500, and more, making it a cornerstone of modern web design.
Use the Select box to Switch colors
Background Color Classes
Here we have an exciting range of Tailwind CSS colors that you are going to love exploring. We are talking about everything from the vibrant punch of bg-indigo-950 to the crisp elegance of bg-slate-100, and we have even thrown in the HEX and RGB variations so you can truly immerse yourself.
bg-slate-50
#f8fafc
rgb(248, 250, 252)
bg-slate-100
#f1f5f9
rgb(241, 245, 249)
bg-slate-200
#e2e8f0
rgb(226, 232, 240)
bg-slate-300
#cbd5e1
rgb(203, 213, 225)
bg-slate-400
#94a3b8
rgb(148, 163, 184)
bg-slate-500
#64748b
rgb(100, 116, 139)
bg-slate-600
#475569
rgb(71, 85, 105)
bg-slate-700
#334155
rgb(51, 65, 85)
bg-slate-800
#1e293b
rgb(30, 41, 59)
bg-slate-900
#0f172a
rgb(15, 23, 42)
bg-slate-950
#020617
rgb(2, 6, 23)
bg-gray-50
#f9fafb
rgb(249, 250, 251)
bg-gray-100
#f3f4f6
rgb(243, 244, 246)
bg-gray-200
#e5e7eb
rgb(229, 231, 235)
bg-gray-300
#d1d5db
rgb(209, 213, 219)
bg-gray-400
#9ca3af
rgb(156, 163, 175)
bg-gray-500
#6b7280
rgb(107, 114, 128)
bg-gray-600
#4b5563
rgb(75, 85, 99)
bg-gray-700
#374151
rgb(55, 65, 81)
bg-gray-800
#1f2937
rgb(31, 41, 55)
bg-gray-900
#111827
rgb(17, 24, 39)
bg-gray-950
#030712
rgb(3, 7, 18)
bg-zinc-50
#fafafa
rgb(250, 250, 250)
bg-zinc-100
#f4f4f5
rgb(244, 244, 245)
bg-zinc-200
#e4e4e7
rgb(228, 228, 231)
bg-zinc-300
#d4d4d8
rgb(212, 212, 216)
bg-zinc-400
#a1a1aa
rgb(161, 161, 170)
bg-zinc-500
#71717a
rgb(113, 113, 122)
bg-zinc-600
#52525b
rgb(82, 82, 91)
bg-zinc-700
#3f3f46
rgb(63, 63, 70)
bg-zinc-800
#27272a
rgb(39, 39, 42)
bg-zinc-900
#17171a
rgb(23, 23, 26)
bg-zinc-950
#020203
rgb(2, 2, 3)
bg-neutral-50
#fafafa
rgb(250, 250, 250)
bg-neutral-100
#f5f5f5
rgb(245, 245, 245)
bg-neutral-200
#e5e5e5
rgb(229, 229, 229)
bg-neutral-300
#d4d4d4
rgb(212, 212, 212)
bg-neutral-400
#a3a3a3
rgb(163, 163, 163)
bg-neutral-500
#737373
rgb(115, 115, 115)
bg-neutral-600
#525252
rgb(82, 82, 82)
bg-neutral-700
#404040
rgb(64, 64, 64)
bg-neutral-800
#262626
rgb(38, 38, 38)
bg-neutral-900
#171717
rgb(23, 23, 23)
bg-neutral-950
#0a0a0a
rgb(10, 10, 10)
bg-stone-50
#fafaf9
rgb(250, 250, 249)
bg-stone-100
#f5f5f4
rgb(245, 245, 244)
bg-stone-200
#e7e5e4
rgb(231, 229, 228)
bg-stone-300
#d6d3d1
rgb(214, 211, 209)
bg-stone-400
#a8a29e
rgb(168, 162, 158)
bg-stone-500
#78716c
rgb(120, 113, 108)
bg-stone-600
#57534e
rgb(87, 83, 78)
bg-stone-700
#44403c
rgb(68, 64, 60)
bg-stone-800
#292524
rgb(41, 37, 36)
bg-stone-900
#1c1917
rgb(28, 25, 23)
bg-stone-950
#0c0a09
rgb(12, 10, 9)
bg-red-50
#fef2f2
rgb(254, 242, 242)
bg-red-100
#fee2e2
rgb(254, 226, 226)
bg-red-200
#fecaca
rgb(254, 202, 202)
bg-red-300
#fca5a5
rgb(252, 165, 165)
bg-red-400
#f87171
rgb(248, 113, 113)
bg-red-500
#ef4444
rgb(239, 68, 68)
bg-red-600
#dc2626
rgb(220, 38, 38)
bg-red-700
#b91c1c
rgb(185, 28, 28)
bg-red-800
#991b1b
rgb(153, 27, 27)
bg-red-900
#991b1b
rgb(153, 27, 27)
bg-orange-50
#fff7ed
rgb(255, 247, 237)
bg-orange-100
#ffedd5
rgb(255, 237, 213)
bg-orange-200
#fed7aa
rgb(254, 215, 170)
bg-orange-300
#fdba74
rgb(253, 186, 116)
bg-orange-400
#fb923c
rgb(251, 146, 60)
bg-orange-500
#f97316
rgb(249, 115, 22)
bg-orange-600
#ea580c
rgb(234, 88, 12)
bg-orange-700
#c2410c
rgb(194, 65, 12)
bg-orange-800
#9a3412
rgb(154, 52, 18)
bg-orange-900
#7c2d12
rgb(124, 45, 18)
bg-orange-950
#431407
rgb(67, 20, 7)
bg-amber-50
#fffbeb
rgb(255, 251, 235)
bg-amber-100
#fef3c7
rgb(254, 243, 199)
bg-amber-200
#fde68a
rgb(253, 230, 138)
bg-amber-300
#fcd34d
rgb(252, 211, 77)
bg-amber-400
#fbbf24
rgb(251, 191, 36)
bg-amber-500
#f59e0b
rgb(245, 158, 11)
bg-amber-600
#d97706
rgb(217, 119, 6)
bg-amber-700
#b45309
rgb(180, 83, 9)
bg-amber-800
#92400e
rgb(146, 64, 14)
bg-amber-900
#78350f
rgb(120, 53, 15)
bg-amber-950
#451a03
rgb(69, 26, 3)
bg-yellow-50
#fefce8
rgb(254, 252, 232)
bg-yellow-100
#fef9c3
rgb(254, 249, 195)
bg-yellow-200
#fef08a
rgb(254, 240, 138)
bg-yellow-300
#fde047
rgb(253, 224, 71)
bg-yellow-400
#facc15
rgb(250, 204, 21)
bg-yellow-500
#eab308
rgb(234, 179, 8)
bg-yellow-600
#ca8a04
rgb(202, 138, 4)
bg-yellow-700
#a16207
rgb(161, 98, 7)
bg-yellow-800
#854d0e
rgb(133, 77, 14)
bg-yellow-900
#78350f
rgb(120, 53, 15)
bg-yellow-950
#451a03
rgb(69, 26, 3)
bg-lime-50
#f7fee7
rgb(247, 254, 231)
bg-lime-100
#ecfccb
rgb(236, 252, 203)
bg-lime-200
#d9f99d
rgb(217, 249, 157)
bg-lime-300
#bef264
rgb(190, 242, 100)
bg-lime-400
#a3e635
rgb(163, 230, 53)
bg-lime-500
#84cc16
rgb(132, 204, 22)
bg-lime-600
#65a30d
rgb(101, 163, 13)
bg-lime-700
#4d7c0f
rgb(77, 124, 15)
bg-lime-800
#3f6212
rgb(63, 98, 18)
bg-lime-900
#365314
rgb(54, 83, 20)
bg-lime-950
#1a2e05
rgb(26, 46, 5)
bg-green-50
#f0fdf4
rgb(240, 253, 244)
bg-green-100
#dcfce7
rgb(220, 252, 231)
bg-green-200
#bbf7d0
rgb(187, 247, 208)
bg-green-300
#86efac
rgb(134, 239, 172)
bg-green-400
#4ade80
rgb(74, 222, 128)
bg-green-500
#22c55e
rgb(34, 197, 94)
bg-green-600
#16a34a
rgb(22, 163, 74)
bg-green-700
#15803d
rgb(21, 128, 61)
bg-green-800
#166534
rgb(22, 101, 52)
bg-green-900
#14532d
rgb(20, 83, 45)
bg-green-950
#052e16
rgb(5, 46, 22)
bg-emerald-50
#ecfdf5
rgb(236, 253, 245)
bg-emerald-100
#d1fae5
rgb(209, 250, 229)
bg-emerald-200
#a7f3d0
rgb(167, 243, 208)
bg-emerald-300
#6ee7b7
rgb(110, 231, 183)
bg-emerald-400
#34d399
rgb(52, 211, 153)
bg-emerald-500
#10b981
rgb(16, 185, 129)
bg-emerald-600
#059669
rgb(5, 150, 105)
bg-emerald-700
#047857
rgb(4, 120, 87)
bg-emerald-800
#065f46
rgb(6, 95, 70)
bg-emerald-900
#052e16
rgb(5, 46, 22)
bg-teal-50
#f0fdfa
rgb(240, 253, 250)
bg-teal-100
#ccfbf1
rgb(204, 251, 241)
bg-teal-200
#99f6e4
rgb(153, 246, 228)
bg-teal-300
#5eead4
rgb(94, 234, 212)
bg-teal-400
#2dd4bf
rgb(45, 212, 191)
bg-teal-500
#14b8a6
rgb(20, 184, 166)
bg-teal-600
#0d9488
rgb(13, 148, 136)
bg-teal-700
#0f766e
rgb(15, 118, 110)
bg-teal-800
#115e59
rgb(17, 94, 89)
bg-teal-900
#134e4a
rgb(19, 78, 74)
bg-teal-950
#042f2e
rgb(4, 47, 46)
bg-cyan-50
#ecfeff
rgb(236, 254, 255)
bg-cyan-100
#cffafe
rgb(207, 250, 254)
bg-cyan-200
#a5f3fc
rgb(165, 243, 252)
bg-cyan-300
#67e8f9
rgb(103, 232, 249)
bg-cyan-400
#22d3ee
rgb(34, 211, 238)
bg-cyan-500
#06b6d4
rgb(6, 182, 212)
bg-cyan-600
#0891b2
rgb(8, 145, 178)
bg-cyan-700
#0e7490
rgb(14, 116, 144)
bg-cyan-800
#155e75
rgb(21, 94, 117)
bg-cyan-900
#164e63
rgb(22, 78, 99)
bg-cyan-950
#083344
rgb(8, 51, 68)
bg-sky-50
#f0f9ff
rgb(240, 249, 255)
bg-sky-100
#e0f2fe
rgb(224, 242, 254)
bg-sky-200
#bae6fd
rgb(186, 230, 253)
bg-sky-300
#7dd3fc
rgb(125, 211, 252)
bg-sky-400
#38bdf8
rgb(56, 189, 248)
bg-sky-500
#0ea5e9
rgb(14, 165, 233)
bg-sky-600
#0284c7
rgb(2, 132, 199)
bg-sky-700
#0369a1
rgb(3, 105, 161)
bg-sky-800
#075985
rgb(7, 89, 133)
bg-sky-900
#0c4a6e
rgb(12, 74, 110)
bg-sky-950
#032d3c
rgb(3, 45, 60)
bg-blue-50
#eff6ff
rgb(239, 246, 255)
bg-blue-100
#dbeafe
rgb(219, 234, 254)
bg-blue-200
#bfdbfe
rgb(191, 219, 254)
bg-blue-300
#93c5fd
rgb(147, 197, 253)
bg-blue-400
#60a5fa
rgb(96, 165, 250)
bg-blue-500
#3b82f6
rgb(59, 130, 246)
bg-blue-600
#2563eb
rgb(37, 99, 235)
bg-blue-700
#1d4ed8
rgb(29, 78, 216)
bg-blue-800
#1e40af
rgb(30, 64, 175)
bg-blue-900
#1e3a8a
rgb(30, 58, 138)
bg-blue-950
#172554
rgb(23, 37, 84)
bg-indigo-50
#eef2ff
rgb(238, 242, 255)
bg-indigo-100
#e0e7ff
rgb(224, 231, 255)
bg-indigo-200
#c7d2fe
rgb(199, 210, 254)
bg-indigo-300
#a5b4fc
rgb(165, 180, 252)
bg-indigo-400
#818cf8
rgb(129, 140, 248)
bg-indigo-500
#6366f1
rgb(99, 102, 241)
bg-indigo-600
#4f46e5
rgb(79, 70, 229)
bg-indigo-700
#4338ca
rgb(67, 56, 202)
bg-indigo-800
#3730a3
rgb(55, 48, 163)
bg-indigo-900
#312e81
rgb(49, 46, 129)
bg-indigo-950
#1e1b4b
rgb(30, 27, 75)
bg-violet-50
#f5f3ff
rgb(245, 243, 255)
bg-violet-100
#ede9fe
rgb(237, 233, 254)
bg-violet-200
#ddd6fe
rgb(221, 214, 254)
bg-violet-300
#c4b5fd
rgb(196, 181, 253)
bg-violet-400
#a78bfa
rgb(167, 139, 250)
bg-violet-500
#8b5cf6
rgb(139, 92, 246)
bg-violet-600
#7c3aed
rgb(124, 58, 237)
bg-violet-700
#6d28d9
rgb(109, 40, 217)
bg-violet-800
#5b21b6
rgb(91, 33, 182)
bg-violet-900
#4c1d95
rgb(76, 29, 149)
bg-violet-950
#381b5c
rgb(56, 27, 92)
bg-fuchsia-50
#fdf4ff
rgb(253, 244, 255)
bg-fuchsia-100
#fae8ff
rgb(250, 232, 255)
bg-fuchsia-200
#f5d0fe
rgb(245, 208, 254)
bg-fuchsia-300
#f0abfc
rgb(240, 171, 252)
bg-fuchsia-400
#e879f9
rgb(232, 121, 249)
bg-fuchsia-500
#d946ef
rgb(217, 70, 239)
bg-fuchsia-600
#c026d3
rgb(192, 38, 211)
bg-fuchsia-700
#a21caf
rgb(162, 28, 175)
bg-fuchsia-800
#86198f
rgb(134, 25, 143)
bg-fuchsia-900
#701a75
rgb(112, 26, 117)
bg-fuchsia-950
#4a044e
rgb(74, 4, 78)
bg-pink-50
#fdf2f8
rgb(253, 242, 248)
bg-pink-100
#fce7f3
rgb(252, 231, 243)
bg-pink-200
#fbcfe8
rgb(251, 207, 232)
bg-pink-300
#f9a8d4
rgb(249, 168, 212)
bg-pink-400
#f472b6
rgb(244, 114, 182)
bg-pink-500
#ec4899
rgb(236, 72, 153)
bg-pink-600
#db2777
rgb(219, 39, 119)
bg-pink-700
#be185d
rgb(190, 24, 93)
bg-pink-800
#9d174d
rgb(157, 23, 77)
bg-pink-900
#831843
rgb(131, 24, 67)
bg-pink-950
#500724
rgb(80, 7, 36)
bg-rose-50
#fff1f2
rgb(255, 241, 242)
bg-rose-100
#ffe4e6
rgb(255, 228, 230)
bg-rose-200
#fecdd3
rgb(254, 205, 211)
bg-rose-300
#fda4af
rgb(253, 164, 175)
bg-rose-400
#fb7185
rgb(251, 113, 133)
bg-rose-500
#f43f5e
rgb(244, 63, 94)
bg-rose-600
#e11d48
rgb(225, 29, 72)
bg-rose-700
#be123c
rgb(190, 18, 60)
bg-rose-800
#9f1239
rgb(159, 18, 57)
bg-rose-900
#831843
rgb(131, 24, 67)
bg-rose-950
#48071e
rgb(72, 9, 31)
bg-purple-50
#faf5ff
rgb(250, 245, 255)
bg-purple-100
#f3e8ff
rgb(243, 232, 255)
bg-purple-200
#e9d5ff
rgb(233, 213, 255)
bg-purple-300
#d8b4fe
rgb(216, 180, 254)
bg-purple-400
#c084fc
rgb(192, 132, 252)
bg-purple-500
#a855f7
rgb(168, 85, 247)
bg-purple-600
#9333ea
rgb(147, 51, 234)
bg-purple-700
#7e22ce
rgb(126, 34, 206)
bg-purple-800
#6b21a8
rgb(107, 33, 168)
bg-purple-900
#581c87
rgb(88, 28, 135)
bg-purple-950
#3b0764
rgb(59, 7, 100)