HEX, RGB, HSL: Entendiendo los códigos de color web

Estás editando un sitio web y ves #FF5733 en el CSS. O estás trabajando con un diseñador que te envía rgb(255, 87, 51). O una herramienta de diseño muestra un color como hsl(11, 100%, 60%). Todos describen exactamente el mismo color, un rojo-anaranjado vivo, pero en tres formatos diferentes.

Si alguna vez te han confundido los códigos de color web, esta guía te lo aclarará en cinco minutos.

Cómo funcionan los colores digitales

Cada color en tu pantalla se crea mezclando tres colores primarios de luz: Rojo, Verde y Azul. Este es el modelo de color RGB. Variando la intensidad de cada canal desde cero (apagado) hasta el máximo (brillo completo), puedes crear cualquiera de los aproximadamente 16,7 millones de colores que una pantalla estándar puede mostrar.

• Rojo 255, Verde 0, Azul 0 = rojo puro
• Rojo 0, Verde 255, Azul 0 = verde puro
• Rojo 0, Verde 0, Azul 255 = azul puro
• Rojo 255, Verde 255, Azul 255 = blanco (todos los canales al máximo)
• Rojo 0, Verde 0, Azul 0 = negro (todos los canales apagados)
• Rojo 255, Verde 255, Azul 0 = amarillo (rojo + verde)

Cada formato de color usado en la web es simplemente una forma diferente de expresar estos valores de canal.

Colores HEX

Cómo se ven

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

Cómo funcionan

Un código de color HEX es una cadena de seis caracteres precedida por un símbolo de almohadilla. Los seis caracteres se dividen en tres pares, cada uno representando un canal de color en hexadecimal (base 16):

El hexadecimal usa los dígitos 0-9 y las letras A-F, donde A=10, B=11, C=12, D=13, E=14, F=15. Así que FF en hexadecimal equivale a 255 en decimal (15 × 16 + 15 = 255).

Desglosando #FF5733:

• FF = Rojo a 255 (máximo)
• 57 = Verde a 87
• 33 = Azul a 51

Esto produce un rojo-anaranjado vivo.

Forma abreviada

Cuando cada par tiene dos caracteres idénticos, puedes usar una abreviatura de tres caracteres:

• #FF0000 puede escribirse como #F00
• #3366FF puede escribirse como #36F
• #000000 puede escribirse como #000

Colores RGB

Cómo se ven

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

Cómo funcionan

La notación RGB indica directamente los valores de los canales rojo, verde y azul como números decimales de 0 a 255. Es el formato más intuitivo porque los números corresponden directamente a la intensidad de cada canal de luz.

rgb(255, 87, 51) significa:

• Rojo: 255 (máximo)
• Verde: 87 (aproximadamente un tercio)
• Azul: 51 (aproximadamente un quinto)

RGBA: Añadiendo transparencia

RGBA añade un cuarto valor para la opacidad (alfa), que va de 0 (totalmente transparente) a 1 (totalmente opaco):

rgba(255, 87, 51, 0.5)   /* 50% transparente */
rgba(0, 0, 0, 0.8)        /* 80% opaco negro */

Esto es útil para superposiciones, sombras y cualquier elemento de diseño que necesite mostrar contenido detrás.

Colores HSL

Cómo se ven

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

Cómo funcionan

HSL significa Hue (tono), Saturation (saturación), Lightness (luminosidad). En lugar de pensar en términos de mezcla de canales rojo/verde/azul, HSL describe el color de la forma en que los humanos piensan naturalmente sobre él.

Tono (Hue) es el color en sí, expresado como un grado en la rueda de color (0-360):

• 0° / 360° = Rojo
• 60° = Amarillo
• 120° = Verde
• 180° = Cian
• 240° = Azul
• 300° = Magenta

Saturación es cuán vivo es el color, de 0% (gris) a 100% (totalmente saturado).

Luminosidad es cuán claro u oscuro es el color, de 0% (negro) a 100% (blanco). 50% es la luminosidad "normal".

hsl(11, 100%, 60%) significa:

• Tono: 11° (rojo ligeramente anaranjado)
• Saturación: 100% (totalmente vivo)
• Luminosidad: 60% (ligeramente más claro de lo normal)

HSLA: Añadiendo transparencia

Como RGBA, HSLA añade un canal alfa:

hsla(11, 100%, 60%, 0.5)   /* 50% transparente */

Cuándo usar cada formato

Para desarrollo web

HEX es el estándar de facto. La mayoría del CSS se escribe con códigos HEX porque son compactos y todos los desarrolladores los reconocen.

Para sistemas de diseño

HSL es ideal para crear paletas de colores consistentes. Para crear variantes más claras y oscuras de un color de marca, simplemente ajustas el valor de luminosidad:

• Principal: hsl(210, 80%, 50%)
• Variante clara: hsl(210, 80%, 70%)
• Variante oscura: hsl(210, 80%, 30%)

El tono y la saturación se mantienen iguales, garantizando que las variantes son el mismo "color" a diferentes brillos.

Para transparencia

Usa RGBA o HSLA cuando necesites colores semitransparentes para superposiciones, sombras o efectos de cristal.

Convertir entre formatos

Con frecuencia necesitarás convertir entre formatos. Un diseñador envía valores HSL pero tu código usa HEX. Una guía de marca especifica RGB pero necesitas HSL para crear variantes.

Las matemáticas son sencillas pero tediosas de hacer manualmente. Una herramienta de conversión lo maneja al instante.

Empieza a trabajar con colores:

• Convertir códigos de color
• Herramienta de conversión de colores
• Generador de paletas de colores

Todas las herramientas son gratuitas y funcionan directamente en tu navegador.