¿Qué es el conversor de RGB a HSL?
Esta herramienta transforma un color expresado en el modelo RGB (rojo, verde y azul, cada uno de 0 a 255) al modelo HSL (tono, saturación y luminosidad). Para los diseñadores, HSL suele resultar más intuitivo porque separa el matiz del color (el tono) de lo vivo que es (la saturación) y de lo claro u oscuro que aparece (la luminosidad). La conversión es universal y no depende de ningún dispositivo ni país.
Cómo usarlo
Introduce los valores de rojo, verde y azul de tu color, cada uno entre 0 y 255. Pulsa calcular para obtener la terna HSL equivalente, lista para pegar en tu CSS como hsl(H, S%, L%).
La fórmula al detalle
Primero se normaliza cada canal dividiéndolo entre 255, de modo que quede en el rango de 0 a 1. Llamamos max y min al mayor y al menor de esos tres valores, y definimos \(\Delta = C_{\max} - C_{\min}\). La luminosidad es \(L = (C_{\max} + C_{\min}) / 2\). La saturación es \(S = \Delta / (1 - \lvert 2L - 1 \rvert)\), o bien 0 cuando \(\Delta = 0\) (un gris). El tono se calcula a partir del canal que tenga el valor más alto, se multiplica por 60° y luego se ajusta para que quede dentro de 0–360°.
$$ L = \frac{C_{\max} + C_{\min}}{2}, \quad S = \frac{C_{\max} - C_{\min}}{1 - \lvert 2L - 1 \rvert} $$ $$ \text{where}\quad \left\{ \begin{aligned} R^{\prime} &= \frac{\text{Red}}{255}, \;\; G^{\prime} = \frac{\text{Green}}{255}, \;\; B^{\prime} = \frac{\text{Blue}}{255} \\ C_{\max} &= \max(R^{\prime}, G^{\prime}, B^{\prime}), \;\; C_{\min} = \min(R^{\prime}, G^{\prime}, B^{\prime}) \end{aligned} \right. $$ $$ H = 60^{\circ} \times \begin{cases} \dfrac{G^{\prime} - B^{\prime}}{\Delta} \bmod 6 & C_{\max} = R^{\prime} \\[0.6em] \dfrac{B^{\prime} - R^{\prime}}{\Delta} + 2 & C_{\max} = G^{\prime} \\[0.6em] \dfrac{R^{\prime} - G^{\prime}}{\Delta} + 4 & C_{\max} = B^{\prime} \end{cases} $$
Ejemplo resuelto
Tomemos el rojo tomate RGB(255, 99, 71). Normalizado: \(R=1\), \(G=0{,}388\), \(B=0{,}278\). \(\max=1\), \(\min=0{,}278\), \(\Delta=0{,}722\).
$$ L = \frac{1 + 0{,}278}{2} = 0{,}639 \to 63{,}9\,\% $$ $$ S = \frac{0{,}722}{1 - \lvert 2 \cdot 0{,}639 - 1 \rvert} = \frac{0{,}722}{0{,}722} = 1 \to 100\,\% $$Como \(\max = R\),
$$ H = 60 \times \frac{0{,}388 - 0{,}278}{0{,}722} = 60 \times 0{,}1525 \approx 9{,}13^{\circ} $$Resultado: hsl(9.13, 100%, 63.92%).
Preguntas frecuentes
¿Por qué la saturación es 0 en los grises? Cuando los tres canales son iguales, \(\Delta = 0\), así que no hay información de color y la saturación queda indefinida; por convención se fija en 0.
¿Se redondean H, S y L? En pantalla se muestran con dos decimales, pero los valores calculados internamente conservan toda su precisión.
¿Puedo hacer la conversión inversa? Sí: pasar de HSL a RGB es el proceso contrario, usando el sector del tono y la croma.
