Tailwind Color Finder – Closest Tailwind CSS Class

How to use the Tailwind CSS Color Finder

Enter a colour in HEX, rgb(), hsl() or as a name.

Choose the Utility prefix you need: bg-, text-, border-, ring- or fill-.

Copy the closest class from the result list; the ΔE value tells you how close the match is.

Or browse the palette grid, choose a copy format (Class, HEX, OKLCH, CSS var) and click any swatch.

Find the closest Tailwind CSS color

Designs often arrive with arbitrary HEX codes, while your codebase uses Tailwind's palette. This Tailwind color finder compares your colour with every step of the default palette and lists the nearest classes, so you can stay on the design system instead of scattering arbitrary values like bg-[#3a7bd5] through your markup.

How "closest" is measured

Colours are compared with CIEDE2000 (ΔE), the colour-difference formula used in print and industry. A ΔE below about 1 is indistinguishable, below 3 is very close, and above 10 is clearly a different colour. For #3b82f6 the finder returns blue-500 with ΔE 1.24.

Tailwind v4 uses OKLCH

Since version 4, Tailwind defines its palette in OKLCH, for example --color-blue-500: oklch(62.3% 0.214 259.815). Some of these colours lie outside the sRGB gamut and are shown more vividly on wide-gamut (Display P3) screens. The finder shows both the original OKLCH value and an sRGB HEX approximation; the CSS var copy format gives you var(--color-blue-500) for custom CSS.

When no class is close enough

If the best ΔE is above 5, the colour is probably a brand colour that deserves its own scale. Generate one with the tints and shades generator and add it to your theme, or use the arbitrary value the finder offers (e.g. bg-[#3a7bd5]) for one-off cases.

For colour names instead of classes, try the color name finder.

Adding a brand color to your Tailwind theme

If the nearest class is not close enough and the color will be used more than once, register it as a theme color rather than repeating an arbitrary value such as bg-[#3a7bd5]. In Tailwind v4 this happens in your CSS:

@theme {
  --color-brand-500: #3a7bd5;
}

After that, bg-brand-500, text-brand-500 and every other color utility work like the built-in palette. In Tailwind v3, add the same value under theme.extend.colors in tailwind.config.js.

Browsing the palette

The grid below the finder shows every default colour family — from slate, gray, zinc, neutral and stone through the full hue range to pink and rose, plus the newer muted families — at all eleven steps. Hover a swatch to see its name and HEX value; click to copy it in the format selected above the grid. Switching the utility prefix updates both the results and the grid, so copying text-emerald-700 for a heading or ring-sky-400 for a focus ring takes one click.

Why stay on the palette?

Using palette classes instead of arbitrary values keeps colours consistent across components, makes dark-mode variants predictable and lets you retheme a project by changing the theme variables in one place. It also keeps your CSS bundle smaller, because Tailwind reuses the same utilities.

Privacy

The tool runs entirely in your browser. Nothing you type or paste is sent to our servers.

Frequently asked questions

Which Tailwind version does the palette use?

The default palette of Tailwind CSS v4, read from the installed tailwindcss package. Colours are defined in OKLCH and shown with an sRGB HEX approximation.

Why do the HEX values differ from Tailwind v3?

Tailwind v4 redefined the palette in OKLCH with slightly more vivid colours, so many steps differ a little from the v3 HEX values.

What does ΔE mean?

ΔE (CIEDE2000) is a standard measure of visual colour difference. Values under 3 are hard to tell apart for most people.

Can I copy the class with a different prefix?

Yes. Switch the utility prefix to bg-, text-, border-, ring- or fill- and all results and palette swatches use it.

Tailwind CSS Color Finder