Herramientas › Convertidor Tailwind

Encuentra la clase Tailwind
para cualquier color

Introduce cualquier color HEX y encuentra al instante la clase Tailwind CSS más cercana. Haz clic en cualquier color de la paleta para ver su clase.

Introduce el color
—
—
Ejemplos de uso
text- — copiar
bg- — copiar
border- — copiar
ring- — copiar
Coincidencias más cercanas
Paleta completa de Tailwind CSS

Cómo funciona la búsqueda

El algoritmo compara tu color con los ~220 colores de la paleta Tailwind CSS v3 y encuentra el más cercano por distancia euclidiana en el espacio RGB. El resultado es el nombre exacto de la clase.

Cuándo lo necesitas

Cuando recibes un color de un diseñador en HEX y necesitas encontrar rápidamente la clase Tailwind correspondiente. O cuando quieres verificar que tu color está en la paleta estándar de Tailwind.

Tailwind CSS v3

La herramienta usa la paleta completa de Tailwind CSS v3 — incluyendo slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink y rose.

Preguntas frecuentes
¿Qué hacer si mi color no está en Tailwind?
La herramienta encontrará el color más cercano. Si la diferencia es grande, puedes añadir un color personalizado en tailwind.config.js a través de la sección extend.colors, usando el HEX exacto que necesitas.
¿Es compatible con Tailwind v4?
Actualmente se usa la paleta de Tailwind v3. En v4 el sistema de colores cambió, pero los nombres básicos de colores siguen siendo compatibles.
¿Cómo usar la clase en un proyecto?
Por ejemplo para azul la herramienta dará la clase blue-500. Úsala como text-blue-500, bg-blue-500, border-blue-500 etc. — los ejemplos listos se muestran en la tarjeta de la izquierda.
¿Es gratuita esta herramienta?
Sí, completamente gratuito y sin límites. Sin registro, todo funciona en tu navegador.