Conversor de Color a Tailwind CSS

Calcula la distancia de color entre el HEX que le das y cada tono de la paleta de Tailwind, y te muestra el más próximo con su clase (por ejemplo bg-blue-500) y el valor HEX oficial. Cuanto menor sea la distancia que indica, más parecido es.

Diecinueve familias (slate, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink y rose) con los tonos del 50 al 900. No incluye zinc, neutral ni stone, ni el tono 950.

Los valores HEX corresponden a la paleta clásica de Tailwind v3. En v4 los colores se definen en OKLCH y pueden diferir ligeramente, así que la clase más cercana sigue siendo una buena aproximación, pero compruébala en tu proyecto.

La clase de Tailwind mantiene la coherencia con tu sistema de diseño. Si el color de marca debe ser exacto (por ejemplo un logotipo), define un color propio en tu configuración o usa un valor arbitrario, como bg-[#1877F2].

Es una medida de lo lejos que está tu color del tono de Tailwind: 0 sería idéntico. No hay un umbral oficial, pero una distancia pequeña indica que el cambio será casi imperceptible, y una grande, que verás una diferencia clara.

Esta herramienta solo busca el color más parecido. Antes de usarlo con texto, compruébalo con el Verificador de contraste, porque dos colores similares pueden quedar a un lado y otro del umbral de 4.5:1.