Local Tools Online

Tailwind Colors Reference

Tailwind’s default color palette has 22 color families, each with shades from 50 (near-white) through 950 (near-black), which adds up to well over 200 individual colors — more than anyone reliably keeps in their head. This is a browsable, searchable reference of the full default palette: every color name, every shade number, and the hex/RGB value behind it, with a live swatch so you can actually see the color rather than guess from the name.

Why this one’s a bit different

Most tools on this site exist because you’re feeding in your own data and want it handled locally rather than sent to a server. This one’s simpler than that — there’s no input to protect, since you’re just looking things up. The reason it’s still worth running locally is speed and reliability rather than privacy: the full palette loads once into the browser and every search, filter, and swatch preview happens instantly with no round trip to a server, no loading spinner between searches, and it keeps working even with a flaky connection.

How to use it

  1. Browse by color family (red, orange, amber, and so on through the full 22-family list) to see all shades of that color together, from lightest to darkest.
  2. Search by exact name if you already know it — typing “sky-400” or “emerald-600” jumps straight to that swatch.
  3. Search by approximate hex value if you have a color from a design comp and want to find the closest built-in Tailwind match rather than treating it as a fully custom color.
  4. Click any swatch to copy its class name (bg-sky-400, text-emerald-600, etc.) directly, or copy just the hex value if you need it for a non-Tailwind context.
  5. Toggle between hex, RGB, and HSL display if you’re working in a context that expects a specific color format.
  6. Use the side-by-side comparison view to check contrast or visual similarity between two shades before deciding which fits a design better.

Common situations this solves

  • Checking whether a brand or design-comp color already has a close match in Tailwind’s default palette before treating it as a custom arbitrary value.
  • Picking a shade for hover or focus states that’s consistently one or two steps darker/lighter than a base color, without guessing at the number.
  • Looking up the exact hex value behind a class name seen in someone else’s code, to understand what color is actually being used.
  • Comparing two similarly-named shades (like gray-400 and slate-400) side by side to see how different Tailwind’s neutral families actually are.
  • Quickly referencing the full palette while building a component, without switching to external documentation or digging through a config file.

FAQs

What’s the difference between Tailwind’s gray, slate, zinc, neutral, and stone families? 

They’re all neutral grays but with slightly different undertones — slate leans cool/blue, stone leans warm, zinc and neutral sit closer to true gray, and gray is Tailwind’s original default. Comparing them side by side in the reference makes the subtle difference much clearer than reading hex codes.

Does this reflect a customized theme, or only Tailwind’s defaults? 

Only the default palette that ships with a standard Tailwind installation. If a project has a customized tailwind.config with renamed or adjusted colors, those custom values won’t appear here — this reference is specifically for the out-of-the-box palette.

Why do the shade numbers go from 50 to 950 instead of 100 to 1000? 

That’s simply Tailwind’s naming convention — 50 represents the lightest tint and 950 the darkest, with 100 through 900 as the standard intervals in between; newer Tailwind versions added 950 as an even darker option beyond the original 900 ceiling.

Can I find the closest Tailwind shade to an arbitrary hex code from a design file? 

Yes — the hex search does approximate matching, showing the nearest few shades by visual distance rather than requiring an exact match, which is useful when a designer hands you a color that’s close to, but not exactly, a default Tailwind value.

How do I convert a color I found here into a different format, like HSL, for use outside Tailwind? 

The toggle in the reference itself covers hex, RGB, and HSL directly, but for other formats or more involved conversions, the Color format converter handles a broader range of color notations.

If you’re building a gradient and want to check whether your chosen colors already exist in Tailwind’s palette before treating them as custom, the Tailwind Gradient Generator pulls from the same default palette shown here.