How does the tool decide which Tailwind color is closest?

It computes the Euclidean distance in RGB space between your color and each of the 220+ official Tailwind palette swatches, then returns the one with the smallest distance. A distance of 0 means an exact match.

Which Tailwind version's palette is used?

The full default Tailwind CSS v3 palette is used, covering slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose, each in shades 50 through 950.

Why is the match not exactly what I expected?

RGB distance is a fast approximation of perceptual difference. Two colors with similar numeric distance can look slightly different to the eye, especially in saturated blues and greens. The tool always returns the mathematically nearest swatch.

Can I paste a hex code instead of RGB?

Yes. Paste a 3- or 6-digit hex code into the hex field and the R, G and B values are parsed automatically. Both #fff and #ffffff are accepted.

RGB to Tailwind Color Matcher

This tool matches any RGB or hex color to the closest color in the official Tailwind CSS default palette. Paste a brand color or a value pulled from a design file, and it returns the single nearest named utility class — for example blue-500 or slate-700 — so you can replace arbitrary hex values with palette-consistent classes.

How it works

Each color in the Tailwind palette is stored as an RGB triple. When you enter a color (r, g, b), the tool computes the straight-line distance to every palette swatch using the Euclidean formula:

distance = sqrt((r1 - r2)^2 + (g1 - g2)^2 + (b1 - b2)^2)

The swatch with the smallest distance wins. A distance of 0 means the color is already an exact Tailwind color; larger numbers mean the closest match is further away. Because the search runs over the full palette of more than 220 swatches, you always get the single best fit.

Tips and notes

RGB distance is fast and predictable but is only an approximation of how different two colors look to the human eye. For most UI work it is more than accurate enough — Tailwind shades are spaced widely. If you need perceptual accuracy for fine gradients, treat the result as a starting point and eyeball the swatch shown next to the match. The whole calculation runs in your browser; nothing is uploaded.