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 Gratis Sin registro

Color to Tailwind

Find the nearest Tailwind CSS color class for any color

Cargando la herramienta…

Acerca de esta herramienta

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.

Cómo 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.

Preguntas frecuentes

Herramientas relacionadas

Generador de códigos QR

Construya visualmente gradientes CSS lineales y radiales y copie la propiedad CSS lista para usar.