Skip to content

Instantly share code, notes, and snippets.

@AustineA
Forked from guvener/tw-background-hex.md
Created May 18, 2024 13:52
Show Gist options
  • Save AustineA/9d34e253109eeeaaeb182fb517e8ce66 to your computer and use it in GitHub Desktop.
Save AustineA/9d34e253109eeeaaeb182fb517e8ce66 to your computer and use it in GitHub Desktop.
Tailwind background colors HEX codes

Documentation uses RGB. https://tailwindcss.com/docs/background-color

bg-black : #000000
bg-white : #FFFFFF
bg-slate-50 : #F8FAFC
bg-slate-100 : #F1F5F9
bg-slate-200 : #E2E8F0
bg-slate-300 : #CBD5E1
bg-slate-400 : #94A3B8
bg-slate-500 : #64748B
bg-slate-600 : #475569
bg-slate-700 : #334155
bg-slate-800 : #1E293B
bg-slate-900 : #0F172A
bg-gray-50 : #F9FAFB
bg-gray-100 : #F3F4F6
bg-gray-200 : #E5E7EB
bg-gray-300 : #D1D5DB
bg-gray-400 : #9CA3AF
bg-gray-500 : #6B7280
bg-gray-600 : #4B5563
bg-gray-700 : #374151
bg-gray-800 : #1F2937
bg-gray-900 : #111827
bg-zinc-50 : #FAFAFA
bg-zinc-100 : #F4F4F5
bg-zinc-200 : #E4E4E7
bg-zinc-300 : #D4D4D8
bg-zinc-400 : #A1A1AA
bg-zinc-500 : #71717A
bg-zinc-600 : #52525B
bg-zinc-700 : #3F3F46
bg-zinc-800 : #27272A
bg-zinc-900 : #18181B
bg-neutral-50 : #FAFAFA
bg-neutral-100 : #F5F5F5
bg-neutral-200 : #E5E5E5
bg-neutral-300 : #D4D4D4
bg-neutral-400 : #A3A3A3
bg-neutral-500 : #737373
bg-neutral-600 : #525252
bg-neutral-700 : #404040
bg-neutral-800 : #262626
bg-neutral-900 : #171717
bg-stone-50 : #FAFAF9
bg-stone-100 : #F5F5F4
bg-stone-200 : #E7E5E4
bg-stone-300 : #D6D3D1
bg-stone-400 : #A8A29E
bg-stone-500 : #78716C
bg-stone-600 : #57534E
bg-stone-700 : #44403C
bg-stone-800 : #292524
bg-stone-900 : #1C1917
bg-red-50 : #FEF2F2
bg-red-100 : #FEE2E2
bg-red-200 : #FECACA
bg-red-300 : #FCA5A5
bg-red-400 : #F87171
bg-red-500 : #EF4444
bg-red-600 : #DC2626
bg-red-700 : #B91C1C
bg-red-800 : #991B1B
bg-red-900 : #7F1D1D
bg-orange-50 : #FFF7ED
bg-orange-100 : #FFEDD5
bg-orange-200 : #FED7AA
bg-orange-300 : #FDBA74
bg-orange-400 : #FB923C
bg-orange-500 : #F97316
bg-orange-600 : #EA580C
bg-orange-700 : #C2410C
bg-orange-800 : #9A3412
bg-orange-900 : #7C2D12
bg-amber-50 : #FFFBEB
bg-amber-100 : #FEF3C7
bg-amber-200 : #FDE68A
bg-amber-300 : #FCD34D
bg-amber-400 : #FBBF24
bg-amber-500 : #F59E0B
bg-amber-600 : #D97706
bg-amber-700 : #B45309
bg-amber-800 : #92400E
bg-amber-900 : #78350F
bg-yellow-50 : #FEFCE8
bg-yellow-100 : #FEF9C3
bg-yellow-200 : #FEF08A
bg-yellow-300 : #FDE047
bg-yellow-400 : #FACC15
bg-yellow-500 : #EAB308
bg-yellow-600 : #CA8A04
bg-yellow-700 : #A16207
bg-yellow-800 : #854D0E
bg-yellow-900 : #713F12
bg-lime-50 : #F7FEE7
bg-lime-100 : #ECFCCB
bg-lime-200 : #D9F99D
bg-lime-300 : #BEF264
bg-lime-400 : #A3E635
bg-lime-500 : #84CC16
bg-lime-600 : #65A30D
bg-lime-700 : #4D7C0F
bg-lime-800 : #3F6212
bg-lime-900 : #365314
bg-green-50 : #F0FDF4
bg-green-100 : #DCFCE7
bg-green-200 : #BBF7D0
bg-green-300 : #86EFAC
bg-green-400 : #4ADE80
bg-green-500 : #22C55E
bg-green-600 : #16A34A
bg-green-700 : #15803D
bg-green-800 : #166534
bg-green-900 : #14532D
bg-emerald-50 : #ECFDF5
bg-emerald-100 : #D1FAE5
bg-emerald-200 : #A7F3D0
bg-emerald-300 : #6EE7B7
bg-emerald-400 : #34D399
bg-emerald-500 : #10B981
bg-emerald-600 : #059669
bg-emerald-700 : #047857
bg-emerald-800 : #065F46
bg-emerald-900 : #064E3B
bg-teal-50 : #F0FDFA
bg-teal-100 : #CCFBF1
bg-teal-200 : #99F6E4
bg-teal-300 : #5EEAD4
bg-teal-400 : #2DD4BF
bg-teal-500 : #14B8A6
bg-teal-600 : #0D9488
bg-teal-700 : #0F766E
bg-teal-800 : #115E59
bg-teal-900 : #134E4A
bg-cyan-50 : #ECFEFF
bg-cyan-100 : #CFFAFE
bg-cyan-200 : #A5F3FC
bg-cyan-300 : #67E8F9
bg-cyan-400 : #22D3EE
bg-cyan-500 : #06B6D4
bg-cyan-600 : #0891B2
bg-cyan-700 : #0E7490
bg-cyan-800 : #155E75
bg-cyan-900 : #164E63
bg-sky-50 : #F0F9FF
bg-sky-100 : #E0F2FE
bg-sky-200 : #BAE6FD
bg-sky-300 : #7DD3FC
bg-sky-400 : #38BDF8
bg-sky-500 : #0EA5E9
bg-sky-600 : #0284C7
bg-sky-700 : #0369A1
bg-sky-800 : #075985
bg-sky-900 : #0C4A6E
bg-blue-50 : #EFF6FF
bg-blue-100 : #DBEAFE
bg-blue-200 : #BFDBFE
bg-blue-300 : #93C5FD
bg-blue-400 : #60A5FA
bg-blue-500 : #3B82F6
bg-blue-600 : #2563EB
bg-blue-700 : #1D4ED8
bg-blue-800 : #1E40AF
bg-blue-900 : #1E3A8A
bg-indigo-50 : #EEF2FF
bg-indigo-100 : #E0E7FF
bg-indigo-200 : #C7D2FE
bg-indigo-300 : #A5B4FC
bg-indigo-400 : #818CF8
bg-indigo-500 : #6366F1
bg-indigo-600 : #4F46E5
bg-indigo-700 : #4338CA
bg-indigo-800 : #3730A3
bg-indigo-900 : #312E81
bg-violet-50 : #F5F3FF
bg-violet-100 : #EDE9FE
bg-violet-200 : #DDD6FE
bg-violet-300 : #C4B5FD
bg-violet-400 : #A78BFA
bg-violet-500 : #8B5CF6
bg-violet-600 : #7C3AED
bg-violet-700 : #6D28D9
bg-violet-800 : #5B21B6
bg-violet-900 : #4C1D95
bg-purple-50 : #FAF5FF
bg-purple-100 : #F3E8FF
bg-purple-200 : #E9D5FF
bg-purple-300 : #D8B4FE
bg-purple-400 : #C084FC
bg-purple-500 : #A855F7
bg-purple-600 : #9333EA
bg-purple-700 : #7E22CE
bg-purple-800 : #6B21A8
bg-purple-900 : #581C87
bg-fuchsia-50 : #FDF4FF
bg-fuchsia-100 : #FAE8FF
bg-fuchsia-200 : #F5D0FE
bg-fuchsia-300 : #F0ABFC
bg-fuchsia-400 : #E879F9
bg-fuchsia-500 : #D946EF
bg-fuchsia-600 : #C026D3
bg-fuchsia-700 : #A21CAF
bg-fuchsia-800 : #86198F
bg-fuchsia-900 : #701A75
bg-pink-50 : #FDF2F8
bg-pink-100 : #FCE7F3
bg-pink-200 : #FBCFE8
bg-pink-300 : #F9A8D4
bg-pink-400 : #F472B6
bg-pink-500 : #EC4899
bg-pink-600 : #DB2777
bg-pink-700 : #BE185D
bg-pink-800 : #9D174D
bg-pink-900 : #831843
bg-rose-50 : #FFF1F2
bg-rose-100 : #FFE4E6
bg-rose-200 : #FECDD3
bg-rose-300 : #FDA4AF
bg-rose-400 : #FB7185
bg-rose-500 : #F43F5E
bg-rose-600 : #E11D48
bg-rose-700 : #BE123C
bg-rose-800 : #9F1239
bg-rose-900 : #881337
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment