Unitvio

Tailwind CSS Colors Reference

  • 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-slate-950

    #020617

  • 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-gray-950

    #030712

  • 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-zinc-950

    #09090B

  • 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-neutral-950

    #0A0A0A

  • 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-stone-950

    #0C0A09

  • 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-red-950

    #450A0A

  • 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-orange-950

    #431407

  • 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-amber-950

    #451A03

  • 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-yellow-950

    #422006

  • 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-lime-950

    #1A2E05

  • 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-green-950

    #052E16

  • 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-emerald-950

    #022C22

  • 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-teal-950

    #042F2E

  • 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-cyan-950

    #083344

  • 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-sky-950

    #082F49

  • 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-blue-950

    #172554

  • 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-indigo-950

    #1E1B4B

  • 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-violet-950

    #2E1065

  • 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-purple-950

    #3B0764

  • 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-fuchsia-950

    #4A044E

  • 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-pink-950

    #500724

  • 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

  • bg-rose-950

    #4C0519

How to Use the Tailwind CSS Colors Reference

Tailwind CSS ships with a carefully designed default color palette organized into hue 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 contains eleven steps from 50 (lightest tint) through 950 (darkest shade), providing systematic tonal ranges for backgrounds, text, borders, and rings without custom Hex management.

Search by hue name or shade number to find the exact utility class and Hex value. Click bg-blue-500 to copy the class name; click the swatch to copy #3B82F6. The reference maps every default token so you can verify designs match Tailwind conventions before writing className strings. Extended colors (like the deprecated warmGray renamed to stone) reflect current Tailwind v3+ defaults.

Utility classes follow predictable patterns: bg-{color}-{shade} for backgrounds, text-{color}-{shade} for foreground, border-{color}-{shade} for borders, and ring-{color}-{shade} for focus rings. Opacity modifiers append with slash syntax: bg-blue-500/50 for 50% opacity. Arbitrary values like bg-[#1a2b3c] escape the palette when brand colors fall outside defaults.

Extend the palette in tailwind.config.js with custom brand colors using the shade and tint generator to produce matching 50–950 scales. Use the contrast checker on text-{color}-700 against bg-{color}-50 pairings common in Tailwind UI patterns to verify WCAG compliance.

Whether you are building a new Tailwind project, translating a Figma design into utility classes, or comparing default blues against your brand primary, this reference eliminates config spelunking and documentation tab switching.

Common use cases

  • Tailwind project setup

    Pick default palette colors for layout, typography, and components without opening tailwind.config.js.

  • Design-to-code handoff

    Map Figma Hex values to nearest Tailwind classes for consistent utility-class implementation.

  • Component library docs

    Document which Tailwind color tokens each component variant uses with accurate Hex references.

  • Custom theme planning

    Compare default Tailwind hues against brand colors before deciding which families to override.

Frequently asked questions

50 is the lightest tint, 500 is the base mid-tone, and 950 is the darkest shade in each hue family.

Extend theme.colors in tailwind.config.js. Use the shade generator to build a matching 50–950 scale.

The default palette matches Tailwind CSS v3 and v4 core color tokens including renamed gray families.

Related color tools