Tailwind Color Converter – Convert Tailwind Online (Free Tool)

Tailwind Color Converter snaps any HEX to the nearest Tailwind palette class. Useful when you've been handed a brand HEX and want to keep your stylesheet on-token instead of scattering arbitrary `bg-[#hex]` values that diverge from your design system.

• Open-and-go: bookmark the page once and never look for an alternative
• Instant results — no waiting on a server or upload progress bar
• Touch-friendly UI, fine on phones for on-the-go edits
• Works with any color input format — HEX, RGB, RGBA, HSL, HSLA, named colors
• WCAG contrast checks calculated correctly for AA and AAA, both text and large text

1. Paste a HEX colour or pick one visually
2. See the closest Tailwind class (e.g. bg-blue-500) along with a similarity score
3. Browse the next best matches if the closest one isn't a perfect fit
4. Copy the class name or stay with the arbitrary-value syntax bg-[#hex] for one-offs

• Migrating CSS or Figma exports onto Tailwind palette tokens
• Reviewing a PR that uses arbitrary HEX values and proposing palette equivalents
• Picking utility classes for ad-hoc UI quickly without consulting the docs

The closest match is visibly different from my colour.

Tailwind's default palette has finite steps. If the distance is large, your brand colour likely sits between palette stops — either extend the palette in your tailwind.config or accept an arbitrary value.