Tailwind Color Search
Find closest Tailwind class from HEX. e.g. bg-blue-500.
▶About this tool
This tool finds the closest Tailwind color class from HEX in one click. Three features: 1) Enter HEX to get closest class from Tailwind palette, 2) Output as bg-blue-500, text-red-600, etc., 3) Ideal for converting design colors to Tailwind classes.
Tool interface
Closest Tailwind class
—
—
Usage
- Enter HEX color code in the input field
- Closest Tailwind class name from palette is displayed
- Copy bg-blue-500, text-red-600 etc. to use
When to use
Design colors to Tailwind classes, consistent color palette.
Examples
#3b82f6 → blue-500, #ef4444 → red-500
FAQ
Tailwind color syntax?
color-shade. blue-500, red-600. 50=lightest, 950=darkest.
Custom colors?
Extend in tailwind.config. This tool uses default palette only.
How to find Tailwind class from HEX?
Enter HEX in this tool. Closest Tailwind color class (bg-blue-500, text-red-600) is shown.
What HEX is Tailwind blue-500?
#3b82f6. Use this tool to search HEX→class name.
Tailwind shade scale?
50,100,200,300,400,500,600,700,800,900,950. 500=base, higher=darker.
Match design colors to Tailwind?
Enter design HEX in this tool. Adopt closest Tailwind class for consistent palette.
Tailwind gray vs slate?
Gray=neutral. Slate=blue-tinted gray. Choose by design tone.
Tailwind color classes list?
slate,gray,zinc,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose.
bg- vs text- in Tailwind?
bg-=background, text-=text color, border-=border. Same color-shade, different use.
How to use Tailwind color search?
Enter HEX. Get closest Tailwind class from full palette instantly.