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.

Más herramientas de color

Selector de colorSube una foto y haz clic en cualquier punto — obtén HEX, RGB, HSL y nombre Paleta de imagenExtrae 5–8 colores dominantes de cualquier imagen Paleta para proyectoGenera N colores con legibilidad de texto garantizada Armonías de colorComplementarias, análogas, triádicas y split-complementarias Variaciones de colorMás claro, oscuro, saturado, pálido, cálido, frío Generador de degradadosCrea hermosos degradados y copia el código CSS Contraste WCAGVerificación de accesibilidad AA y AAA — gratis Simulador de daltonismoCómo ven los colores personas con protanopía, deuteranopía y otros tipos Convertidor de colorHEX ↔ RGB ↔ HSL ↔ CMYK al instante, con copia de código Color por nombreEncuentra HEX por nombre — «terracota», «índigo», «azur» Filtro CSS para SVGRecolorea iconos SVG con cualquier color vía CSS sin editor Paletas de coloresPaletas listas por temas — clic en un color para copiar HEX