Color to Tailwind CSS
Find the closest Tailwind CSS color to any hex, RGB, or HSL value. See the top 8 matches ranked by perceptual similarity.
Top 8 closest Tailwind colors — click to copy class name
What Is the Color to Tailwind Tool?
Tailwind CSS ships with a curated palette of over 220 named colors across 22 hue families. This tool takes any color you provide — hex, RGB, or HSL — and finds the closest matches in the Tailwind v3 palette using a perceptually weighted color distance formula. You get the exact Tailwind class name to drop into your project.
How to Use
- Type a hex, RGB, or HSL color value, or pick one with the color picker.
- The top 8 closest Tailwind colors are shown ranked by similarity.
- Click any result card to copy the Tailwind class name (e.g.
bg-blue-500).
Features
- Supports hex (#fff, #ffffff), RGB (rgb(r,g,b)), and HSL (hsl(h,s%,l%)) input.
- Perceptually weighted distance — green differences are amplified as the eye is most sensitive to green.
- Shows top 8 closest matches with swatches and similarity ranking.
- One-click copy for class name, color name, or hex value.
- Full Tailwind v3 palette including slate, zinc, neutral, stone, and all hue families.
FAQ
Why doesn't the closest match look identical?
Tailwind's palette is designed for design consistency, not for exact color reproduction. The closest match is the palette entry that minimizes perceptual distance — it will look similar but rarely identical.
Which Tailwind version does this use?
This tool uses the Tailwind CSS v3 default palette. The color values are identical to the official Tailwind v3 documentation.
Can I use the output with arbitrary values?
Yes — if none of the matches are close enough, you can always use Tailwind's arbitrary value syntax: bg-[#your-color].