Resumen de la notación de colores
En el diseño y desarrollo web, los colores se representan de diversas formas. Las tres más comunes son:
- HEX (hexadecimal): como
#FF5733 - RGB (rojo, verde, azul): como
rgb(255, 87, 51) - HSL (tono-saturación-luminosidad): como
hsl(9, 100%, 60%)
Cada notación tiene su caso de uso adecuado. Comprender las relaciones de conversión entre ellas te permitirá trabajar con mayor soltura en el diseño.
Explicación detallada de los tres modelos de color
HEX hexadecimal
El formato de color web más utilizado. Comienza con #, seguido de 6 dígitos hexadecimales (o 3 abreviados). Cada par representa el valor de los canales rojo, verde y azul (00-FF).
# FF5733 → rojo=FF(255), verde=57(87), azul=33(51)
RGB Rojo, Verde, Azul
Es el modelo de color más intuitivo, que especifica directamente los valores de los canales rojo, verde y azul (0-255). En CSS también se puede añadir el canal de transparencia alfa, escribiéndolo como rgba(255, 87, 51, 0.5).
HSL Tono-Saturación-Luminosidad
El modelo de color más amigable para diseñadores:
- Tono (Hue): 0-360°, indica la posición en la rueda de colores
- Saturación (Saturation): 0-100%, la pureza del color
- Luminosidad (Lightness): 0-100%, el grado de claridad u oscuridad del color
La ventaja de HSL es que, cuando se quiere "el mismo tono pero más brillante", solo hay que ajustar el valor de luminosidad.
Fórmulas de conversión
HEX → RGB
R = parseInt(HEX[1..2], 16)
G = parseInt(HEX[3..4], 16)
B = parseInt(HEX[5..6], 16)
RGB → HSL
R' = R/255, G' = G/255, B' = B/255
Cmax = max(R', G', B')
Cmin = min(R', G', B')
Δ = Cmax - Cmin
H = 60° × (fórmula según el caso)
S = Δ / (1 - |2L - 1|)
L = (Cmax + Cmin) / 2
Sugerencias para la aplicación práctica
- Variables CSS: Usa HSL para definir los colores del tema, facilitando la generación de variantes ajustando el valor de luminosidad
- Sistemas de diseño: Gestiona los tonos de manera uniforme con HSL; modificar el matiz permite cambiar el tema globalmente
- Accesibilidad: Evalúa el contraste entre el color de primer plano y el de fondo mediante el valor de luminosidad
- Degradados de color: HSL permite crear transiciones de degradado más naturales
La conversión de códigos de color puede parecer básica, pero en el desarrollo real es una habilidad que se usa casi a diario.