What Is the Tailwind Color Finder?
Find the closest Tailwind CSS color class for any hex, RGB, or HSL color. See the exact match and nearby alternatives.
Why Use This Tool?
Translating design specs to Tailwind color classes is a constant task for developers working with Figma files. This tool instantly maps any color to the closest Tailwind class name.
How to Use This Tailwind Color Finder
- Enter any color — Type or paste any CSS colour (hex, rgb(), hsl(), oklch() or a colour name), or use the colour picker.
- See the closest Tailwind match — The tool compares your input against Tailwind's entire color palette and finds the nearest match by color distance.
- View the Tailwind class — Get the exact Tailwind CSS class name (e.g.,
bg-rose-500) ready to use in your markup.
- Compare the colors — See your colour and the matches side by side, each with its ΔE OK distance.
Tips and Best Practices
- → Use this when converting designs to Tailwind. When translating a Figma/Sketch design to Tailwind, map each design color to its nearest Tailwind equivalent for consistency.
- → Consider extending Tailwind's palette. If no Tailwind color is close enough, extend the palette in
tailwind.config.js rather than using arbitrary values like bg-[#FF6B6B].
- → Tailwind's palette is designed for UI. Each colour has 11 shades (50 to 950), so most UI needs (backgrounds, borders, text, hover states) can come from one family. Contrast still varies by pair, so check it.
- → Check contrast before committing. Finding the nearest Tailwind color is step one. Always verify the chosen shade has sufficient contrast for your use case using our Contrast Checker.
Related tools
- Once you have the closest Tailwind match, pipe the hex through the Color Space Converter to see its modern CSS Color Level 4 forms.
- Once you have the closest stock match, the Tailwind v4 OKLCH Palette can generate a custom v4-compatible 50-950 scale built around your exact brand color.
Frequently Asked Questions
How many Tailwind colors does it search?
All 22 default colour families with 11 shades each (50 to 950), 242 colours, in either the Tailwind v4 palette (taken from tailwindcss 4.3.3's theme.css) or the v3 palette (tailwindcss 3.4.17). Black, white and transparent are not included.
What if there's no exact match?
You get the closest shade first and the next eleven after it, each with its distance. If even the closest one is too far off, add your own colour to the theme (see the custom-colours question) or use an arbitrary value such as bg-[#ff6b6b].
Does it support Tailwind v4?
Yes. Pick Tailwind v4 (OKLCH) or Tailwind v3 (hex) in the Palette menu. The two palettes are close but not identical, so the nearest shade can differ; the values shown are the ones each version ships.
Does it work with custom Tailwind colors?
The tool matches against Tailwind's default palette. For custom colors defined in your tailwind.config.js, you'd need to check those values manually or extend the tool's color database.
How accurate is the color matching?
Colours are compared in OKLab, and the distance shown is ΔE OK (CSS Color 4's OKLab difference) times 100. Under about 2 the two colours are very hard to tell apart side by side. We checked the best match for 7 inputs in both palettes against the coloraide library's ΔE OK: 14 of 14 identical.
How many colors does Tailwind CSS have?+
Tailwind CSS v3+ includes 22 color families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) with 11 shades each (50–950), totaling 242 named colors plus black, white, and transparent.
Can I use custom colors in Tailwind?+
Yes, extend or override the color palette in tailwind.config.js under theme.extend.colors. You can add individual colors or full shade scales. Tailwind also supports arbitrary values with square bracket notation: bg-[#FF6B6B].
What color space does Tailwind use?+
Tailwind v3 defines its palette as sRGB hex codes; Tailwind v4 redefined it in OKLCH, so some v4 shades are slightly more saturated than sRGB can show. The finder converts your colour and every palette entry to OKLab and picks the smallest ΔE OK.
What are Tailwind CSS colors?+
Tailwind provides a curated palette of color scales — each color (slate, red, blue, etc.) has shades from 50 (lightest) to 950 (darkest). These are designed to work together harmoniously.
How do I find the closest Tailwind color?+
Type or paste a colour in any CSS form (hex, rgb(), hsl(), oklch() or a name such as rebeccapurple), or use the picker, choose v4 or v3, and the nearest shades appear at once. Click the top match to copy its bg- class.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service