¿Qué es la conversión de RGB a HSL?
El modelo RGB define un color mezclando luz Roja, Verde y Azul (Red, Green, Blue), cada una en una escala de 0 a 255. El modelo HSL describe ese mismo color con tres valores mucho más intuitivos: el Tono (la posición del color en la rueda cromática de 0 a 360°), la Saturación (cuán vivo es, de 0 a 100%) y la Luminosidad (cuán claro u oscuro es, de 0 a 100%). A los diseñadores les suele resultar más cómodo trabajar con HSL, porque ajustar la luminosidad o la saturación se traduce de forma directa en «más claro», «más oscuro», «más vivo» o «más apagado».
Cómo usar este conversor
Introduce los valores de Rojo, Verde y Azul de tu color, cada uno entre 0 y 255. La calculadora devuelve al instante el equivalente en HSL, listo para pegar en tu CSS como hsl(H, S%, L%).
La fórmula explicada
Primero se normaliza cada canal dividiéndolo entre 255 para obtener valores entre 0 y 1. Llamemos max y min al mayor y al menor de esos valores. La luminosidad es \(L = (max + min) / 2\). Si max es igual a min, el color es un tono de gris, por lo que tanto la saturación como el tono valen 0. En caso contrario, la saturación es \((max - min) / (2 - max - min)\) cuando \(L > 0{,}5\), y \((max - min) / (max + min)\) cuando \(L \le 0{,}5\). El tono se calcula a partir del canal que sea el máximo y se escala a grados (0-360).
$$L = \frac{C_{max} + C_{min}}{2}, \quad S = \begin{cases} \dfrac{\Delta}{2 - C_{max} - C_{min}} & L > 0.5 \\[0.6em] \dfrac{\Delta}{C_{max} + C_{min}} & L \le 0.5 \end{cases}$$$$\text{where}\quad \left\{ \begin{aligned} R &= \frac{\text{Red}}{255}, \; G = \frac{\text{Green}}{255}, \; B = \frac{\text{Blue}}{255} \\ C_{max} &= \max(R,G,B), \; C_{min} = \min(R,G,B), \; \Delta = C_{max} - C_{min} \end{aligned} \right.$$$$H = 60^{\circ} \times \begin{cases} \left(\dfrac{G - B}{\Delta}\right) \bmod 6 & C_{max} = R \\[0.7em] \dfrac{B - R}{\Delta} + 2 & C_{max} = G \\[0.7em] \dfrac{R - G}{\Delta} + 4 & C_{max} = B \end{cases}$$
Ejemplo resuelto
Para el rojo tomate RGB(255, 99, 71): normalizado = (1,0; 0,388; 0,278). \(max = 1{,}0\) y \(min = 0{,}278\), así que \(L = 0{,}639 \to 63{,}9\%\). Como \(L > 0{,}5\),
$$S = \frac{1{,}0 - 0{,}278}{2 - 1{,}0 - 0{,}278} = \frac{0{,}722}{0{,}722} = 1{,}0 \to 100\%$$El máximo es el rojo, por lo que
$$H = 60 \times \left(\frac{0{,}388 - 0{,}278}{0{,}722}\right) = 60 \times 0{,}1525 = 9{,}1^{\circ}$$Resultado: hsl(9, 100%, 64%).
Preguntas frecuentes
¿Por qué el tono es 0 en los grises? Cuando el rojo, el verde y el azul son iguales no hay un color dominante, así que el tono queda indefinido y, por convención, se indica como 0.
¿HSL es lo mismo que HSV/HSB? No. HSL y HSV comparten el tono, pero calculan de forma distinta la saturación y el tercer valor; esta herramienta devuelve HSL.
¿Puedo pegar el resultado directamente en CSS? Sí. Los navegadores modernos aceptan hsl(9, 100%, 64%) sin problema como valor de color.
