Conversor de colores Tailwind
Convierte HEX a la clase de color Tailwind más cercana, y la clase de vuelta a HEX al instante
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Asigna cualquier color HEX a la clase perceptualmente más parecida de la paleta estándar de Tailwind CSS (22 familias × 11 tonos, 242 colores en total). A la inversa, al elegir una familia de color y un tono (shade) puedes ver y copiar al momento el valor HEX y RGB exacto de esa clase.
Cómo usar
- En la pestaña «HEX → clase» indica el color con el selector o el campo de HEX.
- Consulta la clase Tailwind más cercana, el color candidato y la Δ (distancia de color), y copia la clase, el HEX o la utilidad bg-.
- En la pestaña «clase → HEX», al seleccionar la familia y el tono se muestran los valores HEX y RGB.
- Pega el valor que necesites directamente en tu código con el botón de copiar de al lado.
Preguntas frecuentes
- ¿Por qué el color de la clase asignada difiere un poco del color real?
- La paleta estándar de Tailwind solo tiene 242 colores fijos, así que nunca puede coincidir exactamente con un HEX cualquiera. La herramienta elige el color más parecido mediante la distancia de color perceptual (redmean); cuanto menor sea la Δ mostrada, más cerca estará del original.
- ¿Se puede usar también con Tailwind v4?
- Los valores de color de la paleta estándar son prácticamente idénticos en v3 y v4, así que la mayoría se pueden aprovechar tal cual. Ahora bien, si en tu proyecto has redefinido los colores del tema de forma personalizada, deberás seguir esa configuración.
- ¿El color que introduzco se envía a un servidor?
- No. Todas las conversiones se procesan solo en el navegador y no se transmite ni se guarda ningún dato. Los nombres de clase que se muestran son orientativos, así que contrástalos con los valores de tu sistema de diseño real.