Tailwind to Hex Converter
Convert a Tailwind arbitrary value class like bg-[#2563EB] back into a plain 6-digit hex color code you can paste into any design tool or CSS file.
How Tailwind to Hex Conversion Works
A Tailwind arbitrary value class like bg-[#2563EB] contains the raw CSS value inside square brackets. This tool extracts that value and returns the plain 6-digit hex code, #2563EB — it also accepts a bare hex code with no class wrapper at all.
Tailwind to Hex Example, Step by Step
bg-[#2563EB] = #2563EB
bg-[#2563EB] (Tailwind) = #2563EB (hex)
Class: bg-[#2563EB] Strip the prefix: [#2563EB] Strip the brackets: #2563EB
| Step | Description | Result |
|---|---|---|
| Take the Tailwind class | bg-[#2563EB] | bg-[#2563EB] |
| Locate the bracketed value | content between [ and ] | #2563EB |
| Return the hex code | already includes # | #2563EB |
The utility prefix (bg-, text-, border-, ...) is ignored entirely — only the bracketed value matters for extracting the color.
Common Mistakes With Tailwind to Hex
- Pasting a named palette class like bg-blue-600, which has no hex value embedded in the class name itself.
- Including surrounding quotes from a className string, which aren't part of the class name.
- Assuming the prefix (bg-, text-, ...) changes the extracted hex value — it doesn't, only the brackets matter.
Frequently Asked Questions
How does this tool extract hex from a Tailwind class?
It reads the value inside the square brackets of an arbitrary value class like bg-[#2563EB] and returns just the hex code, #2563EB.
Does it work with any utility prefix?
Yes — bg-[#2563EB], text-[#2563EB], border-[#2563EB], and similar prefixed arbitrary value classes all extract the same hex code.
What if I paste a bare hex code instead of a full class?
It's also accepted directly — if there are no brackets to extract from, the tool treats the input as a hex code and normalizes it.
Does this work with named Tailwind colors like bg-blue-600?
No — named palette classes like blue-600 aren't hex values themselves, they resolve to a hex value through Tailwind's config, so there's nothing to extract directly from the class name.
Why would I need to reverse a Tailwind class back to hex?
It's useful when you're handed a component's className and need the underlying color value for a design spec, a different codebase, or a non-Tailwind tool.