HEX to Tailwind Color

HEX color codes are 6-character hexadecimal strings (e.g., #3B82F6) that represent colors in the RGB color space. They are the universal format for specifying colors in CSS, HTML, design tools, and brand guidelines. When working with Tailwind CSS, you often receive HEX codes from a designer or brand guidelines, and need to find the closest matching Tailwind color class to use in your project without introducing arbitrary values.

Tailwind CSS is an enormously popular utility-first CSS framework. Rather than writing custom CSS rules, you apply small, single-purpose utility classes like text-blue-500, bg-red-100, or border-gray-300 directly in your HTML. Tailwind ships with a carefully designed default color palette covering 22 color families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose), each with 11 shades from 50 (lightest) to 950 (darkest).

This tool calculates the perceptual color distance between your HEX color and every color in the Tailwind palette using the Delta E (ΔE) formula in the LAB color space. LAB-based comparison is more accurate than simple RGB distance because it models how humans perceive color differences. The closest match in perceptual terms is returned as your Tailwind color class, for example bg-blue-500 or text-emerald-700.

Tailwind comes with an expertly crafted, accessible color palette. When bringing an external design (from Figma, a brand guide, or a legacy stylesheet) into a Tailwind project, using the default palette maintains consistency, keeps the CSS bundle size minimal, and avoids the complexity of arbitrary value classes like bg-[#3d7abf]. Sticking to named palette colors also makes your code more readable and maintainable for the whole team.

• Finding the best Tailwind equivalent for client brand colors during a migration
• Converting design handoff colors from Figma or Adobe XD to Tailwind classes
• Auditing an existing design to see which brand colors map cleanly to the Tailwind palette
• Choosing accessible color classes that are close to a desired HEX value
• Quickly discovering the color name (e.g., "sky-400") for a HEX value you like in the Tailwind docs
• Standardizing a project's color usage to avoid a proliferation of arbitrary HEX values