Nearest Tailwind colour — match any HEX to a Tailwind class

How to use the nearest Tailwind colour finder

1. Enter your Colour as HEX, rgb(), hsl(), oklch() or a CSS name.
2. Choose the Tailwind version: v3 (the default here) or v4.
3. Read the Nearest class, its HEX, whether it is an Exact match, and the Difference (ΔE OK).
4. Copy the utility examples, such as bg-sky-600 text-sky-600.
5. Look at the swatches and the table of six closest classes if the first match is not quite right.

What it does and when to use it

Designs often arrive with HEX codes that are almost, but not quite, Tailwind colours. Converting them by eye means scrolling through 242 or more swatches. This tool does the comparison for you and tells you how far off the nearest class is, so you can decide whether to use the class or add a custom colour.

It is useful when you port a mock-up to Tailwind, clean up arbitrary values such as bg-[#3a7bd5] in an existing project, or check whether a colour from a screenshot was a stock Tailwind shade. To browse the full palette instead, open the Tailwind colour palette. For a matching CSS keyword, use the colour name finder, and for a precise ΔE2000 between your colour and the match, the colour distance calculator.

How it works

Your colour and every shade of the chosen palette are converted to OKLab. The distance is ΔE OK = √(ΔL² + Δa² + Δb²). Shades are sorted by distance and the six nearest are listed; a distance under 0.0005 counts as exact.

The v3 palette uses Tailwind 3.4.17’s HEX values. The v4 palette uses Tailwind 4.3.3’s OKLCH values converted to sRGB with CSS Color 4 gamut mapping, so very vivid v4 shades are compared as they appear on a standard screen.

Worked examples

These are the tool’s own results.

#3b82f6, v3. Nearest class: blue-500, Exact match: Yes, ΔE OK 0. Next are indigo-500 (0.0718) and sky-600 (0.0787).

#3a7bd5, v3. Nearest class: sky-600 (#0284c7), ΔE OK 0.0414. blue-500 is close behind at 0.0513, so try both.

#3a7bd5, v4. Nearest: sky-600, now #0084d1, at ΔE OK 0.0325, followed by blue-500 (#2b7fff) at 0.0629.

Limits and tips

• A nearest match can still look different. Check the swatch row before you replace a colour.
• Transparency is ignored; compare the solid colour.
• Matching runs in your browser.