Tailwind CSS to Hex Converter
Type a Tailwind class like blue-500 into the Tailwind CSS Name field, and the Tailwind CSS to Hex Converter looks up its exact hex value for you. Click Convert and the code appears in Hex Output. Enter a hex value and pick a bit width in the hex to signed integer converter to see its signed decimal equivalent.
Why You'd Look Up a Tailwind Color's Hex Value
Handing Off Between Design and Tailwind CSS Development
Design files and brand guidelines are usually specified in hex, while Tailwind CSS utility classes reference color by name and shade number instead — blue-500, rose-600, emerald-400. When you're translating an existing Tailwind-built interface back into a spec, a legacy stylesheet, or a non-Tailwind tool, you need the actual hex value behind the class name, not just the name itself. A Tailwind color to hex lookup closes that gap instantly. Need a hex equivalent of an RGB color? The rgb to hex converter generates the six-digit code automatically.
Design Tokens That Stay Consistent Across Tools
Hex codes are the one color format every tool understands — image editors, PDF exports, print specs, and CSS preprocessors that don't know what bg-sky-500 means. Looking up the hex behind a Tailwind design token lets you carry the same color out of a Tailwind CSS codebase and into any other part of your stack with zero ambiguity about which shade you meant.
Debugging and Learning Tailwind's Color Palette
When a color on screen doesn't match what you expected, comparing its hex value against the hex behind the Tailwind class you used is the fastest way to catch a typo (blue-500 vs. blue-600) or a stale utility class. It's also a quick way to learn the palette itself — converting a handful of shade numbers to hex makes Tailwind's naming and spacing between shades (400, 500, 600...) concrete instead of abstract.
How the Tailwind CSS to Hex Converter Works
Type a Tailwind color class name — just the color and shade, like blue-500 or emerald-400 — into Tailwind CSS Name. Conversion happens live as you type, or click Convert if you prefer, and the matching six-character code appears in Hex Output. A Copy button copies the result so you can paste it straight into a design file, spec, or stylesheet. The converter looks up your input directly against Tailwind's own published color palette — it's not estimating or guessing a nearest match, since Tailwind's colors are public, documented values, not a proprietary or reverse-engineered dataset. Enter a hex color into the hex to hsl converter to get its hue, saturation, and lightness values instantly.
Tailwind CSS Shade Names to Hex Values — Reference Table
These are Tailwind's own default palette values at the common 500 shade (plus a few frequently used 400/600/900 shades), useful for a quick lookup or to sanity-check what the converter returns:
| Tailwind class | Hex value | Typical use |
|---|---|---|
| gray-500 | #6b7280 | Neutral body text, borders |
| gray-900 | #111827 | Dark interface backgrounds, headings |
| red-500 | #ef4444 | Error states, destructive actions |
| orange-500 | #f97316 | Warnings, highlights |
| yellow-500 | #eab308 | Alerts, badges |
| green-500 | #22c55e | Success states, confirmations |
| emerald-500 | #10b981 | Success accents, positive metrics |
| teal-500 | #14b8a6 | Secondary accents |
| cyan-500 | #06b6d4 | Links, info states |
| blue-500 | #3b82f6 | Primary buttons, links |
| blue-600 | #2563eb | Primary buttons (hover/darker) |
| indigo-500 | #6366f1 | Brand accents |
| purple-500 | #a855f7 | Secondary brand accents |
| pink-500 | #ec4899 | Highlights, badges |
| rose-600 | #e11d48 | Alerts, destructive emphasis |
These values are Tailwind's actual documented defaults — always confirm against the specific Tailwind version your project uses if a shade seems off, since Tailwind occasionally adjusts palette values between major versions.
Worked Examples: Tailwind Color to Hex
Example 1 — Looking Up a Background Shade
You want the hex behind a dark background class:
- Tailwind CSS Name:
gray-900 - Click Convert (or let it convert live as you type)
- Hex Output:
#111827
Example 2 — Looking Up a Text Color Shade
You want the hex behind an accent text color:
- Tailwind CSS Name:
pink-400 - Click Convert
- Hex Output:
#f472b6
Example 3 — Looking Up a Gradient Stop Color
Gradient utilities like from-green-400 reference the same underlying palette as any other Tailwind color class, so they convert the same way:
- Tailwind CSS Name:
green-400 - Click Convert
- Hex Output:
#4ade80
Reverse Direction and Related Color Tools
Going the other way — starting from a hex code and finding the closest Tailwind CSS class name — is handled by the companion Hex to Tailwind CSS Converter on this site. Once you have a Tailwind color's hex value from this page, these related converters can take it further: Hex to RGB Converter and RGB to Hex Converter for RGB channel values, Hex to RGBA Converter and RGBA to Hex Converter when you need an alpha channel, and Hex to CMYK Converter and CMYK to Hex Converter for print-ready color values.
Frequently Asked Questions
Does this tool send my data anywhere?
No, runs entirely client-side.
Is the Tailwind color data accurate?
Yes. Unlike some proprietary color systems, Tailwind CSS's palette is public and openly licensed (MIT), so this converter is built directly from real, documented Tailwind color values rather than an approximated or curated match.