¿Qué es un conversor de HSL a hexadecimal?
Esta herramienta convierte un color expresado en el modelo HSL —tono (Hue), saturación (Saturation) y luminosidad (Lightness)— en la notación hexadecimal que se usa en CSS, en los programas de diseño y en el desarrollo web. El modelo HSL resulta muy intuitivo para las personas: el tono elige el color en la rueda cromática, la saturación regula su intensidad y la luminosidad determina si es más oscuro o más claro. El hexadecimal (por ejemplo #3F7FBF) es, en cambio, el formato que realmente interpretan los navegadores y las herramientas.
Cómo usarlo
Introduce el tono de 0 a 360 grados, la saturación de 0 a 100 por ciento y la luminosidad de 0 a 100 por ciento, y obtendrás de inmediato el código hexadecimal resultante, los valores de cada canal RGB y una muestra de color en vivo. La conversión es universal, sirve para cualquier color y no necesitas instalar ningún programa.
La fórmula explicada
La conversión calcula primero el croma \(C = (1 - |2L - 1|)\cdot S\), donde S y L son fracciones entre 0 y 1. Un valor auxiliar \(X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)\) gestiona la transición entre los colores primarios, y un desplazamiento de brillo \(m = L - \tfrac{C}{2}\) ajusta el resultado a la luminosidad correcta. Según el sector de 60° en el que caiga el tono, los canales (R′,G′,B′) se asignan a partir de C, X y 0. Cada canal final se obtiene con \(\text{round}((c' + m)\cdot 255)\), y la cadena hexadecimal no es más que el valor de dos dígitos en hexadecimal de R, G y B unidos entre sí.
$$\begin{gathered} \text{Hex} = \texttt{\#}\,\text{HH}_{R}\,\text{HH}_{G}\,\text{HH}_{B} \\[1.5em] \text{where}\quad \left\{ \begin{aligned} C &= (1 - |2L - 1|)\cdot S \\ X &= C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right) \\ m &= L - \tfrac{C}{2} \\ (R,G,B) &= \text{round}\big((R^{\prime}+m,\,G^{\prime}+m,\,B^{\prime}+m)\cdot 255\big) \\ H &= \text{Hue},\quad S = \dfrac{\text{Sat}}{100},\quad L = \dfrac{\text{Light}}{100} \end{aligned} \right. \end{gathered}$$
Ejemplo resuelto
Para HSL(210, 50%, 50%): S = 0,5 y L = 0,5, por lo que \(C = (1 - |0|)\times 0{,}5 = 0{,}5\). \(H/60 = 3{,}5\), así que \((3{,}5 \bmod 2) = 1{,}5\) y \(X = 0{,}5\times(1 - |0{,}5|) = 0{,}25\). \(m = 0{,}5 - 0{,}25 = 0{,}25\). El tono 210 cae en el sector 3 (180–240), lo que da (R′,G′,B′) = (0, X, C). Por tanto \(R = \text{round}(0{,}25\times 255) = 64\), \(G = \text{round}(0{,}5\times 255) = 128\) y \(B = \text{round}(0{,}75\times 255) = 191\) → #4080BF.
Preguntas frecuentes
¿El tono da la vuelta? Sí: un tono de 360 es exactamente el mismo rojo que el de 0, y la herramienta normaliza cualquier valor al rango 0–360.
¿Por qué a veces mis canales varían en una unidad? El redondeo al entero más cercano puede desplazar un canal ±1 frente a otras herramientas que truncan el valor; redondear es la opción más precisa.
¿Se puede obtener un gris? Sí: pon la saturación a 0 con cualquier tono y los tres canales serán iguales a \(\text{round}(L\times 255)\), generando un gris neutro.
