Tailwind Color Finder

Paste any hex code and the finder returns the closest matching Tailwind utility class — for instance #4f46e5 maps to indigo-600. Distance is computed in perceptual color space, not raw RGB, so the match looks right to your eye instead of just being mathematically nearest.

The top three candidates are shown with delta-E values, so you can see how close the match actually is. A delta-E under 2 is indistinguishable to most viewers; over 5 means the match is in the right family but visibly off.

Use it when porting a Figma design to Tailwind, or when you want to drop a custom color in favor of a palette value to keep your config lean.

The math behind delta-E: the finder converts both your input hex and every Tailwind palette hex to CIE Lab coordinates, then computes the Euclidean-style distance using the delta-E 2000 formula. Lab space is perceptually uniform — equal numerical distances feel equally different to the eye, which RGB and HSL don't guarantee. This is why a #00ff00 to #00cc00 swap reads as 'similar greens' while a #0000ff to #4040ff swap reads as 'totally different blues' even though the RGB distances are similar.

Worked example: paste #6366f1. The finder converts to Lab(50.6, 31.2, -71.4), measures distance to every Tailwind shade, and returns indigo-500 (#6366f1, delta-E 0.0 — it's an exact match), then violet-500 (#8b5cf6, delta-E 8.4) and blue-500 (#3b82f6, delta-E 10.7) as runners-up. The exact match means Tailwind has indigo-500 mapped to the same hex; sometimes you'll get a non-zero delta-E on the closest match, which means your color sits between two palette entries.

When the closest match isn't close enough: if delta-E is above 5, you have three options. Use the closest Tailwind shade and let the brand drift slightly. Extend tailwind.config.js with a custom color named for the use case. Or pick a different design source color that already has a clean palette mapping. Custom colors in Tailwind config are cheap to add but accumulate — five custom colors is fine; fifty defeats the purpose of using a palette system.

When to skip the finder: when your brand color is part of your visual identity. Coke red, Tiffany blue, IBM blue, Cadbury purple — each is a registered or de-facto signature color. Forcing those into a Tailwind palette match drifts the brand by a few delta-E units that compound over thousands of touchpoints. Add them as named custom colors in tailwind.config.js (extend.colors.brand) and the rest of the Tailwind machinery works the same.