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?

Enter any hex color and this tool shows the nearest Tailwind shade by calculating color distance. Useful for migrating designs to Tailwind or matching brand colors to the Tailwind palette.

Tailwind CSS Color Finder | Ultimate Design Tools

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 — Paste a hex code, type an RGB value, or use the color picker to input the color you want to match.
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 input color and the Tailwind match side by side with a color distance score.

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 color has 10 shades (50–950) with consistent contrast ratios. Using the built-in palette gives you accessible, well-balanced colors out of the box.
→ 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.

Frequently Asked Questions

How many Tailwind colors does it search?

The full Tailwind CSS default palette — 22 color families with 11 shades each (50-950), plus black, white, and transparent.

What if there's no exact match?

The tool shows the closest match and its Delta-E distance, plus several nearby alternatives. You can also see how to define a custom color in your Tailwind config.

Does it support Tailwind v4?

The tool supports both Tailwind v3 and v4 color palettes. Select your version to see the correct class names and values.

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?

The tool uses Delta-E color distance in the CIELAB perceptual color space. Matches with Delta-E under 2.0 are virtually indistinguishable to the human eye.

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's default colors are defined in hex (sRGB). The color matching in this tool uses the CIEDE2000 color difference formula for perceptually accurate matching — a color that looks close to your input, not just numerically close in hex values.

📖 Learn More

Built by Derek Giordano · Part of Ultimate Design Tools

Related Tools