Full Tailwind v3 palette
Searches across all 22 Tailwind color families × 11 shades (50–950) to find the closest match.
Color Tools
Tailwind Color Converter
Enter any HEX color and instantly find the nearest Tailwind CSS utility class. Get the matching bg-, text-, and border- classes from the complete Tailwind v3 palette.
Nearest color matching
Uses Euclidean RGB distance to find the truly closest Tailwind color, not just a guess.
bg, text, border classes
Instantly copy bg-, text-, and border- utility class names for the matched color.
blue-500
#3B82F6
Background
bg-blue-500
Text
text-blue-500
Border
border-blue-500
blue palette
50
100
200
300
400
500
600
700
800
900
950
How to find the nearest Tailwind color
Step 1
Enter a HEX color
Type a hex code or use the color picker to select any color you want to match.
Step 2
See the nearest Tailwind match
The closest Tailwind color name and shade number are shown along with the full palette row.
Step 3
Copy the utility class
Click to copy bg-, text-, or border- class names ready to paste into your Tailwind HTML.
FAQ
How is the nearest Tailwind color calculated?
The tool converts both your input color and every Tailwind palette color to RGB and finds the minimum Euclidean distance across all 242 palette entries.
Is the full Tailwind v3 palette included?
Yes. All 22 color families (slate, gray, zinc, red, orange, emerald, sky, blue, indigo, etc.) at shades 50 through 950 are included.
Can I use this for Tailwind v4?
Tailwind v4 uses CSS variables and a similar color naming scheme. The class names generated here (e.g. bg-blue-500) are compatible as long as your v4 config uses the default palette.