Color to Tailwind

How "nearest color" is decided

Tailwind CSS ships a fixed palette: roughly 22 color families (slate, gray, zinc, red, blue, indigo, and so on) each split into 11 shades from 50 to 950, for about 242 named colors total. Your brand color almost certainly is not one of those exact hex values, so this tool answers a narrower question: which Tailwind class is visually closest? It does this by treating every color as a point in three-dimensional space, where the axes are the red, green, and blue channels (each 0–255). The distance between two colors is the ordinary straight-line (Euclidean) distance:

distance = √[(R₁−R₂)² + (G₁−G₂)² + (B₁−B₂)²]

The tool computes this distance from your input to all ~242 swatches, sorts them, and returns the five smallest. The very smallest is the "best match." A distance of 0 means an exact hex match; the maximum possible distance (pure black to pure white) is about 441.

A worked example

Say you paste #2E7DD1, a mid blue. The tool converts it to RGB (46, 125, 209) and measures every swatch. Tailwind's blue-600 is #2563EB = (37, 99, 235). The distance is √[(46−37)² + (125−99)² + (209−235)²] = √[81 + 676 + 676] = √1433 ≈ 37.9. That small number lands blue-600 near the top of the list. The interface turns each distance into a friendlier similarity percentage using 100 − distance ÷ 4.42, so a distance of about 38 reads as roughly 91% similar — a quick gauge of how faithful the substitution is.

Reading the similarity score honestly

The percentage is a convenience, not a perceptual guarantee. RGB distance treats every channel equally, but human eyes are more sensitive to green than to blue, so two colors with the same numeric distance can look more or less different depending on hue. Use the side-by-side swatches the tool shows — the left square is your color, the right is the match — as the final arbiter. If the squares look identical, the class is safe to use; if they don't, glance further down the top-5 list, where a slightly larger distance might actually read better to your eye.

Choosing the right prefix

The same color name maps to different utilities depending on where you apply it. The prefix selector switches the output between bg- (background), text- (font color), border-, ring- (focus outlines), and fill- (SVG fills). The match itself never changes — only the prefix glued in front of it. So if the nearest family is indigo-500, you can copy bg-indigo-500, text-indigo-500, or border-indigo-500 without re-running anything. Clicking the best-match Copy button or any row in the top-5 list writes the full class to your clipboard.

Common use cases

• Migrating a legacy stylesheet. When converting hand-written CSS to Tailwind utilities, drop each old hex value in to find its closest class instead of guessing.
• Matching a brand color. A marketing team hands you #1DA1F2; this tells you whether sky-500 or blue-400 is closer before you commit.
• Staying on-palette. Designers sometimes pick arbitrary colors in a mockup. Snapping each one to the nearest Tailwind shade keeps your whole UI consistent and themeable.
• Exploring the palette. The full grid at the bottom lets you click any swatch to load it as the input and see its neighbors.

Tips and common mistakes

• Use full 6-digit hex. The text field expects #3b82f6 form; shorthand like #39f won't validate. The native color picker always supplies a valid 6-digit value.
• Don't expect a perfect match for vivid or pastel colors. Tailwind's palette is curated, not exhaustive. Highly saturated neons and very light tints often sit far from any swatch — the distance number will tell you when that happens.
• If two families tie visually, pick the one already in your design. A match that is cyan-500 versus sky-500 may be nearly identical; choosing the family you already use elsewhere keeps the codebase tidy.
• Everything runs locally. The palette is bundled into the tool, so color matching needs no network request and works offline.