TFMKIT Logo
Tailwind CSS

Tailwind

Colors

Full Palette

Browse the complete Tailwind CSS color palette. Click any color to copy its value as Tailwind class, HEX, RGB, or HSL.

242

Colors

Free

Open Source

/
242
slate gray

slate-50

#f8fafc

Click to copy

slate-100

#f1f5f9

Click to copy

slate-200

#e2e8f0

Click to copy

slate-300

#cbd5e1

Click to copy

slate-400

#94a3b8

Click to copy

slate-500

#64748b

Click to copy

slate-600

#475569

Click to copy

slate-700

#334155

Click to copy

slate-800

#1e293b

Click to copy

slate-900

#0f172a

Click to copy

slate-950

#020617

Click to copy
gray gray

gray-50

#f9fafb

Click to copy

gray-100

#f3f4f6

Click to copy

gray-200

#e5e7eb

Click to copy

gray-300

#d1d5db

Click to copy

gray-400

#9ca3af

Click to copy

gray-500

#6b7280

Click to copy

gray-600

#4b5563

Click to copy

gray-700

#374151

Click to copy

gray-800

#1f2937

Click to copy

gray-900

#111827

Click to copy

gray-950

#030712

Click to copy
zinc gray

zinc-50

#fafafa

Click to copy

zinc-100

#f4f4f5

Click to copy

zinc-200

#e4e4e7

Click to copy

zinc-300

#d4d4d8

Click to copy

zinc-400

#a1a1aa

Click to copy

zinc-500

#71717a

Click to copy

zinc-600

#52525b

Click to copy

zinc-700

#3f3f46

Click to copy

zinc-800

#27272a

Click to copy

zinc-900

#18181b

Click to copy

zinc-950

#09090b

Click to copy
neutral gray

neutral-50

#fafafa

Click to copy

neutral-100

#f5f5f5

Click to copy

neutral-200

#e5e5e5

Click to copy

neutral-300

#d4d4d4

Click to copy

neutral-400

#a3a3a3

Click to copy

neutral-500

#737373

Click to copy

neutral-600

#525252

Click to copy

neutral-700

#404040

Click to copy

neutral-800

#262626

Click to copy

neutral-900

#171717

Click to copy

neutral-950

#0a0a0a

Click to copy
stone gray

stone-50

#fafaf9

Click to copy

stone-100

#f5f5f4

Click to copy

stone-200

#e7e5e4

Click to copy

stone-300

#d6d3d1

Click to copy

stone-400

#a8a29e

Click to copy

stone-500

#78716c

Click to copy

stone-600

#57534e

Click to copy

stone-700

#44403c

Click to copy

stone-800

#292524

Click to copy

stone-900

#1c1917

Click to copy

stone-950

#0c0a09

Click to copy
red warm

red-50

#fef2f2

Click to copy

red-100

#fee2e2

Click to copy

red-200

#fecaca

Click to copy

red-300

#fca5a5

Click to copy

red-400

#f87171

Click to copy

red-500

#ef4444

Click to copy

red-600

#dc2626

Click to copy

red-700

#b91c1c

Click to copy

red-800

#991b1b

Click to copy

red-900

#7f1d1d

Click to copy

red-950

#450a0a

Click to copy
orange warm

orange-50

#fff7ed

Click to copy

orange-100

#ffedd5

Click to copy

orange-200

#fed7aa

Click to copy

orange-300

#fdba74

Click to copy

orange-400

#fb923c

Click to copy

orange-500

#f97316

Click to copy

orange-600

#ea580c

Click to copy

orange-700

#c2410c

Click to copy

orange-800

#9a3412

Click to copy

orange-900

#7c2d12

Click to copy

orange-950

#431407

Click to copy
amber warm

amber-50

#fffbeb

Click to copy

amber-100

#fef3c7

Click to copy

amber-200

#fde68a

Click to copy

amber-300

#fcd34d

Click to copy

amber-400

#fbbf24

Click to copy

amber-500

#f59e0b

Click to copy

amber-600

#d97706

Click to copy

amber-700

#b45309

Click to copy

amber-800

#92400e

Click to copy

amber-900

#78350f

Click to copy

amber-950

#451a03

Click to copy
yellow warm

yellow-50

#fefce8

Click to copy

yellow-100

#fef9c3

Click to copy

yellow-200

#fef08a

Click to copy

yellow-300

#fde047

Click to copy

yellow-400

#facc15

Click to copy

yellow-500

#eab308

Click to copy

yellow-600

#ca8a04

Click to copy

yellow-700

#a16207

Click to copy

yellow-800

#854d0e

Click to copy

yellow-900

#713f12

Click to copy

yellow-950

#422006

Click to copy
lime green

lime-50

#f7fee7

Click to copy

lime-100

#ecfccb

Click to copy

lime-200

#d9f99d

Click to copy

lime-300

#bef264

Click to copy

lime-400

#a3e635

Click to copy

lime-500

#84cc16

Click to copy

lime-600

#65a30d

Click to copy

lime-700

#4d7c0f

Click to copy

lime-800

#3f6212

Click to copy

lime-900

#365314

Click to copy

lime-950

#1a2e05

Click to copy
green green

green-50

#f0fdf4

Click to copy

green-100

#dcfce7

Click to copy

green-200

#bbf7d0

Click to copy

green-300

#86efac

Click to copy

green-400

#4ade80

Click to copy

green-500

#22c55e

Click to copy

green-600

#16a34a

Click to copy

green-700

#15803d

Click to copy

green-800

#166534

Click to copy

green-900

#14532d

Click to copy

green-950

#052e16

Click to copy
emerald green

emerald-50

#ecfdf5

Click to copy

emerald-100

#d1fae5

Click to copy

emerald-200

#a7f3d0

Click to copy

emerald-300

#6ee7b7

Click to copy

emerald-400

#34d399

Click to copy

emerald-500

#10b981

Click to copy

emerald-600

#059669

Click to copy

emerald-700

#047857

Click to copy

emerald-800

#065f46

Click to copy

emerald-900

#064e3b

Click to copy

emerald-950

#022c22

Click to copy
teal green

teal-50

#f0fdfa

Click to copy

teal-100

#ccfbf1

Click to copy

teal-200

#99f6e4

Click to copy

teal-300

#5eead4

Click to copy

teal-400

#2dd4bf

Click to copy

teal-500

#14b8a6

Click to copy

teal-600

#0d9488

Click to copy

teal-700

#0f766e

Click to copy

teal-800

#115e59

Click to copy

teal-900

#134e4a

Click to copy

teal-950

#042f2e

Click to copy
cyan blue

cyan-50

#ecfeff

Click to copy

cyan-100

#cffafe

Click to copy

cyan-200

#a5f3fc

Click to copy

cyan-300

#67e8f9

Click to copy

cyan-400

#22d3ee

Click to copy

cyan-500

#06b6d4

Click to copy

cyan-600

#0891b2

Click to copy

cyan-700

#0e7490

Click to copy

cyan-800

#155e75

Click to copy

cyan-900

#164e63

Click to copy

cyan-950

#083344

Click to copy
sky blue

sky-50

#f0f9ff

Click to copy

sky-100

#e0f2fe

Click to copy

sky-200

#bae6fd

Click to copy

sky-300

#7dd3fc

Click to copy

sky-400

#38bdf8

Click to copy

sky-500

#0ea5e9

Click to copy

sky-600

#0284c7

Click to copy

sky-700

#0369a1

Click to copy

sky-800

#075985

Click to copy

sky-900

#0c4a6e

Click to copy

sky-950

#082f49

Click to copy
blue blue

blue-50

#eff6ff

Click to copy

blue-100

#dbeafe

Click to copy

blue-200

#bfdbfe

Click to copy

blue-300

#93c5fd

Click to copy

blue-400

#60a5fa

Click to copy

blue-500

#3b82f6

Click to copy

blue-600

#2563eb

Click to copy

blue-700

#1d4ed8

Click to copy

blue-800

#1e40af

Click to copy

blue-900

#1e3a8a

Click to copy

blue-950

#172554

Click to copy
indigo blue

indigo-50

#eef2ff

Click to copy

indigo-100

#e0e7ff

Click to copy

indigo-200

#c7d2fe

Click to copy

indigo-300

#a5b4fc

Click to copy

indigo-400

#818cf8

Click to copy

indigo-500

#6366f1

Click to copy

indigo-600

#4f46e5

Click to copy

indigo-700

#4338ca

Click to copy

indigo-800

#3730a3

Click to copy

indigo-900

#312e81

Click to copy

indigo-950

#1e1b4b

Click to copy
violet purple

violet-50

#f5f3ff

Click to copy

violet-100

#ede9fe

Click to copy

violet-200

#ddd6fe

Click to copy

violet-300

#c4b5fd

Click to copy

violet-400

#a78bfa

Click to copy

violet-500

#8b5cf6

Click to copy

violet-600

#7c3aed

Click to copy

violet-700

#6d28d9

Click to copy

violet-800

#5b21b6

Click to copy

violet-900

#4c1d95

Click to copy

violet-950

#2e1065

Click to copy
purple purple

purple-50

#faf5ff

Click to copy

purple-100

#f3e8ff

Click to copy

purple-200

#e9d5ff

Click to copy

purple-300

#d8b4fe

Click to copy

purple-400

#c084fc

Click to copy

purple-500

#a855f7

Click to copy

purple-600

#9333ea

Click to copy

purple-700

#7e22ce

Click to copy

purple-800

#6b21a8

Click to copy

purple-900

#581c87

Click to copy

purple-950

#3b0764

Click to copy
fuchsia purple

fuchsia-50

#fdf4ff

Click to copy

fuchsia-100

#fae8ff

Click to copy

fuchsia-200

#f5d0fe

Click to copy

fuchsia-300

#f0abfc

Click to copy

fuchsia-400

#e879f9

Click to copy

fuchsia-500

#d946ef

Click to copy

fuchsia-600

#c026d3

Click to copy

fuchsia-700

#a21caf

Click to copy

fuchsia-800

#86198f

Click to copy

fuchsia-900

#701a75

Click to copy

fuchsia-950

#4a044e

Click to copy
pink purple

pink-50

#fdf2f8

Click to copy

pink-100

#fce7f3

Click to copy

pink-200

#fbcfe8

Click to copy

pink-300

#f9a8d4

Click to copy

pink-400

#f472b6

Click to copy

pink-500

#ec4899

Click to copy

pink-600

#db2777

Click to copy

pink-700

#be185d

Click to copy

pink-800

#9d174d

Click to copy

pink-900

#831843

Click to copy

pink-950

#500724

Click to copy
rose purple

rose-50

#fff1f2

Click to copy

rose-100

#ffe4e6

Click to copy

rose-200

#fecdd3

Click to copy

rose-300

#fda4af

Click to copy

rose-400

#fb7185

Click to copy

rose-500

#f43f5e

Click to copy

rose-600

#e11d48

Click to copy

rose-700

#be123c

Click to copy

rose-800

#9f1239

Click to copy

rose-900

#881337

Click to copy

rose-950

#4c0519

Click to copy

Tailwind

Color Palette

The complete Tailwind CSS color palette with all 22 color families and 11 shades each. Perfect for web development, UI design, and brand consistency.

Tailwind v3.4 22 Families 242 Colors Copy & Paste