Convertir HSL a hex

Qué es convertir HSL a hex

HSL describe un color como un punto en una rueda: el tono marca la posición angular de 0 a 360 grados, la saturación indica cuán intenso es y la luminosidad, cuán claro u oscuro. El hex, en cambio, es la forma que casi siempre pide una hoja de estilos, un editor de diseño o un archivo SVG: seis dígitos hexadecimales (u ocho, con alfa) que codifican directamente el rojo, el verde y el azul. Convertir HSL a hex traduce el color de un sistema pensado para elegirlo a mano al sistema que el resto del ecosistema web espera recibir.

Esta herramienta acepta un valor hsl(212, 76%, 58%) completo o solo los tres números en el campo de texto, y también los campos de tono, saturación y luminosidad por separado si prefieres ajustar cada uno con flechas o el teclado; el hex correspondiente se calcula al momento.

Es la dirección natural cuando el punto de partida es la idea del color —«un azul medio saturado, ni muy claro ni muy oscuro»— y el destino final es una propiedad CSS, un token de diseño o cualquier campo que solo admite hex.

Cómo convertir HSL a hex

1. Escribe el color en HSL. Usa el campo de texto para pegar un valor como hsl(212, 76%, 58%) o solo los tres números separados por comas, o bien introduce el tono, la saturación y la luminosidad por separado en los tres campos numéricos de debajo; el resultado se actualiza mientras escribes, sin botón de enviar.
2. Copia el hex resultante. El muestrario grande y el valor hex aparecen de inmediato; haz clic en cualquiera de los dos para copiarlo al portapapeles.
3. Revisa los formatos y el color más cercano. La fila de otros formatos ofrece el mismo color en RGB y en HSL con su propio clic para copiar, junto con un enlace al color con nombre más parecido y al selector de color completo.

Para qué sirve esta conversión

Convertir de HSL a hex sirve para cuando eliges un color pensando en sus tres cualidades —qué tono, qué tan vivo, qué tan claro— en lugar de mirar directamente cifras de rojo, verde y azul, mucho menos intuitivas para razonar sobre un color. Es habitual llegar a un HSL concreto moviendo un control de tono y otro de luminosidad hasta dar con el matiz correcto, y necesitar después el hex porque es lo que pide el sistema de diseño, el CSS o la herramienta donde vas a usarlo.

También sirve para generar variaciones consistentes de un mismo tono: fijas el tono y la saturación y solo mueves la luminosidad para obtener una escala de más claro a más oscuro, y conviertes cada paso a hex para tener los códigos exactos que necesitarás en el proyecto.

Una vez tienes el hex, la fila de otros formatos te da también el RGB correspondiente sin conversiones adicionales.

Qué tan exacta es esta conversión

El cálculo de HSL a hex, en sí mismo, es exacto: dados un tono, una saturación y una luminosidad, hay una única fórmula que produce el rojo, el verde y el azul correspondientes, sin más redondeo que el paso final a un entero de 0 a 255. El límite no está en esta dirección de la conversión, sino en el sistema de partida.

El HSL que se muestra en pantalla —aquí y en cualquier herramienta parecida— usa grados y porcentajes enteros, y esa cuadrícula es mucho más gruesa que la de los colores sRGB: solo hay 360 tonos por 101 saturaciones por 101 luminosidades enteras, 3.672.360 combinaciones en total, frente a 16.777.216 colores posibles en hex. Por eso, muchos hex distintos comparten el mismo HSL redondeado: si el valor HSL que introduces viene de leer el resultado ya redondeado de otra conversión, lo más probable es que el hex que obtengas aquí no sea exactamente el original.

La magnitud del desvío se puede medir directamente: convirtiendo los 16.777.216 colores sRGB a HSL redondeado y de vuelta a hex, el resultado coincide con el original en el 10,58% de los casos (1.775.570 colores) y se desvía en el 89,42% restante, casi siempre por muy poco —un punto en el peor canal en el 54,38% de los casos, dos puntos en el 32,06%—; el caso más extremo medido fue #02E4E6, que redondeado a hsl(181, 98%, 45%) y reconvertido da #02DFE3. A plena precisión, sin ese redondeo, la ida y vuelta es exacta en los 16.777.216 colores.

Una nota aparte para la saturación: si la fijas en 0 para obtener un gris, el tono deja de tener efecto alguno —cualquier valor de tono con saturación 0 y la misma luminosidad da exactamente el mismo gris—, porque en ese punto no hay ninguna dirección de color que representar.

Por qué es gratis

El cálculo de HSL a hex se hace por completo en tu navegador, con el código corriendo en tu propio equipo: no se sube ni se guarda nada en un servidor. Al no depender de infraestructura que cueste por uso, la herramienta no requiere registro, no añade marca de agua al resultado y no limita cuántas veces la uses.