Skip to content
ToolQivo

Tailwind Color to HEX Converter

Any Tailwind CSS colour class as HEX — v3 and v4 — or the nearest class for a HEX.

Converters Reviews Free · no sign-up

Prefixes such as bg-, text-, border-, ring-, variants such as hover: and opacity such as /50 are understood. Click any swatch below.

HEX
—

Quick Tool Overview

The Tailwind Color to HEX Converter turns Tailwind CSS colour classes into HEX and RGB for v3 and v4 — including prefixes, variants and opacity — and finds the nearest Tailwind class for any colour.

What it does
Converts Tailwind colour classes to HEX
You give it
A class such as bg-sky-500/50, or a HEX
You get back
HEX, RGB, OKLCH or the nearest classes
Best for
Handing Tailwind colours to design and other tools
Converters Free, unlimited use No sign-up Runs in your browser

About the Tailwind Color to HEX Converter

Tailwind CSS names its colours by hue and shade — sky-500, rose-600, slate-900 — which is convenient in markup and useless when a designer, an email template, a chart library or a native app needs the actual code. Version 4 made it trickier still by defining the palette in OKLCH instead of HEX.

Type any colour class, with prefixes such as bg- or text-, variants such as hover: and an opacity such as /50, and get the HEX, RGB and every other notation for Tailwind v4 or v3. Paste a HEX instead to find the nearest Tailwind classes, ranked by perceptual difference. The complete palette is laid out as a clickable grid, taken directly from Tailwind’s own source files.

Key features of the Tailwind Color to HEX Converter

v3 and v4 palettes

Taken directly from Tailwind’s own source, including v4’s newer palettes.

Reads real class names

Prefixes like bg- and text-, variants like hover: and opacity like /75 are handled.

Opacity to alpha HEX

Opacity modifiers become eight-digit HEX codes with the right alpha.

Nearest class finder

Paste any HEX to see the closest Tailwind colours by perceptual difference.

Clickable palette

The full palette is shown as a grid; click a swatch to convert it.

How to use the Tailwind Color to HEX Converter

  1. 1

    Type a class

    blue-500, bg-sky-500, hover:text-rose-600/75 — prefixes and opacity are fine.

  2. 2

    Choose the version

    Tailwind v4 uses the OKLCH palette; v3 uses the original HEX palette.

  3. 3

    Copy the HEX

    The HEX, RGB, opacity and full notation list appear with copy buttons.

  4. 4

    Or go from HEX

    Paste a HEX to see the closest Tailwind classes, or click the palette grid.

Frequently asked questions

In Tailwind v3 it is #3B82F6. In v4 blue-500 is oklch(62.3% 0.214 259.815), which is about #2B7FFF on an sRGB screen.

Reviews of the Tailwind Color to HEX Converter

What people who use the Tailwind Color to HEX Converter think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Tailwind Color to HEX Converter. It takes half a minute and no account.

Write the first review

More converters