Conversor de Colores
Convierte colores entre HEX, RGB, HSL, HWB y CMYK con soporte de transparencia y vista previa en vivo.
Cómo funciona
El Conversor de Color traduce entre los modelos de color usados en CSS y flujos de trabajo de diseño gráfico: HEX (#rrggbb o #rgb), RGB, HSL, HWB y CMYK, con soporte completo del canal alfa. Escribe un valor en cualquier formato soportado y los demás formatos se actualizan simultáneamente, acompañados de una muestra de previsualización en vivo para que puedas confirmar el resultado visualmente.
La ruta de conversión pasa por el espacio de color sRGB: HEX y RGB se mapean directamente, HSL y HWB se derivan usando las fórmulas estándar del nivel 4 de CSS Color, y CMYK usa el modelo de sustracción simple aplicado habitualmente para previsualización en pantalla (nota: el CMYK preciso para impresión depende del perfil ICC de destino, lo que está fuera del alcance de una herramienta en navegador). El alfa se preserva entre formatos — una entrada #1a2b3c80 hace el viaje de ida y vuelta a través de rgb(26 43 60 / 0.5) y hsl(...).
La herramienta acepta tanto la notación CSS legacy separada por comas (rgb(255, 0, 0)) como la notación moderna separada por espacios con / para alfa, por lo que puedes pegar desde cualquier fuente.
Ejemplo práctico
Introduce #1E90FF: la herramienta informa rgb(30, 144, 255) y hsl(210, 100%, 56%), lo identifica como el color CSS con nombre dodgerblue y muestra su luminancia relativa WCAG. La sección de armonías genera sus compañeros complementario, análogos, triádicos y complementarios divididos — haz clic en cualquier muestra para cargarla y seguir explorando. El camino inverso es igual de común: pega rgb(30, 144, 255) desde una herramienta de diseño y copia el hex para tu hoja de estilos, con todos los formatos sincronizados mientras ajustas el valor.
Casos de uso
- Traducir el color HEX de un diseñador a HSL para animaciones CSS
- Verificar el triplete RGB de un color de marca
- Copiar valores de color entre herramientas de diseño con diferentes formatos
- Enseñar teoría del color con una muestra visual
Preguntas frecuentes
- ¿Por qué mi salida CMYK se ve ligeramente diferente a Photoshop?
- El CMYK preciso para impresión requiere un perfil ICC que mapea sRGB a una prensa específica; esta herramienta usa la fórmula de sustracción sRGB→CMYK simple que los navegadores y muchas herramientas web usan para previsualización, suficientemente buena para pantalla pero no para pruebas de impresión.
- ¿Soporta la herramienta alfa (transparencia)?
- Sí. El alfa se preserva al hacer el ciclo entre HEX (forma de 8 dígitos), RGB y HSL.
- ¿Qué formato usa la muestra?
- La muestra se renderiza en CSS, así que muestra exactamente cómo se verá el color en tu navegador con el gamma de pantalla actual.
- ¿Por qué los valores de matiz HSL van de 0 a 360 y la saturación de 0 a 100?
- Coincide con la especificación CSS: el matiz es un ángulo en grados, la saturación y la luminosidad son porcentajes.
- ¿Se envía el valor del color a algún lugar?
- No. Toda la matemática de conversión ocurre en tu navegador, así que las paletas de colores de marca permanecen privadas.