Formatos de color explicados: HEX, RGB y HSL
Respuesta rápida
HEX (#RRGGBB) y RGB (0—55 por canal) codifican directamente las intensidades de rojo, verde y azul. HSL (tono 0—60°, saturación/luminosidad 0—00%) codifica el color de una manera que coincide con la percepción humana, lo que facilita la creación de paletas y sombras. Convierta entre los tres con nuestro Convertidor de colores.
Introducción
Los colores web se especifican en tres formatos dominantes: HEX (rojo, verde, azul en base 16), RGB (decimal 0 a 55 por canal) y HSL (tono, saturación, luminosidad). Los tres describen el mismo espacio de color sRGB pero exponen diferentes ejes: HEX y RGB están orientados al hardware (valores de canal directo), mientras que HSL está orientado al ser humano (tono, saturación y luminosidad intuitivos). El CSS moderno también admite alfa a través de HEX8, rgba() y hsla().
Paso a paso
-
Comprender la notación HEX
HEX escribe cada canal como un número de dos dígitos en base 16: #RRGGBB. 00 está apagado, FF (255) está en intensidad máxima. #FF0000 es rojo puro, #00FF00 verde puro, #0000FF azul puro, #FFFFFF blanco, #000000 negro. Una abreviatura de 4 dígitos #RGB se expande a #RRGGBB y #RRGGBBAA agrega alfa (por ejemplo, #FF573380 es 50% alfa).
-
Comprender la notación RGB
RGB usa decimal 0—55 por canal: rgb(255, 87, 51) es lo mismo que #FF5733. La función rgba() agrega un 0—alfa: rgba(255, 87, 51, 0.5) es 50% opaco. RGB es equivalente a HEX: es simplemente decimal en lugar de base 16.
-
Comprender la notación HSL
HSL usa tono (0—60° en la rueda de colores: 0=rojo, 120=verde, 240=azul), saturación (0% = gris, 100% = todo color) y luminosidad (0% = negro, 50% = normal, 100% = blanco). hsl(11, 100%, 60%) es un naranja intenso. HSL hace que sea trivial crear tintes (aumentar la luminosidad) y sombras (reducir la luminosidad) del mismo tono.
-
Convertir entre formatos
HEX→RGB: analiza cada par como base-16. RGB→HEX: convierte cada canal a base 16 de 2 dígitos. RGB→HSL: calcula máximo/mínimo de canales normalizados, luminosidad = (máx+mín)/2, la saturación depende de la luminosidad, el tono es el ángulo del canal dominante. Utilice nuestro Convertidor de colores para hacer todo esto al instante.
-
Elija el formato adecuado para la tarea
Utilice HEX para lograr compacidad en tokens y activos de diseño. Utilice RGB/rgba() cuando necesite interpolar o animar canales. Utilice HSL/HSLA al generar paletas, sombras o variaciones de temas; ajustar la luminosidad en un 10 % es mucho más fácil que razonar sobre RGB deltas.
Ejemplos
Rojo puro en los tres formatos
Aporte: #FF0000
Producción: rgb(255, 0, 0) = hsl(0, 100%, 50%)
Un naranja vivo
Aporte: #FF5733
Producción: rgb(255, 87, 51) = hsl(11, 100%, 60%)
Blanco y negro
Aporte: #FFFFFF y #000000
Producción: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
Crear un tono de 5 pasos a partir de un tono HSL
Aporte: hsl(210, 70%, 50%): varía la luminosidad 30/40/50/60/70%
Producción: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8: una paleta azul coherente
Problemas comunes
- Mezclando HEX de 3 y 6 dígitos: #F00 y #FF0000 son del mismo color, pero algunos analizadores solo aceptan una forma. Normalice el código a 6 dígitos para evitar sorpresas.
- Olvidando que HSL luminosidad 50% no es 'medio brillo': al 100% de saturación, 50% de luminosidad es el tono puro; por encima del 50% se tiñe de blanco, por debajo del 50% se tiñe de negro. '50% gris' es hsl(0, 0%, 50%).
- Confusión del canal alfa: #RRGGBBAA (HEX8) es compatible con los navegadores modernos, pero no con los más antiguos; rgba()/hsla() tiene un soporte más amplio. Pruebe siempre el entorno de destino.
- Discrepancia de espacio de color: HEX, RGB y HSL describen sRGB. Si convierte hacia/desde P3 o Lab/OKLCH (utilizado por las pantallas modernas), una copia ingenua del canal produce colores incorrectos; utilice una biblioteca de colores adecuada.
Consejos
- Utilice HSL al diseñar una paleta: elija un tono, luego varíe la luminosidad (por ejemplo, 30/50/70%) y la saturación (por ejemplo, 60/80/100%) para generar sombras y tintes coherentes.
- Para accesibilidad, verifique la relación de contraste con el fondo: WCAG AA requiere 4.5:1 para texto normal, AAA 7:1. Utilice nuestro Convertidor de colores para calcular la luminancia y el contraste relativos.
- Prefiera el moderno CSS color-mix() u oklch() para una interpolación perceptualmente uniforme; la interpolación RGB puede atravesar grises turbios al mezclar colores complementarios.
- Al generar gradientes, primero convierta los puntos finales al mismo formato; mezclar HEX y HSL en una única declaración de gradiente puede producir puntos medios inesperados.