Qué son HEX, RGB y HSL
Cuando trabajas con color en una pantalla —ya sea diseñando una web, ajustando un logotipo o escribiendo CSS— en realidad estás describiendo el mismo fenómeno físico (una mezcla de luz roja, verde y azul) con tres notaciones distintas. Conocerlas todas, y saber pasar de una a otra, es una de esas habilidades pequeñas que ahorran muchísimo tiempo a diseñadores y desarrolladores.
HEX: el código de 6 dígitos
El formato HEX (hexadecimal) representa un color con un símbolo # seguido de 6 caracteres, en base 16 (0-9 y A-F). Los dos primeros dígitos codifican el rojo, los dos siguientes el verde y los dos últimos el azul, cada par en el rango 00-FF (0-255 en decimal). Por ejemplo, #7C3AED es un violeta: 7C de rojo, 3A de verde y ED de azul. Existe también la forma abreviada de 3 dígitos (#f0a equivale a #ff00aa), donde cada dígito se duplica. Es el formato más compacto y el más usado en CSS y en archivos de diseño.
RGB: rojo, verde y azul en decimal
El formato RGB expresa los mismos tres componentes en base decimal, de 0 a 255, normalmente como rgb(r, g, b). Es el modelo más intuitivo para razonar en términos de luz aditiva: sumar los tres colores al máximo (255,255,255) da blanco, y ausencia total (0,0,0) da negro. RGB y HEX son exactamente la misma información, solo cambia la base numérica: 124 en decimal es 7C en hexadecimal.
HSL: matiz, saturación y luminosidad
El formato HSL describe el color de una forma mucho más cercana a como lo percibimos: Hue (matiz, 0-360° en el círculo cromático), Saturation (saturación, 0-100%, de gris a color puro) y Lightness (luminosidad, 0-100%, de negro a blanco pasando por el color puro en 50%). Su gran ventaja es que permite crear variaciones controladas de un mismo color cambiando un solo número: bajar la luminosidad lo oscurece, subir la saturación lo hace más vivo, y todo ello sin tocar el matiz.
Cómo se convierten entre sí
La conversión HEX↔RGB es una simple relectura en otra base numérica: cada par de dígitos hexadecimales se traduce a su valor decimal equivalente (0-255) y viceversa.
La conversión RGB→HSL es algo más elaborada. Primero se normalizan R, G y B a un rango de 0 a 1. La luminosidad es el promedio entre el valor máximo y el mínimo de los tres. La saturación depende de la diferencia entre ese máximo y mínimo en relación con la luminosidad. El matiz se calcula según cuál de los tres canales sea el dominante, usando la posición relativa de los otros dos:
La conversión inversa, HSL→RGB, aplica la fórmula estándar del modelo con una función auxiliar que reparte el matiz en los tres canales según su distancia angular, y luego se multiplica cada canal por 255 para volver a RGB, o se convierte directamente a HEX.
Cuándo usar cada formato en diseño y CSS
- HEX es el más práctico para guardar y compartir un color exacto: es compacto, se pega en cualquier sitio y es el formato por defecto de la mayoría de programas de diseño y paletas de marca.
- RGB conviene cuando necesitas transparencia con
rgba(r, g, b, a)o cuando trabajas con valores que vienen de una fuente en decimal, como un canvas, una imagen o una API gráfica. - HSL es la mejor opción cuando necesitas generar sistemáticamente variantes de un color: escalas de grises de una marca, estados hover más oscuros, fondos más claros del mismo tono, o paletas completas partiendo de un único matiz.
| Formato | Sintaxis CSS | Mejor para |
|---|---|---|
| HEX | #7c3aed | Guardar y compartir el color exacto |
| RGB | rgb(124, 58, 237) | Transparencia con rgba() |
| HSL | hsl(262, 83%, 58%) | Crear variantes tonales de un color |
Color complementario y contraste de texto
El color complementario es el que se encuentra a 180° de distancia en el círculo de matices HSL. Al mostrarse juntos generan el máximo contraste cromático posible, por lo que se usan mucho para resaltar botones, iconos o elementos de llamada a la acción sobre un fondo del color principal.
Para decidir si un texto debe ser blanco o negro sobre un color de fondo, esta herramienta calcula la luminancia relativa del fondo (una media ponderada y corregida por gamma de sus componentes RGB) y compara el contraste resultante con blanco y con negro, sugiriendo automáticamente el que ofrece mejor legibilidad según las pautas de accesibilidad WCAG.
Preguntas frecuentes
¿Qué diferencia hay entre HEX, RGB y HSL?
Son tres formas de describir el mismo color. HEX usa un código de 6 dígitos hexadecimales (#rrggbb) muy compacto para CSS. RGB expresa el color como mezcla de rojo, verde y azul en escala 0-255, más intuitivo para pensar en luz aditiva. HSL lo describe por matiz (tono), saturación y luminosidad, lo que facilita crear variantes más claras, más oscuras o más o menos saturadas del mismo color.
¿Cómo se convierte un HEX a RGB?
Un código HEX de 6 dígitos se divide en tres pares: los dos primeros dígitos son el rojo, los dos siguientes el verde y los dos últimos el azul, cada par en base hexadecimal (0-FF, es decir 0-255 en decimal). Por ejemplo #FF0000 equivale a rgb(255,0,0): rojo al máximo y verde y azul en cero.
¿Cuándo debo usar HSL en vez de HEX o RGB?
HSL es muy útil cuando necesitas generar variaciones de un mismo color de forma predecible: basta con cambiar la luminosidad para aclarar u oscurecer, o la saturación para hacerlo más vivo o más grisáceo, manteniendo el mismo matiz. Por eso muchos sistemas de diseño y hojas de estilo definen paletas completas variando solo esos dos valores sobre un mismo tono en HSL.
¿Qué es el color complementario y para qué sirve?
El complementario es el color que está a 180 grados de distancia en el círculo cromático (la rueda de matices HSL). Combinados generan el máximo contraste visual, por lo que se usan en diseño para resaltar elementos, crear llamadas a la acción o dar énfasis a un detalle sobre un fondo del color base.
¿Cómo se decide si un texto debe ir en blanco o en negro sobre un color?
Se calcula la luminancia relativa del color de fondo a partir de sus componentes RGB corregidos por gamma. Si esa luminancia es alta (fondo claro) conviene texto negro; si es baja (fondo oscuro) conviene texto blanco. Esta herramienta hace ese cálculo automáticamente y te sugiere la opción con mejor legibilidad.
¿Puedo usar transparencia con estos formatos?
Sí: existen variantes con canal alfa, como HEX de 8 dígitos (#rrggbbaa), rgba(r,g,b,a) y hsla(h,s%,l%,a), donde el valor alfa va de 0 (totalmente transparente) a 1 (totalmente opaco). Este conversor trabaja con los formatos sólidos, pero puedes añadir el canal alfa manualmente en tu CSS a partir del resultado obtenido.