Convertidor de HEX a HSL

HSL significa *hue* (matiz), *saturation* (saturación) y *lightness* (luminosidad): tres propiedades que se corresponden mejor con la forma en que los seres humanos perciben y describen el color que los canales rojo, verde y azul del modelo RGB. El matiz es un ángulo en el círculo cromático que va de 0 a 360 grados, donde 0 (y 360) corresponde al rojo, 120 al verde y 240 al azul. La saturación es un porcentaje que indica la intensidad del color, desde el 0 % (gris) hasta el 100 % (totalmente saturado). La luminosidad es un porcentaje que representa el brillo, desde el 0 % (negro), pasando por el 50 % (el color puro), hasta el 100 % (blanco). Esta estructura tridimensional hace que el modelo HSL sea intuitivo para el diseño de color: ajustar la luminosidad hace que un color sea más oscuro o más claro sin alterar su identidad, mientras que ajustar la saturación lo vuelve más apagado o más intenso sin modificar su matiz.

La conversión de HEX a HSL es un proceso de dos etapas. En primer lugar, la cadena HEX se convierte a valores RGB normalizados en el rango de 0 a 1. A partir de estos valores normalizados, se determinan los valores mínimo y máximo de los canales. La luminosidad L es el promedio del mínimo y el máximo. La saturación S se obtiene dividiendo el rango entre el mínimo y el máximo por un denominador que tiene en cuenta la luminosidad: (máx - mín) / (1 - |2L - 1|). El matiz H se determina según qué canal es el dominante (máximo) y la distancia de los otros canales respecto a él, generando un ángulo en el rango de 0 a 360. En el caso de colores en escala de grises, donde los tres canales son iguales, la croma es cero, la saturación es del 0 % y el matiz se establece convencionalmente en 0.

CSS admite la función de color `hsl()` desde la versión CSS3, y esta se ha vuelto cada vez más popular como herramienta para crear sistemas de color fáciles de mantener. Una biblioteca de componentes o un sistema de diseño que defina su paleta de colores en HSL puede generar fácilmente matices claros (mayor luminosidad), tonos oscuros (menor luminosidad) y variaciones de tono (menor saturación) mediante operaciones aritméticas simples en una sola dimensión, en lugar de ajustar tres canales RGB independientes. Convertir un color base de marca de HEX a HSL proporciona al sistema de diseño los valores canónicos de tono y saturación a partir de los cuales se puede derivar programáticamente una escala de color completa.

Los sistemas de temas claros y oscuros se benefician especialmente del modelo HSL. El fondo de un botón definido como `hsl(220, 80%, 55%)` en modo claro puede cambiarse a `hsl(220, 70%, 35%)` en modo oscuro ajustando únicamente el valor de luminosidad, manteniendo el mismo tono y aproximadamente la misma saturación. Sin HSL, lograr el mismo resultado en RGB o HEX requeriría calcular los tres canales de forma independiente, lo cual no resulta ni intuitivo ni matemáticamente sencillo. Este conversor proporciona a los desarrolladores los valores HSL correspondientes a sus colores definidos en HEX, permitiéndoles migrar dichos colores a un sistema de temas basado en HSL sin necesidad de rediseño visual.

Las herramientas de accesibilidad y la verificación de contraste también se benefician del modelo HSL. Aunque la luminosidad en HSL no es idéntica a la luminancia perceptiva (que sigue la definición de WCAG 2.x basada en RGB lineal con corrección gamma), existe una correlación suficiente para ofrecer una intuición útil en el diseño. Por lo general, los colores con una luminosidad HSL muy baja o muy alta presentan un menor contraste frente al blanco puro o al negro puro, respectivamente, y la representación HSL permite apreciar esto de inmediato a través de los valores numéricos. Los diseñadores que trabajan en sistemas de color compatibles con WCAG suelen utilizar HSL como formato de trabajo para generar paletas y, posteriormente, verifican las relaciones de contraste finales mediante una herramienta que tenga en cuenta la luminancia, una vez realizada la conversión.