Hex → Tailwind Color Converter



Result

How it works

Enter any hex color code and instantly get the closest Tailwind CSS color utility class (e.g., bg-emerald-500).
Tip: Click "Copy" to copy the class for use in your project!
HEX to Tailwind Converts any hex color to the closest Tailwind CSS color class.
Instant & Client-Side No server, no tracking. All conversion happens instantly in your browser.
Copy Utility Copy the Tailwind class to your clipboard with one click.
Tailwind Palette Uses the official Tailwind CSS color palette for matching.

Tailwind Color Classes & Gradients

Explore the full palette of Tailwind CSS color classes and gradients. Hover or tap to copy the class name!

Tailwind Gradients

Beautiful gradients using Tailwind's bg-gradient-to-* utilities. Click to copy!

Tailwind Color Reference

All main Tailwind colors and their shades. Click a circle to copy the class name!

Popular and useful Tailwind classes and patterns

For quick copy and inspiration.
Center Content
flex justify-center items-center
Avatar/Badge
rounded-full shadow-lg
Gradient BG
bg-gradient-to-r from-blue-500 to-green-400
Gradient Text
text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-yellow-500
Button Hover
hover:bg-blue-600 transition duration-200
3-Column Grid
grid grid-cols-3 gap-4
Responsive Width
w-full max-w-md mx-auto
Card/Panel
shadow-md border border-gray-200