Find the Tailwind Class for Any Color
Your designer sends over a brand purple: #7C3AED. You’re building with Tailwind and you need to know, is there a default class that matches, or do you need a custom color in your config? Scrolling through the docs comparing swatches is painful. Just paste the hex code.
The tool searches the entire Tailwind CSS v3 palette, 22 color families, each with 11 shades from 50 to 950, and finds the closest match using Euclidean distance in RGB space. You’ll see the best match with its utility class name, distance score, and 7 alternative matches ranked by similarity.
A Real Example
Enter #7C3AED. The tool returns violet-600 with a tiny distance score, confirming it’s nearly identical to a Tailwind default. You can use bg-violet-600 or text-violet-600 directly, no custom configuration needed. The top 8 also shows violet-700 and purple-600 as alternatives if you want a slightly different shade.
Enter your brand’s custom teal (#0A8F7B) and you might get emerald-600 as the closest match, but with a higher distance. That’s your signal: the default palette doesn’t have a close enough equivalent. Time to add a custom color to tailwind.config.js using extend.colors.
The Design-to-Code Handoff
This is where most Tailwind projects waste time. A designer picks colors in Figma (HEX values). A developer needs to translate those into Tailwind classes. Without a tool, it’s guesswork and doc-scrolling. With this, it’s instant.
Prototyping. Building a quick mockup and the final brand colors aren’t decided yet? Use the closest Tailwind defaults for now and swap in custom values later.
Migration. Converting an existing project to Tailwind? Map all your current custom colors to their nearest Tailwind equivalents. Where the match is close enough (low distance score), use the default. Where it isn’t, define custom colors and name them after the nearest Tailwind family for consistency.
Team alignment. When a PR uses blue-500 but the design spec says blue-600, this tool settles the debate. Paste the spec’s HEX value and see which shade actually matches.
The Full Tailwind v3 Palette
22 families: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose. Each has shades 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. That’s 242 total colors being compared against your input.
The tool uses the v3 palette. Tailwind v4 may adjust some values, so check if you’re on the bleeding edge. The matching approach works regardless of version.
The Material Color Finder matches against Google’s palette if you’re in that ecosystem. The Color Name Finder gives you a human-readable CSS name. Everything runs in your browser.