Convertidor de Colores
Convierte colores entre formatos HEX, RGB y HSL y encuentra la clase Tailwind CSS más cercana al instante.
indigo-500
Clase de color Tailwind más cercana
Convierte colores entre HEX, RGB, HSL y Tailwind al instante
Cambiar entre formatos de color es una fricción constante al crear interfaces. El Convertidor de Colores de Zolkit gestiona HEX, RGB y HSL en ambas direcciones e incluso encuentra la clase de color Tailwind CSS más cercana — para ir del código hex de una herramienta de diseño a una clase utilitaria en un solo paso.
Tres formatos a la vez
Edita cualquier formato — HEX, RGB o HSL — y todos los demás se actualizan al instante. Cambia un número y todas las representaciones se mantienen sincronizadas.
Coincidencia de color Tailwind
Encuentra automáticamente la clase de color Tailwind v3 más cercana de la paleta completa de 22 familias usando distancia euclidiana en RGB.
Muestra de color en vivo
Un gran selector de color te ofrece una vista previa visual inmediata del color seleccionado mientras ajustas los valores.
Copia cualquier formato
Copia con un clic cada tarjeta de formato — copia la cadena HEX, la función rgb(), la función hsl() o el nombre de la clase Tailwind.
100% Privado
Todos los cálculos de color se realizan localmente en tu navegador. No se envía ningún dato a ningún servidor.
Gratis para siempre
Sin cuenta, sin límites, sin muros de pago. La conversión de colores es siempre gratuita.
Cómo convertir colores
- 1
Haz clic en el selector de color o escribe un valor en cualquier campo de formato (HEX, RGB o HSL).
- 2
Todos los demás campos de formato se actualizan automáticamente. La tarjeta Tailwind muestra la clase utilitaria coincidente más cercana.
- 3
Haz clic en el botón Copiar de cualquier tarjeta para copiar ese formato al portapapeles.
Preguntas frecuentes
¿Qué formatos de color admite esta herramienta?
HEX (6 dígitos, p. ej. #3b82f6), RGB (0–255 por canal), HSL (tono 0–360°, saturación y luminosidad 0–100%) y nombres de clase Tailwind CSS. Puedes editar cualquier formato y los demás se actualizan de inmediato.
¿Cómo funciona la coincidencia de color Tailwind?
La herramienta compara tu color con todos los ~242 colores de la paleta Tailwind v3 (22 familias de colores × 11 tonos cada una) usando distancia euclidiana en el espacio RGB. La coincidencia más cercana se devuelve como nombre de clase utilitaria, p. ej. 'blue-500'.
¿La coincidencia Tailwind siempre será exacta?
No siempre. Si tu color es exactamente un color Tailwind, la coincidencia es perfecta. Para colores arbitrarios devuelve el vecino más cercano, que puede no ser visualmente idéntico. La muestra de color junto al nombre de la clase te permite comparar.
¿De qué versión de Tailwind es la paleta?
La tabla de consulta usa la paleta por defecto de Tailwind CSS v3, que incluye las 22 familias de colores (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) en 11 tonos (50 a 950).
¿Puedo introducir un valor HSL directamente?
Sí. Haz clic en cualquiera de los tres campos numéricos HSL (H, S, L) y escribe un valor. El tono es de 0 a 360 grados, la saturación y la luminosidad son de 0 a 100 por ciento. Los campos HEX y RGB se actualizarán mientras escribes.
¿Funciona sin conexión?
Sí, una vez cargada la página. Todos los cálculos de conversión y la tabla de consulta de Tailwind están incluidos en el JavaScript — no se realizan peticiones de red durante la conversión de colores.