About the Tailwind Color Finder
This Tailwind color finder takes any hex colour — from a brand guide, a Figma file or a screenshot — and finds the closest shade in the default Tailwind CSS palette, such as blue-500 or slate-800. It shows the class names to paste, the exact value Tailwind ships, how close the match is, and the next-best alternatives so you can choose the shade that suits your design.
It helps front-end developers converting a mock-up into Tailwind utility classes, designers checking whether a brand colour already exists in the palette, and teams deciding when to add a custom colour to their theme instead.
Matching uses distance in the OKLab colour space, which tracks how different two colours look to the human eye far better than comparing RGB numbers. Palettes are the defaults shipped in Tailwind CSS v4.3 (26 colour families, including the newer mauve, olive, mist and taupe neutrals) and v3.4 (22 families). Tailwind v4 defines its palette in OKLCH; the hex shown for v4 shades is the nearest sRGB equivalent, since a few vivid v4 colours sit slightly outside the sRGB gamut.
How to use the tailwind color finder
- 1Paste or type a hex colour such as #3a86ff (the # is optional).
- 2Choose the Tailwind version your project uses — v4 is the current release.
- 3Read the closest class name and copy the bg-, text- or border- utility.
- 4Check the match quality; if it is not close, compare the runner-up shades.
- 5For an exact colour, use the arbitrary-value class or add a custom theme colour.
Formula and method
Your hex colour is converted from sRGB to linear light, then to the OKLab colour space (Björn Ottosson, 2020), where L is perceived lightness and a and b are the green–red and blue–yellow axes. Every colour in the chosen Tailwind palette is converted the same way — v4 shades directly from their OKLCH definitions — and the one with the smallest straight-line distance wins.
The distance is multiplied by 100 so it reads on a familiar scale: under about 2 the colours are practically indistinguishable, 2–5 is a close match, and above 10 the difference is obvious. Black and white are included as candidates alongside the 22 (v3) or 26 (v4) colour families of 11 shades each.
- L
- OKLab perceptual lightness (0–1)
- a, b
- OKLab colour-opponent axes
- ΔE
- Perceptual colour difference × 100
Worked examples
A bright brand blue in Tailwind v4
#3a86ff converts to OKLab and lands about 2.35 units from v4’s blue-500 — close enough that most people will not see a difference. Indigo-400 is the next nearest at about 6.9.
The same blue in Tailwind v3
In the v3 palette the nearest shade is blue-500 (#3b82f6), only about 1.58 units away, so bg-blue-500 is a safe substitute for the brand colour.
Coral #ff6b6b in Tailwind v4
A popular coral red sits about 1.26 units from v4’s red-400, a near-identical match, with rose-400 next at about 3.3.
An exact v3 colour
#1e293b is exactly slate-800 in Tailwind v3, so the difference is zero. Gray-800 is the runner-up at under 1 unit away.
Frequently asked questions
How do I convert a hex colour to a Tailwind class?+
Paste the hex here to find the nearest default palette shade, then use it as bg-{name}, text-{name} or border-{name}. If no shade is close, use an arbitrary value like bg-[#3a86ff] or add a custom colour to your theme.
Why are Tailwind v4 colours different from v3?+
Tailwind v4 redefined the default palette in the OKLCH colour space for more vivid, perceptually even shades. Names stay the same, but most values shifted slightly, so the closest match can differ between versions.
How is the closest colour decided?+
Colours are compared in OKLab, a perceptual colour space, using straight-line distance. This matches what your eye sees far better than comparing RGB values, which over-weights some hues and under-weights others.
What does the ΔE number mean?+
It is the perceptual distance between your colour and the Tailwind shade (×100). Below about 2 the colours look the same side by side, 2–5 is close, and above 10 they are clearly different.
Can I add my exact brand colour to Tailwind?+
Yes. In v4 add a --color-brand variable in an @theme block of your CSS; in v3 extend theme.colors in tailwind.config.js. You can then use classes such as bg-brand.