Comprender los formatos de color: HEX, RGB y HSL

Cada color que ves en una pantalla está construido con los mismos tres ingredientes: luz roja, verde y azul. Sin embargo, diseñadores y desarrolladores se refieren a los colores con al menos tres notaciones distintas — #FF3366, rgb(255, 51, 102) y hsl(345, 100%, 60%). Todas describen exactamente el mismo rosa. Entonces, ¿por qué necesitamos tres formatos y cuándo deberías usar cada uno?

Cómo crean color las pantallas

Las pantallas funcionan mediante mezcla aditiva de color. Cada píxel contiene un diminuto subpíxel rojo, verde y azul. Cuando los tres se encienden a máxima potencia, ves blanco. Cuando ninguno se enciende, ves negro. Todo lo demás es una mezcla de esos tres canales a diferentes intensidades.

Esto es lo opuesto a cómo funciona la pintura. Si mezclas pintura roja, amarilla y azul obtienes un marrón turbio: eso es mezcla sustractiva, donde los pigmentos absorben la luz. Las pantallas emiten luz, así que más color significa más brillo, no más oscuridad.

RGB: el idioma nativo de la máquina

RGB significa rojo, verde y azul (Red, Green, Blue). Cada canal es un número de 0 a 255 que representa cuánta cantidad de ese color emitir. Cero significa apagado; 255 significa al máximo.

rgb(255, 0, 0)    → pure red
rgb(0, 255, 0)    → pure green
rgb(0, 0, 255)    → pure blue
rgb(255, 255, 0)  → yellow (red + green)
rgb(0, 0, 0)      → black (nothing on)
rgb(255, 255, 255) → white (everything on)

¿Por qué 0–255?

Cada canal recibe 8 bits de datos (un byte). 2^8 = 256 valores posibles, lo que nos da el rango de 0 a 255. Tres canales significan 24 bits en total, lo que produce 16,7 millones de colores posibles: más que suficiente para parecer continuo al ojo humano.

RGB es lo que entiende el hardware. Tu GPU, tu monitor y el sensor de tu cámara: todos hablan RGB. Cuando escribes rgb(255, 51, 102) en CSS, básicamente le estás dando instrucciones directas al píxel.

Cuándo usar RGB

• Cuando necesitas un control preciso de los canales (por ejemplo, mezcla, máscaras o código de shaders)
• Cuando trabajas con APIs o bibliotecas que aceptan tuplas RGB
• Cuando haces cálculos programáticos con color (sumar, promediar o interpolar canales)

HEX: RGB disfrazado

Los códigos de color HEX no son un sistema de color distinto: son simplemente RGB escrito en base 16 (hexadecimal) en lugar de base 10. Los seis caracteres después de # son tres pares, cada uno representa un canal RGB.

#FF3366
 ││││││
 ││││└┘ Blue:  66 hex = 102 decimal
 ││└┘   Green: 33 hex =  51 decimal
 └┘     Red:   FF hex = 255 decimal

So #FF3366 = rgb(255, 51, 102)

¿Por qué hexadecimal?

Hex es más compacto. #FF3366 es más corto que rgb(255, 51, 102). En los primeros años de la web, cada byte importaba: los archivos HTML se escribían a mano y viajaban por conexiones de acceso telefónico. HEX se convirtió en el estándar para colores en CSS simplemente porque era breve y sin ambigüedades.

Notación abreviada

Cuando ambos dígitos de cada par son iguales, puedes abreviarlo a tres caracteres. #FF3366 se convierte en #F36. El navegador expande cada dígito duplicándolo: F→FF, 3→33, 6→66.

Cuándo usar HEX

• En hojas de estilo CSS (la convención más común)
• En herramientas de diseño como Figma o Photoshop (la entrada de color predeterminada)
• Al compartir colores en texto: #FF3366 se entiende universalmente

HSL: el formato más natural para humanos

RGB y HEX son geniales para las máquinas, pero terribles para las personas. Rápido: ¿rgb(51, 102, 255) es un color cálido o frío? Es difícil saberlo de un vistazo. Ahí es donde entra HSL.

HSL significa Tono, Saturación y Luminosidad. Describe el color de la manera en que la gente realmente piensa sobre él:

1. Tono (0–360) — La posición en la rueda de color. 0 es rojo, 120 es verde, 240 es azul y 360 vuelve al rojo.
2. Saturación (0–100%) — Qué tan vivo es el color. 0% es completamente gris; 100% es la versión más pura de ese tono.
3. Luminosidad (0–100%) — Qué tan claro u oscuro es. 0% siempre es negro, 100% siempre es blanco y 50% te da la versión más vibrante.

hsl(345, 100%, 60%)  → vivid pink
hsl(345, 100%, 80%)  → lighter pink (same hue, more light)
hsl(345, 30%, 60%)   → muted pink (same hue, less saturation)
hsl(200, 100%, 60%)  → vivid blue (different hue, same formula)

Cuándo usar HSL

• Cuando construyes paletas de color o sistemas de diseño de forma programática
• Cuando necesitas hacer un color "más claro" o "más apagado": solo ajusta L o S
• Cuando revisas el contraste de accesibilidad: las diferencias de luminosidad son fáciles de razonar
• En propiedades personalizadas de CSS cuando quieres ajustar tonos con calc()

Comparación lado a lado

Así se ve el mismo conjunto de colores en los tres formatos:

¿Qué formato deberías usar?

No existe un único formato "mejor". Cada uno encaja en un contexto distinto:

• Usa HEX como formato predeterminado en CSS y archivos de diseño. Es el más reconocido y compacto.
• Usa RGB cuando hagas matemáticas con color: mezclas, cálculos de opacidad o al pasar valores a APIs de canvas/WebGL.
• Usa HSL cuando necesites pensar en relaciones de color: construir paletas, crear estados hover o ajustar un color de marca a variantes más claras y más oscuras.

La buena noticia es que convertir entre estos formatos es instantáneo y sin pérdida. Todos describen los mismos 16,7 millones de colores, solo desde ángulos distintos. Piensa en HEX y RGB como el mismo idioma con alfabetos diferentes, y en HSL como un idioma completamente distinto que se corresponde perfectamente con los otros.

Conocer los tres formatos no significa que debas usarlos todos en todas partes. Significa elegir el adecuado para cada tarea y cambiar de uno a otro sin esfuerzo cuando el contexto cambia.