HEX to Tailwind Color Converter

About the HEX to Tailwind Color Converter

Find the Tailwind CSS colour that is closest to yours. Type or pick a colour — HEX, rgb(), hsl(), oklch() or a CSS name — and get the nearest default Tailwind colour as a ready class such as bg-sky-700 or text-orange-500, how far off it is, and the next nearest shades. Choose v4, whose palette is defined in OKLCH, or v3, whose palette is in HEX: the two differ, so the closest class can too.

Matches are ranked by ΔE OK, the distance in the OKLab colour space, which follows how different colours look rather than how far apart their RGB numbers are. Paste a whole palette, one colour per line, to map every colour at once. When nothing is close enough, the page gives the exact alternatives: an arbitrary value such as bg-[#1d5fcb], or your colour as a theme colour of its own. Palette values come from the published Tailwind CSS packages (MIT licence).

Common uses

• Moving a design from Figma or a brand guide, given as HEX values, into Tailwind classes.
• Replacing hard-coded colours in an old stylesheet with the nearest Tailwind utilities.
• Upgrading a project from Tailwind v3 to v4 and checking which v4 shades replace the old ones.
• Deciding whether a colour is close enough to a default shade or deserves a theme colour of its own.

How the closest colour is chosen

Your colour and every default Tailwind colour are converted to OKLab (Björn Ottosson’s perceptual colour space), and the distance between them, ΔE OK, is the straight-line distance in that space. Equal distances look about equally different across hues, which plain RGB distance does not.

CSS Color 4 treats a ΔE OK of 0.02 as one just-noticeable difference. This page calls matches up to 0.02 “visually the same”, up to 0.05 “close” (its own rule of thumb: visible side by side) and further ones “noticeably different”. The difference column says in words how a Tailwind colour differs from yours: lighter or darker, more vivid or more muted, and the hue shift in degrees.

Tailwind v4 and v3 palettes

Tailwind CSS v4 defines its default colours in oklch(), and v4.2 added four grey families (mauve, olive, mist and taupe) to the five it shares with v3 (slate, gray, zinc, neutral, stone). A project on v4.0 or v4.1 has no classes for those four: untick Include mauve, olive, mist and taupe, and the page marks them “v4.2+” wherever they appear. Many v4 colours are more vivid than sRGB can show: on a wide-gamut (Display P3) screen they look as defined, on an sRGB screen the browser shows the nearest colour it can. For those colours the table adds the sRGB value, mapped with the CSS Color 4 gamut-mapping algorithm.

Tailwind v3 defines its colours in HEX, all within sRGB. Choose the version your project uses: the closest class can differ, as the brand-blue example shows.

Translucent colours

A colour with an alpha value (#0f172a80, rgb(15 23 42 / 50%)) gets Tailwind’s opacity modifier: bg-slate-900/50. The alpha is taken to the whole percent; percentages that are not multiples of 5 are written as an arbitrary modifier, /[37%] in v4 and /[.37] in v3. The closest colour is found for the colour itself, without its transparency. A colour that cannot be seen at all (transparent, or an alpha that rounds to 0 %, such as #1d5fcb00) gets Tailwind’s own transparent: bg-transparent.

Keeping a colour exact

• Arbitrary value: bg-[#1d5fcb] works in v3 and v4 without any configuration.
• v4 theme colour: add --color-brand: #1d5fcb; inside @theme { … } in your CSS, and classes such as bg-brand and text-brand exist.
• v3 config colour: add brand: '#1d5fcb' under theme.extend.colors in tailwind.config.js.

The page fills these in for the colour you are looking at, with a name taken from the one you gave it.

Limitations

• Only Tailwind’s default palette is searched. Colours added in your own theme or by plugins are not known to the page; paste them into the box to compare them yourself.
• ΔE OK predicts how different two colours look on a screen under typical viewing; it does not account for your monitor, its settings or the colours around them.
• v4 colours outside sRGB are compared as Tailwind defines them. On an sRGB screen they are shown more muted, so the swatch can look closer or further than the number says.
• Up to 100 colours are matched at once. In the free preview the closest classes are hidden, the match list and the colour list show their first rows, and copying and the CSV stay locked.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.