Conversor de RGB a HSL

Conversor de RGB a HSL

rgb(59, 130, 246) se convierte a hsl(217, 91%, 60%). El tono de 217 grados coloca este color en la parte azul de la rueda de color, 91% de saturación significa que esta casi completamente vivo y 60% de claridad lo hace de brillo medio. HSL separa la identidad del color de la intensidad, lo que lo hace mucho más fácil de trabajar programaticamente que RGB.

Que Significa HSL

HSL significa Tono (Hue), Saturación (Saturation), Claridad (Lightness). Cada componente describe una propiedad diferente de un color:

Por Que HSL es Mejor para Color Programatico

Con RGB no hay un canal directo para la claridad. Para aclarar rgb(59, 130, 246), necesitas escalar los tres canales hacia 255 manteniendo sus proporciones. Para oscurecer, escala hacia 0. La matemática es propensa a errores y no intuitiva.

Con HSL ajustas un solo valor:

/* Color base */
--color: hsl(217, 91%, 60%);

/* Variante mas clara */
--color-light: hsl(217, 91%, 75%);

/* Variante mas oscura */
--color-dark: hsl(217, 91%, 40%);

/* Saturación reducida */
--color-muted: hsl(217, 30%, 60%);

/* Color complementario */
--color-complement: hsl(37, 91%, 60%);

La Función hsl() en CSS

CSS acepta colores HSL de forma nativa:

/* Sintaxis moderna (CSS Color Level 4) */
color: hsl(217 91% 60%);

/* Con alfa */
color: hsl(217 91% 60% / 0.5);

/* Sintaxis heredada */
color: hsla(217, 91%, 60%, 0.5);

HSL en Sistemas de Diseño

Las propiedades personalizadas basadas en HSL son un patrón estándar para theming:

:root {
  --brand-hue: 217;
  --brand-saturation: 91%;

  --color-50:  hsl(var(--brand-hue) var(--brand-saturation) 95%);
  --color-500: hsl(var(--brand-hue) var(--brand-saturation) 60%);
  --color-900: hsl(var(--brand-hue) var(--brand-saturation) 20%);
}

Cambiar un solo valor --brand-hue cambia el tono de toda la marca mientras preserva el contraste y la jerarquia. Cambiar --brand-saturation produce una paleta apagada sin modificar el brillo relativo.

La Matemática de Conversión

La conversión de RGB a HSL requiere varios pasos. Primero, normaliza los canales RGB al rango 0-1. Encuentra los valores máximo y mínimo entre ellos. La claridad es el promedio del máximo y mínimo. La saturación es 0 si el máximo y mínimo son iguales (gris); de lo contrario, es la diferencia dividida por 1 menos el valor absoluto de 2L - 1. El tono depende de que canal es el máximo y se calcula como un desplazamiento basado en la diferencia relativa de los canales.