Hex to Tailwind Converter
Convert a hex color like #2563EB into Tailwind CSS arbitrary value syntax such as bg-[#2563EB] — exact, not the nearest named palette guess.
How Hex to Tailwind Conversion Works
Tailwind CSS v3.1 and later support arbitrary value syntax: any utility prefix followed by a value in square brackets, like bg-[#2563EB]. This tool wraps your hex code in that syntax so the class works for the exact color you entered, rather than approximating it with one of Tailwind's named palette swatches.
Hex to Tailwind Example, Step by Step
#2563EB = bg-[#2563EB]
#2563EB (hex) = bg-[#2563EB] (Tailwind)
Hex input: #2563EB Wrap in arbitrary value syntax: [#2563EB] Prefix with a utility: bg-[#2563EB]
| Step | Description | Result |
|---|---|---|
| Take the hex code | #2563EB | #2563EB |
| Wrap in brackets | arbitrary value syntax | [#2563EB] |
| Add a utility prefix | bg-, text-, border-, etc. | bg-[#2563EB] |
Swap the bg- prefix for text-, border-, ring-, fill-, or stroke- to apply the same exact color to a different CSS property.
Common Mistakes With Hex to Tailwind
- Assuming a hex color always maps to a named Tailwind swatch like blue-600 — most hex values fall between named steps.
- Forgetting the # inside the brackets, which produces an invalid class like bg-[2563EB].
- Adding spaces inside the brackets, which Tailwind's JIT compiler won't recognize as a single arbitrary value.
Frequently Asked Questions
How does hex convert to a Tailwind class?
Tailwind CSS v3.1+ supports arbitrary value syntax — wrapping any valid CSS value in square brackets after a utility prefix. A hex color becomes bg-[#2563EB], text-[#2563EB], border-[#2563EB], and so on.
Why not just snap to the nearest Tailwind color like blue-600?
This tool deliberately does not guess the nearest named Tailwind swatch. Named palette colors only approximately match a given hex value, and the palette itself changes between Tailwind versions — arbitrary value syntax is exact for any hex color, every version.
Does arbitrary value syntax work for any utility, not just bg-?
Yes — the [#RRGGBB] pattern works after any color-accepting prefix, including text-, border-, ring-, fill-, and stroke-.
Do I need to include the # inside the brackets?
Yes, Tailwind expects the full CSS color value inside the brackets, including the # for hex colors, e.g. bg-[#2563EB].
Does this work with 3-digit shorthand hex?
Yes — shorthand hex like #25E is expanded to its 6-digit form before being placed in the arbitrary value class.