Color to Tailwind
Find the nearest Tailwind CSS color class for any hex color — instant match across the full v3 palette.
Best match:
cyan-400| # | Swatch | Class | Hex | Distance | |
|---|---|---|---|---|---|
| 1 | cyan-400 | #22d3ee | 0.0 | ||
| 2 | sky-400 | #38bdf8 | 32.7 | ||
| 3 | cyan-500 | #06b6d4 | 48.0 | ||
| 4 | teal-400 | #2dd4bf | 48.3 | ||
| 5 | sky-500 | #0ea5e9 | 50.4 |
How does Tailwind color matching work?
Each Tailwind color class maps to a specific hex value. This tool finds the closest match by calculating the Euclidean distance in RGB space between your input color and every entry in the Tailwind v3 palette. The result gives you the class name you can use directly in your HTML (e.g. bg-sky-500, text-teal-400). A distance of 0 means an exact match. The top 5 matches are shown so you can pick the shade that looks best in context. All processing happens in your browser.
Private & free — this tool runs entirely in your browser.
Recommended: Kinsta — Fast managed hosting — up to $500 + 10% recurring.affiliate
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.