CodeKitHubWhat Is This Tool?
Tailwind CSS ships a fixed default color scale rather than letting you pick arbitrary values for common UI colors. Each of the 22 named families (like amber or slate) has exactly 11 shades, numbered 50 through 950, and every shade has one official hex value that's documented by Tailwind itself and used identically across bg-, text-, border- and ring- utilities.
This reference embeds that full official palette locally, so looking up a color or a class name doesn't require opening Tailwind's docs, running a build, or shipping the class through PurgeCSS just to see what it looks like. Hex lookups use RGB Euclidean distance to find the nearest official shade, and class lookups are exact — every value here matches Tailwind's documented defaults.
Why Use It?
- Paste a hex code from a design file or screenshot and instantly get the closest Tailwind class name, instead of guessing which numbered shade it corresponds to.
- Type a class name like slate-900 or bg-purple-500 to see its exact hex and RGB value without digging through Tailwind's docs.
- Browse the full 22-family x 11-shade grid to compare shades side by side before picking one.
- Get the bg-, text-, border- and ring- variants for any shade in one click, since Tailwind uses the same numeric scale across all of them.
- Free, instant, and fully local — no upload, no account, no build step.
How to Use
- To find a class name from a hex code: type or paste the hex value (with or without #) into the search box — the closest official Tailwind shade appears above the grid, along with the color distance if it isn't an exact match.
- To find a hex value from a class name: type the class or family name (e.g. amber-500, bg-blue-600, or just teal) — an exact match shows the hex, RGB and all utility variants; a family name alone filters the grid to that family.
- To browse everything: leave the search box empty and click any swatch in the grid — its details appear in the panel above and its hex code is copied automatically.
- Click any of the bg-/text-/border-/ring- variant buttons in the detail panel to copy that exact class name.
Example
Input
#c4b5fdOutput
violet-300 — Exact match, #C4B5FD, rgb(196, 181, 253)This hex is one of Tailwind's own documented default values, so the distance is 0 and the match is exact rather than approximate.
Frequently Asked Questions
Are these the official Tailwind CSS default colors?
Yes — all 242 hex values (22 families x 11 shades) come from Tailwind's own documented default palette. Tailwind v4 represents colors internally as OKLCH, but the same default palette and its documented hex equivalents are unchanged from v3, so these values are current for either version.
What does it mean when a hex lookup isn't an exact match?
If you paste a hex code that isn't one of Tailwind's 242 default values (a custom brand color, for example), the tool shows the closest official shade by RGB distance and labels it "Closest match" with the distance shown — it won't be pixel-identical to your input, just the nearest Tailwind default.
Why do bg-, text-, border- and ring- all use the same numbers?
Tailwind applies one shared color scale across every utility category, so bg-amber-500, text-amber-500, border-amber-500 and ring-amber-500 are all the same underlying hex value applied to a different CSS property. That's why the detail panel shows all four variants together for any shade you look up.
Can I look up a 3-family group like just "blue" without a shade number?
Yes — typing a family name alone (no number) filters the grid down to just that family's 11 shades so you can compare them side by side, without picking one specific shade yet.
Does this cover custom Tailwind theme colors I've defined in my config?
No — this reference only covers Tailwind's built-in default palette, not colors you've added or overridden in a tailwind.config.js theme.extend.colors block or a v4 @theme block. If your project customizes the palette, your actual rendered colors may differ from what's shown here for the same class name.