Convertidor de colores HEX, RGB y HSL
Convierte colores entre HEX, RGB y HSL en tiempo real, con selector, paleta web y copia rápida. Herramienta gratis para diseñadores y desarrolladores.
Colores web comunes
Últimos 5 colores
🔒 100 % privado: todo se calcula en tu dispositivo y no se envía a ningún servidor.
Cómo funciona
Ingresa
Escribe un HEX o mueve los controles RGB o HSL.
Ajusta
Los otros formatos se actualizan solos.
Obtén
Copia el código que necesites con un clic.
Todo sobre esta herramienta
HEX, RGB y HSL: tres formas de nombrar un color
HEX escribe el color en hexadecimal (#667EEA). RGB indica cuánto rojo, verde y azul lleva, de 0 a 255. HSL usa tono, saturación y luminosidad, y es muy cómodo para crear variaciones: basta con subir o bajar la luminosidad.
Consejos para diseñadores y desarrolladores
Usa HEX o RGB para valores exactos y HSL para generar paletas coherentes. Comprueba siempre el contraste entre texto y fondo: un mínimo de 4,5:1 mejora la legibilidad y la accesibilidad.
Guía práctica de conversión de colores
Ejemplo resuelto: de HEX a RGB
Un código HEX se divide en tres pares: rojo, verde y azul. En #667EEA: 66 en hexadecimal es 102, 7E es 126 y EA es 234. Resultado: rgb(102, 126, 234). En HSL ese mismo color es aproximadamente hsl(229, 76 %, 66 %): un azul lavanda bastante saturado y claro.
Cuándo usar cada formato
| Formato | Mejor para |
|---|---|
| HEX | Copiar y pegar colores exactos en CSS y en herramientas de diseño |
| RGB / RGBA | Trabajar con transparencia (canal alfa) y con código o pantallas |
| HSL | Crear variaciones: versiones más claras u oscuras del mismo tono |
Cómo crear una paleta con HSL
Mantén el tono (H) fijo y cambia la luminosidad (L). Con hsl(229, 76 %, 66 %) como color principal, prueba 85 % de luminosidad para fondos suaves, 50 % para botones y 30 % para textos sobre fondo claro. Obtendrás una familia de colores coherente sin adivinar códigos.
HEX abreviado
Un HEX de 3 dígitos duplica cada carácter: #FFF es #FFFFFF (blanco) y #0A3 es #00AA33.
Contraste y accesibilidad
Las pautas WCAG recomiendan un contraste mínimo de 4,5:1 para el texto normal y de 3:1 para el texto grande. El gris claro sobre blanco, muy de moda, suele no cumplirlo y dificulta la lectura en el móvil y al sol. Ante la duda, oscurece el texto bajando su luminosidad en HSL.
Colores y CMYK para imprimir
HEX, RGB y HSL son modelos de pantalla. Para impresión profesional se usa CMYK, que no puede reproducir algunos colores muy vivos. Si vas a imprimir, pide a la imprenta una prueba de color.
Preguntas frecuentes
¿Cómo convierto HEX a RGB?
Escribe el HEX y verás sus valores R, G y B al instante.
¿Acepta HEX de 3 dígitos?
Sí, #F80 se interpreta como #FF8800.
¿Guarda mis colores?
Guarda los últimos 5 en tu propio navegador, no en un servidor.
¿Funciona con transparencia?
Esta versión trabaja con colores opacos (sin canal alfa).
¿Qué es HSL?
Tono (hue), saturación y luminosidad. Es un modelo cómodo para crear variaciones de un mismo color.
¿Qué contraste necesita un texto?
Las pautas WCAG piden al menos 4,5:1 para texto normal y 3:1 para texto grande.