How is 'nearest' color calculated?

The tool computes Euclidean distance in the sRGB color space between your input color and every Tailwind palette swatch. The closest by distance wins. For more perceptual accuracy it also checks CIE Lab distance.

Which Tailwind version palette is used?

The full Tailwind CSS v3 default palette is included, covering all named colors from slate-50 to zinc-950.

Can I change the CSS prefix (bg-, text-)?

Yes — use the prefix selector above the results to switch between bg-, text-, border-, ring-, and fill- prefixes. The class name updates instantly.

Why doesn't the matched color look exactly like mine?

Tailwind uses a fixed palette of ~22 color families × 11 shades. Your exact color may not exist in the palette, so this tool finds the perceptually closest option.

Design Free No signup

Color to Tailwind

Find the nearest Tailwind CSS color class for any color

Loading tool…

About this tool

Pick any hex color and instantly discover the closest Tailwind CSS color class — useful when you need to match a brand color to your design system. See the top 5 nearest matches with similarity scores, copy the class name with one click, and explore the full Tailwind color palette grid. Supports bg-, text-, border-, ring-, and other prefixes.

How to use

1 Click the color picker or type a hex value in the input field.
2 The tool instantly highlights the nearest Tailwind color swatch.
3 Review the top 5 closest matches and their similarity scores.
4 Select a CSS prefix (bg-, text-, etc.) and click Copy to grab the class name.

Frequently Asked Questions

Related tools

CSS Gradient Generator

Visually build CSS linear and radial gradients and copy the ready-to-use CSS property.