Tailwind CSS to Hex Converter

Need the exact color behind a utility class? This Tailwind CSS to hex converter turns a class such as bg-emerald-600 into its hex value, so you can reuse any shade from the Tailwind palette in plain CSS, design files and brand documents. Copy the class from your HTML, press Convert, and read the six-digit code you need for the next step.

What Is a Tailwind CSS to Hex Converter?

A Tailwind to hex converter reads a Tailwind class such as text-slate-700, strips the prefix, and looks the remaining shade up in the default palette. The result is a hex color code: a six-digit value that every browser, design app and CSS preprocessor understands. A Tailwind color utility is just a color family plus a number, so emerald-600 means the emerald family at a medium-dark intensity.

Each class is a Tailwind token pointing at one fixed color value. Tailwind keeps the names semantic and hides the numbers; a hex code does the opposite. Moving between the two is what a color converter exists for, and it saves you from opening the docs every time you need a value for style guides. Every Tailwind CSS color is addressed through a Tailwind color class, and the converter holds all the Tailwind color classes in one table. Pair each class with its hex and you have a reusable color token, and a consistent set of colors across a team.

Tailwind Color to Hex Color Code: Worked Example

Here are a few examples of how it plays out. Say a handoff note says the primary button uses bg-emerald-600. Dropping that class into the converter returns #059669. A hex color code is three pairs of digits, one pair each for red, green and blue. Each pair is a base-16 number, so:

$$\text{channel} = 16 \times d_1 + d_2$$

For #059669 that gives red \(16 \times 0 + 5 = 5\), green \(16 \times 9 + 6 = 150\) and blue \(16 \times 6 + 9 = 105\).

From hex to RGB values

Those three channels are the RGB values of the shade: rgb(5, 150, 105). The same arithmetic is how any hex to RGB tool works, and running it backwards is RGB to hex. Because hex is just numeric RGB written in base 16, the two notations never disagree about a shade.

Other formats are derived from the same triple. HSL re-expresses it as hue, saturation and lightness, while RGBA and HSLA add an alpha channel for transparency.

Opacity utilities and eight-digit hex

Tailwind's opacity utilities use a slash, as in bg-emerald-600/80. The base shade is unchanged and the opacity becomes an alpha pair, so 80 percent of 255 is 204, which is CC. The eight-digit result is #059669CC. If your destination ignores alpha, use the six-digit code and set the opacity separately.

Hex to Tailwind: Finding the Closest Color

Going the other direction is a nearest-match problem, because most brand hex codes are not an exact Tailwind shade. A hex to Tailwind tool converts your hex to RGB, then measures how far it sits from every shade in the Tailwind color palette.

Nearest Tailwind color and Euclidean distance

The simplest measure is Euclidean distance in RGB space:

$$d = \sqrt{(r_1 - r_2)^2 + (g_1 - g_2)^2 + (b_1 - b_2)^2}$$

Take a brand green of #0B8F63, which is (11, 143, 99). Against emerald-600 at (5, 150, 105) the gaps are 6, 7 and 6, so \(d = \sqrt{36 + 49 + 36} = 11\). The next candidates sit much further away: green-600 is 33.9 and teal-600 is 37.4. The closest color is the winner, so you can say that emerald-600 is the nearest Tailwind color. Some tools use Delta E instead, a perceptual score where a result above 1 is visible to the human eye.

Custom Tailwind color and the tailwind config

If your project overrides the palette, the converter's built-in values no longer apply. A custom Tailwind color lives in your Tailwind config, so read the hex from there directly instead of trusting a generic lookup.

Features of a Tailwind to Hex Converter Tool

A good tool does more than a lookup. Look for these:

• Parsing of every color-bearing prefix, not just bg-.
• A built-in palette object with every family and shade.
• An instant preview, plus one-click copy for the hex code.
• A clear error message when the input is empty or invalid.
• A clear button, so you can run the next lookup without reloading.

The lookup itself should be instant, since it is a single read from the tonal palette of each family. An invalid class such as bg-emerald-650 should return a message rather than a guess.

Practical Use Cases for Designers and Developers

Anyone building with Tailwind reaches for the converter whenever a class has to leave the framework, whether that is a UI component, a stylesheet, JSX markup or a quick HTML prototype. A single designer or a whole team gets the same answer, and the workflow stays consistent across projects, so every workflows document stays in sync with the real colors in use.

Figma, Sketch and other design tools

Designers paste a hex code into Figma or Sketch to build a color style. These design tools rarely understand Tailwind names, so a quick conversion removes the guesswork. A color picker in the same app can then verify the result, and brand colors pulled from moodboards go through the same route.

Legacy CSS, refactoring and migration

During a migration to utility classes, developers map each hard-coded value in legacy CSS to its nearest class, and map a class back out when it has to leave Tailwind, a task that makes any refactoring far less error-prone. Teams with older legacy codebases save hours when they can map each value to a class in a few seconds.

Print, paint and cross-platform branding

Physical work needs a different model. A print shop or paint supplier may only accept hex or CMYK, so a Tailwind class has to be turned into hex first. The same value then carries into email templates, React Native styles and any other place that cannot read utility classes. This is core branding work, and it connects design and development teams.

Contrast checks use the same codes. Hex values can be fed into a contrast calculator to confirm that the text and background pair is readable before it ships.