¿Qué es el conversor de color Hex a HSL?
Esta herramienta transforma un código de color hexadecimal (la conocida notación #RRGGBB que se usa en CSS y en los programas de diseño) al modelo de color HSL: tono (Hue), saturación (Saturation) y luminosidad (Lightness). El modelo HSL suele resultar más intuitivo que el hexadecimal o el RGB porque describe el color tal y como lo percibimos las personas: de qué color se trata (tono), qué tan vivo es (saturación) y qué tan claro u oscuro es (luminosidad). Funciona con cualquier color basado en RGB y no depende de ningún país ni estándar más allá de la notación hexadecimal sRGB habitual.
Cómo se usa
Introduce un valor de color hexadecimal como #3498DB. Puedes incluir u omitir la almohadilla # inicial, y el formato corto de tres dígitos como #0AF se expande automáticamente a #00AAFF. El conversor devuelve el trío HSL equivalente, además de los valores decodificados de los canales rojo, verde y azul (de 0 a 255).
La fórmula explicada
Primero se divide el hexadecimal en sus bytes de rojo, verde y azul, y cada uno se divide entre 255 para normalizarlo al rango de 0 a 1. Llamemos max y min al mayor y al menor de estos tres valores. La luminosidad es simplemente su media: \(L = (\max + \min) / 2\). La saturación es 0 cuando max es igual a min (un gris). En caso contrario, si L > 0,5 entonces \(S = (\max - \min) / (2 - \max - \min)\); de lo contrario, \(S = (\max - \min) / (\max + \min)\). El tono depende de cuál sea el canal máximo y se escala a grados multiplicando por 60.
$$L = \frac{\max + \min}{2}, \quad S = \begin{cases} \dfrac{\max - \min}{2 - \max - \min}, & L > 0.5 \\[0.6em] \dfrac{\max - \min}{\max + \min}, & L \le 0.5 \end{cases}$$ $$\text{where}\quad \left\{ \begin{aligned} (R,G,B) &= \frac{\text{RGB from }\text{Hex Color}}{255} \\ \max &= \operatorname{max}(R,G,B),\ \min = \operatorname{min}(R,G,B) \end{aligned} \right.$$ $$H = 60^{\circ} \times \begin{cases} \dfrac{G - B}{d} \bmod 6, & \max = R \\[0.6em] \dfrac{B - R}{d} + 2, & \max = G \\[0.6em] \dfrac{R - G}{d} + 4, & \max = B \end{cases} \qquad d = \max - \min$$
Ejemplo práctico
Tomemos #3498DB: R = 52, G = 152, B = 219. Normalizados: \(r \approx 0{,}2039\), \(g \approx 0{,}5961\), \(b \approx 0{,}8588\). \(\max = b = 0{,}8588\), \(\min = r = 0{,}2039\), por lo que \(L = 0{,}5314\) (53,14 %). Como L > 0,5, $$S = \frac{0{,}6549}{2 - 1{,}0627} = 0{,}6987 \;(69{,}87\,\%).$$ El azul es el máximo, así que $$H = 60 \times \left(4 + \frac{0{,}2039 - 0{,}5961}{0{,}6549}\right) = 60 \times 3{,}4011 \approx 204{,}07^{\circ}.$$ Resultado: hsl(204, 70%, 53%).
Preguntas frecuentes
¿Admite el formato hexadecimal corto? Sí: los códigos de tres dígitos como #F0C se expanden de forma automática.
¿Son exactos los valores HSL? El tono, la saturación y la luminosidad se calculan con precisión total y solo se redondean al mostrarlos; también puedes consultar los valores sin redondear.
¿Es obligatoria la almohadilla? No, el conversor acepta los valores con o sin el # inicial.
