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 Gratuito Sem cadastro

Color to Tailwind

Find the nearest Tailwind CSS color class for any color

Carregando ferramenta…

Sobre esta ferramenta

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.

Como usar

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.

Perguntas frequentes

Ferramentas relacionadas

Gerador de QR Code

Crie visualmente gradientes CSS lineares e radiais e copie a propriedade CSS pronta para uso.