Convertidor de HSL a HEX

La conversión de HSL a HEX es el proceso mediante el cual un color elegido o generado en el modelo HSL se transforma en un formato compacto y fácil de compartir, apto para cualquier contexto que admita HEX: hojas de estilo CSS, selectores de color en herramientas de diseño, guías de marca y archivos de configuración. El sentido de esta conversión refleja un flujo de trabajo habitual en el diseño: los colores se seleccionan y ajustan en HSL gracias a la naturaleza intuitiva de sus dimensiones (tono para la identidad, saturación para la intensidad y luminosidad para el brillo), para luego obtenerse en formato HEX, que es el estándar que requieren la mayoría de las herramientas y bases de código. Este conversor actúa como puente entre la fase de diseño y la de implementación.

El algoritmo de conversión calcula valores RGB intermedios a partir de la terna HSL utilizando la fórmula estándar del módulo de color CSS 3. En primer lugar, el matiz se normaliza al rango de 0 a 360 mediante aritmética modular, de modo que valores como 380 o -20 se procesen correctamente. La saturación y la luminosidad se dividen por 100 para normalizarlas al rango de 0 a 1. La croma C se calcula como (1 - |2L - 1|) × S; un componente secundario X se calcula a partir de la posición del matiz dentro de su sector de 60 grados; y un desplazamiento de luminosidad m se calcula como L - C/2. El sector del matiz (0–60, 60–120, y así sucesivamente hasta 300–360) determina cuál de las seis fórmulas asigna C, X y 0 a los tres valores previos al desplazamiento (R1, G1, B1). Por último, cada canal se escala sumando m y multiplicando por 255, redondeando al entero más cercano y formateando el resultado como una cadena hexadecimal de dos dígitos.

Los sistemas de diseño que generan paletas de colores sistemáticas mediante aritmética HSL requieren esta conversión como paso final. Un generador de tokens podría definir un tono base de 220 y calcular un rango de valores de luminosidad desde el 95 % (casi blanco) hasta el 10 % (casi negro) para producir una escala de color de diez pasos. Aunque cada paso se representa internamente como una tríada HSL, el token de diseño final —almacenado en un archivo JSON o de variables CSS— debe estar en formato HEX para garantizar la máxima compatibilidad. Al procesar cada valor HSL generado a través de este conversor, se obtiene la paleta en el formato requerido por el sistema de tokens de diseño, sin necesidad de seleccionar colores manualmente.

Las propiedades personalizadas de CSS (variables CSS) definidas en formato HSL permiten ajustar la luminosidad o la saturación en tiempo de ejecución mediante `calc()`, lo que las hace muy populares en sistemas de temas con múltiples modos de color. Sin embargo, algunos entornos de destino —como clientes de correo electrónico, navegadores integrados antiguos, motores de renderizado SVG y ciertas cadenas de procesamiento de preprocesadores CSS— no admiten la función CSS `hsl()`. En estos casos, el diseño requiere exportar los valores HEX calculados para cada variante del tema, en lugar de depender de `hsl()` durante el renderizado. Esta herramienta de conversión permite al desarrollador calcular el valor HEX resultante para cada combinación HSL que utilizará el tema (por ejemplo, el color principal con niveles de luminosidad del 40 %, 50 % y 60 %) e incluirlos directamente en la hoja de estilos como valores HEX de respaldo.

Los flujos de trabajo de accesibilidad del color también emplean la conversión de HSL a HEX. Las herramientas que calculan las relaciones de contraste WCAG suelen operar con valores lineales sRGB derivados de entradas HEX o RGB, y no directamente de valores HSL sin procesar. Al diseñar una paleta de colores accesible en HSL —ajustando sistemáticamente la luminosidad para alcanzar la relación de contraste requerida de 4,5:1—, los valores HSL que superan la verificación de accesibilidad deben exportarse en formato HEX para su integración en una biblioteca de componentes o en un sistema de tokens de diseño. Convertir los valores HSL finales aprobados a HEX al concluir el proceso de revisión de accesibilidad garantiza que la paleta quede documentada en el formato que requieren los desarrolladores y las herramientas de diseño, preservando al mismo tiempo la lógica sistemática HSL utilizada para generarla.