Match any arbitrary hex code or RGB color against the official Tailwind CSS color system. Calculates color distance to recommend the nearest shade (e.g. emerald-600, sky-500) and copyable utility class names.
Runs entirely in your browser
If you work in Tailwind CSS, you often have a brand hex code and need the closest colour in Tailwind’s palette so you can use a utility class instead of an arbitrary value. This tool matches any hex or RGB colour against the official Tailwind colour system, measures the colour distance, and recommends the nearest shade — such as emerald-600 or sky-500 — with the copyable class names ready to paste.
That saves guesswork and keeps a project consistent with its design system. Rather than eyeballing which Tailwind shade is closest, you get a measured answer, and you can decide whether the nearest palette colour is close enough to use or whether the exact hex justifies a custom value.
It runs in your browser, so matching is instant and nothing is uploaded. Use it when translating a design into Tailwind, when replacing arbitrary colour values with palette classes, or simply to find the Tailwind name for a colour you like.
TechToolsHQ is an independent, reader-supported tech platform. If this free tool saved you time, solved a problem, or helped your workflow, consider supporting our work. Your support helps us keep our utilities 100% free, private, and ad-free for everyone.