Tailwind Color Palette

Browse all Tailwind CSS v3 colors. Hover a swatch to copy the hex or class name.

Total Families: 22Visible Families: 22Total Colors: 242Active Query: None

Filter Presets:

Search Palette

Search by name or Hex

Export Palette JSON

slateTailwind v3

100

200

300

400

500

600

700

800

900

950

#F8FAFC

#F1F5F9

#E2E8F0

#CBD5E1

#94A3B8

#64748B

#475569

#334155

#1E293B

#0F172A

#020617

grayTailwind v3

100

200

300

400

500

600

700

800

900

950

#F9FAFB

#F3F4F6

#E5E7EB

#D1D5DB

#9CA3AF

#6B7280

#4B5563

#374151

#1F2937

#111827

#030712

zincTailwind v3

100

200

300

400

500

600

700

800

900

950

#FAFAFA

#F4F4F5

#E4E4E7

#D4D4D8

#A1A1AA

#71717A

#52525B

#3F3F46

#27272A

#18181B

#09090B

neutralTailwind v3

100

200

300

400

500

600

700

800

900

950

#FAFAFA

#F5F5F5

#E5E5E5

#D4D4D4

#A3A3A3

#737373

#525252

#404040

#262626

#171717

#0A0A0A

stoneTailwind v3

100

200

300

400

500

600

700

800

900

950

#FAFAF9

#F5F5F4

#E7E5E4

#D6D3D1

#A8A29E

#78716C

#57534E

#44403C

#292524

#1C1917

#0C0A09

redTailwind v3

100

200

300

400

500

600

700

800

900

950

#FEF2F2

#FEE2E2

#FECACA

#FCA5A5

#F87171

#EF4444

#DC2626

#B91C1C

#991B1B

#7F1D1D

#450A0A

orangeTailwind v3

100

200

300

400

500

600

700

800

900

950

#FFF7ED

#FFEDD5

#FED7AA

#FDBA74

#FB923C

#F97316

#EA580C

#C2410C

#9A3412

#7C2D12

#431407

amberTailwind v3

100

200

300

400

500

600

700

800

900

950

#FFFBEB

#FEF3C7

#FDE68A

#FCD34D

#FBBF24

#F59E0B

#D97706

#B45309

#92400E

#78350F

#451A03

yellowTailwind v3

100

200

300

400

500

600

700

800

900

950

#FEFCE8

#FEF9C3

#FEF08A

#FDE047

#FACC15

#EAB308

#CA8A04

#A16207

#854D0E

#713F12

#422006

limeTailwind v3

100

200

300

400

500

600

700

800

900

950

#F7FEE7

#ECFCCB

#D9F99D

#BEF264

#A3E635

#84CC16

#65A30D

#4D7C0F

#3F6212

#365314

#1A2E05

greenTailwind v3

100

200

300

400

500

600

700

800

900

950

#F0FDF4

#DCFCE7

#BBF7D0

#86EFAC

#4ADE80

#22C55E

#16A34A

#15803D

#166534

#14532D

#052E16

emeraldTailwind v3

100

200

300

400

500

600

700

800

900

950

#ECFDF5

#D1FAE5

#A7F3D0

#6EE7B7

#34D399

#10B981

#059669

#047857

#065F46

#064E3B

#022C22

tealTailwind v3

100

200

300

400

500

600

700

800

900

950

#F0FDFA

#CCFBF1

#99F6E4

#5EEAD4

#2DD4BF

#14B8A6

#0D9488

#0F766E

#115E59

#134E4A

#042F2E

cyanTailwind v3

100

200

300

400

500

600

700

800

900

950

#ECFEFF

#CFFAFE

#A5F3FC

#67E8F9

#22D3EE

#06B6D4

#0891B2

#0E7490

#155E75

#164E63

#083344

skyTailwind v3

100

200

300

400

500

600

700

800

900

950

#F0F9FF

#E0F2FE

#BAE6FD

#7DD3FC

#38BDF8

#0EA5E9

#0284C7

#0369A1

#075985

#0C4A6E

#082F49

blueTailwind v3

100

200

300

400

500

600

700

800

900

950

#EFF6FF

#DBEAFE

#BFDBFE

#93C5FD

#60A5FA

#3B82F6

#2563EB

#1D4ED8

#1E40AF

#1E3A8A

#172554

indigoTailwind v3

100

200

300

400

500

600

700

800

900

950

#EEF2FF

#E0E7FF

#C7D2FE

#A5B4FC

#818CF8

#6366F1

#4F46E5

#4338CA

#3730A3

#312E81

#1E1B4B

violetTailwind v3

100

200

300

400

500

600

700

800

900

950

#F5F3FF

#EDE9FE

#DDD6FE

#C4B5FD

#A78BFA

#8B5CF6

#7C3AED

#6D28D9

#5B21B6

#4C1D95

#2E1065

purpleTailwind v3

100

200

300

400

500

600

700

800

900

950

#FAF5FF

#F3E8FF

#E9D5FF

#D8B4FE

#C084FC

#A855F7

#9333EA

#7E22CE

#6B21A8

#581C87

#3B0764

fuchsiaTailwind v3

100

200

300

400

500

600

700

800

900

950

#FDF4FF

#FAE8FF

#F5D0FE

#F0ABFC

#E879F9

#D946EF

#C026D3

#A21CAF

#86198F

#701A75

#4A044E

pinkTailwind v3

100

200

300

400

500

600

700

800

900

950

#FDF2F8

#FCE7F3

#FBCFE8

#F9A8D4

#F472B6

#EC4899

#DB2777

#BE185D

#9D174D

#831843

#500724

roseTailwind v3

100

200

300

400

500

600

700

800

900

950

#FFF1F2

#FFE4E6

#FECDD3

#FDA4AF

#FB7185

#F43F5E

#E11D48

#BE123C

#9F1239

#881337

#4C0519

Tailwind CSS v3 color palette

Tailwind CSS v3 ships 22 color families (slate through rose), each with 11 shades from 50 (lightest) to 950 (darkest). Hover any swatch to copy the hex value or the Tailwind class name (e.g. text-blue-500, bg-emerald-600). For mixing and blending colors see the color mixer or the color palette generator.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Browsing the palette to find the shade you want without guessing.
Copying a hex value or a class name for a chosen colour.
Comparing shades within one hue to pick a step.
Checking which hue a class name corresponds to.
Finding a colour close to an existing brand value.

Frequently Asked Questions

What do the numeric shade steps mean?: A lightness scale from 50 (lightest) to 950 (darkest), with 500 as the nominal base. The numbering is deliberately sparse so intermediate shades can be added without renumbering.
Are the steps perceptually even?: Closer than a naive lightness ramp, since the palette was tuned by eye rather than generated arithmetically. That is why interpolating between two steps does not reproduce the one in between.
How do I add my own colour?: Through the theme configuration — a full ramp keyed by the same step numbers, so utilities such as `bg-brand-500` are generated. Supplying a single value gives you one utility and no shades.
Which shades pair for accessible text?: As a rule of thumb, a 600 or darker foreground on a 50-100 background clears 4.5:1, and the reverse for dark mode. It is a starting point — the actual ratio still has to be measured.
Why did the default palette change between versions?: The colours were retuned for wider gamut displays and better perceptual spacing, and some names were retired. That is why upgrading can shift shades subtly across a whole interface.

Common errors and gotchas

Assuming the palette is stable, since it has changed between major versions.
Choosing a shade without checking contrast against the text it will carry.
Using a raw palette colour where a semantic token would survive a rebrand.
Picking adjacent shades that are indistinguishable at small sizes.
Assuming a shade number means the same lightness across hues, which it does not.