About Tailwind Color Palette

Full Tailwind CSS v3 color palette — 18 families × 11 shades, searchable. Part of the DevTools Surf developer suite. Browse more tools in the Color collection.

Use Cases

• Pick the right Tailwind class for a mockup color
• Reference exact hex values for design specs
• Compare shades side-by-side when building a dark-mode palette
• Export palette references to share with designers

Tips

• 18 color families × 11 shades (50–950)
• Filter by family name: blue, emerald, slate, etc.
• Each shade maps directly to bg-blue-500 / text-blue-500 utilities

Fun Facts

• Tailwind CSS v4 keeps the same 18 families but added a new OKLCH-based color engine for perceptually uniform shades.
• Tailwind's default palette was hand-tuned by Steve Schoger (Refactoring UI) — each shade was individually adjusted rather than algorithmically generated.
• The 500 shade in each Tailwind family is designed to be the 'base' color that works on both white and dark backgrounds without accessibility issues.

FAQ

What's the full palette?

18 color families (slate, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, rose). Each has 11 shades (50, 100, 200... 900, 950).

Is this the v3 or v4 palette?

v3.4 as displayed. Tailwind v4 adds a slightly refined palette with more consistent perceptual spacing.

Can I search by hex?

Yes — paste any hex and get the closest Tailwind class. Useful for matching existing designs to Tailwind utilities.

Which neutrals should I use?

Slate for cool blue-gray, gray for pure gray, zinc for warm-gray. Default to slate or zinc for modern web designs.