Diferencia entre HEX, RGB y HSL: qué es cada uno y cuándo usarlo

HEX, RGB y HSL son tres formas distintas de escribir el mismo color en una pantalla. No cambian el color, solo la manera de anotarlo. HEX es un código corto fácil de copiar, RGB indica cuánta luz roja, verde y azul lleva, y HSL lo describe como lo haría una persona: qué tono es, qué tan vivo y qué tan claro. CMYK es aparte: se usa para imprimir.

Un mismo color escrito de cuatro formas

Toma este naranja como ejemplo. Todos estos códigos apuntan al mismo color:

Si pegas cualquiera de los tres primeros en una herramienta de diseño, verás exactamente el mismo naranja. El valor CMYK es una conversión aproximada, más abajo te explicamos por qué.

RGB: la mezcla de luz de las pantallas

Cada punto de una pantalla tiene tres luces: una roja, una verde y una azul. RGB son las iniciales en inglés de esos tres colores (red, green, blue).

Cada luz tiene un valor de 0 a 255. Cero es apagada y 255 es al máximo. Con las tres apagadas obtienes negro: rgb(0, 0, 0). Con las tres al máximo obtienes blanco: rgb(255, 255, 255).

En el ejemplo, rgb(255, 90, 31) significa rojo al máximo, un poco de verde y casi nada de azul. Por eso sale un naranja intenso.

HEX: el mismo RGB en versión corta

HEX no es un sistema distinto. Son los mismos tres valores de RGB, escritos en hexadecimal, una forma de contar que usa los números del 0 al 9 y las letras de la A a la F.

El código tiene seis caracteres después del numeral. Los dos primeros son el rojo, los dos del medio el verde y los dos últimos el azul.

Su ventaja es práctica: es una sola palabra que copias y pegas sin equivocarte. Por eso es el formato que casi siempre aparece en los manuales de marca. Da igual si lo escribes en mayúsculas o minúsculas.

HSL: el más fácil para ajustar un color

HSL describe el color con tres datos que se entienden a simple vista:

• H, tono: la posición en el círculo de colores, de 0 a 360 grados. 0 es rojo, 120 es verde y 240 es azul. El 16 del ejemplo cae entre el rojo y el naranja.
• S, saturación: qué tan vivo es, de 0% (gris) a 100% (color puro).
• L, luminosidad: qué tan claro es, de 0% (negro) a 100% (blanco).

Con RGB es difícil adivinar qué número mover para aclarar un color. Con HSL solo subes la luminosidad.

CMYK: el formato para imprimir

Las pantallas emiten luz. El papel no: recibe tinta. Por eso la imprenta usa otro sistema, CMYK, que mezcla cuatro tintas: cian, magenta, amarillo y negro. Cada una va de 0% a 100%.

Hay algo que debes saber antes de mandar a imprimir: las pantallas pueden mostrar colores más brillantes que los que logra la tinta. Un naranja muy vivo en el celular puede salir más apagado en papel. Además, el resultado depende del papel y de la máquina.

Por eso la conversión de HEX a CMYK es una aproximación. Si el color exacto es importante (por ejemplo, el de tu logo), pide una prueba impresa antes de hacer todo el tiraje.

Cuándo usar cada uno

• Para guardar los colores de tu marca: HEX. Es corto y lo aceptan casi todas las herramientas.
• Para editar fotos o video: RGB, que es como trabajan esos programas.
• Para sacar tonos claros y oscuros de un mismo color: HSL.
• Para tarjetas, volantes, empaques o avisos: CMYK, y siempre con prueba de impresión.

Cómo convertir un color y encontrar su código

No necesitas hacer cuentas. Con las herramientas de Daily Scroll lo resuelves en el navegador:

1. Si ya tienes el código, pégalo en el selector de color. Te lo muestra en HEX, RGB, HSL y CMYK, con sus tonos y el contraste con texto blanco y negro.
2. Si el color está en una foto o en un logo, usa identificar color: tocas el punto exacto de la imagen y te da el código.
3. Si quieres todos los colores principales de una imagen, la paleta de colores los extrae con su HEX.

Fuera de Daily Scroll, programas como Canva, Figma o Photoshop también muestran estos códigos en su selector de color.

Cuando ya tengas tus códigos, el siguiente paso es armar una combinación que funcione. Lo explicamos en la guía de cómo elegir colores para Instagram.