Conversor de colores
Convierte colores entre HEX, RGB, HSL
Cómo usar Conversor de colores
Convierte colores entre HEX, RGB, HSL, HSV y CMYK. Previsualiza colores. Conversor de colores gratuito online.
¿Para qué sirve un conversor de colores?
Los colores en el diseño digital existen en múltiples formatos, cada uno adecuado a diferentes contextos. Convertir entre ellos es una tarea diaria para diseñadores web, desarrolladores front-end y diseñadores gráficos que trabajan con distintas herramientas y plataformas.
- Desarrollo CSS: Las herramientas de diseño exportan colores como HEX (#7B35F5), pero CSS también acepta RGB (rgb(123,53,245)) y HSL (hsl(264,91%,58%)). Convierte entre ellos para adaptarte a tu sintaxis CSS preferida.
- Coherencia de marca: Un color de marca definido en Pantone debe expresarse como HEX para web, CMYK para impresión y RGB para pantalla —cada uno requiere conversión.
- Accesibilidad: HSL facilita el ajuste de la luminosidad manteniendo el tono constante —útil para crear variaciones de color accesibles con suficiente contraste.
- Traspaso diseño-código: Figma exporta en HEX; algunos desarrolladores prefieren HSL por su modelo intuitivo de tono/saturación/luminosidad. Convierte sobre la marcha.
- Preparación para impresión: Los colores de pantalla (RGB) deben convertirse a CMYK para impresión. RGB tiene una gama más amplia que CMYK —algunos colores vivos de pantalla no pueden reproducirse en impresión.
Resumen de formatos: HEX (#RRGGBB) es conciso y universal para web. RGB (0-255 por canal) es el formato nativo de pantalla. HSL (tono 0-360°, saturación 0-100%, luminosidad 0-100%) es el más intuitivo para humanos. CMYK (0-100% por canal) es para impresión.
Frequently Asked Questions
¿Cuál es la diferencia entre RGB y RGBA?
RGBA añade un canal alfa (transparencia) a RGB: rgba(123,53,245,0.5) es púrpura al 50% de transparencia. El valor alfa va de 0 (completamente transparente) a 1 (completamente opaco). De forma similar, HSLA añade alfa a HSL. HEX admite notación de 8 dígitos para el alfa: #7B35F580 (donde 80 en hex = 50% de opacidad).
¿Por qué RGB y CMYK representan gamas de color diferentes?
RGB es aditivo —mezclar rojo, verde y azul luz produce blanco (usado en pantallas). CMYK es sustractivo —mezclar tinta cian, magenta, amarilla y negra absorbe luz para producir colores (usado en impresión). RGB puede representar colores más vivos que CMYK en impresión. Los colores neón brillantes de pantalla suelen verse más apagados cuando se imprimen.
¿Qué es HSL y por qué es útil?
HSL (Tono, Saturación, Luminosidad) está diseñado para ser intuitivo. El tono es el color (0°=rojo, 120°=verde, 240°=azul). La saturación es la intensidad (0%=gris, 100%=vivo). La luminosidad es el brillo (0%=negro, 50%=color puro, 100%=blanco). Para aclarar u oscurecer un color, simplemente cambia el valor L.
¿Cómo convierto HEX a RGB manualmente?
Divide el HEX de 6 dígitos en tres pares y convierte cada uno de base 16 a base 10. #7B35F5: 7B=123 (rojo), 35=53 (verde), F5=245 (azul) → rgb(123,53,245). Los convertidores en línea hacen esto al instante, pero entender la conversión ayuda al leer valores HEX directamente.
¿Qué es la diferencia entre perfiles de color (sRGB, Adobe RGB, Display P3)?
Los perfiles de color definen la gama de colores que puede mostrar un dispositivo. sRGB es el estándar para web y la mayoría de monitores. Adobe RGB cubre aproximadamente un 50% más del espectro visible —usado en fotografía profesional. Display P3 (usado en dispositivos Apple) cubre aproximadamente un 25% más que sRGB. Las imágenes en Adobe RGB se ven deslavadas en pantallas sRGB si no se convierten correctamente.
Conversor de colores vs selector de color vs generador de paletas
Un conversor de colores traduce un valor de color existente entre formatos. Un selector de color (DevTools del navegador, selector de color del SO) te permite seleccionar un color visualmente y exporta su valor. Un generador de paletas crea combinaciones de colores armoniosas a partir de un color base usando reglas de teoría del color. Un verificador de contraste comprueba si una combinación de colores cumple los estándares de accesibilidad. Estas herramientas se complementan entre sí.