¿Qué es el conversor de HSL a RGB?
Esta herramienta convierte un color expresado en el modelo HSL —tono (Hue), saturación (Saturation) y luminosidad (Lightness)— al modelo RGB que usan las pantallas, el CSS y los archivos de imagen. El modelo HSL resulta muy intuitivo para los diseñadores porque separa el «color» en sí (el tono) de lo vivo que es (la saturación) y de lo claro u oscuro que resulta (la luminosidad), mientras que el RGB describe ese mismo color como cantidades de luz roja, verde y azul. La conversión es exacta y funciona con cualquier valor HSL válido.
Cómo usarlo
Introduce el tono en grados (0–360), la saturación como porcentaje (0–100) y la luminosidad como porcentaje (0–100). La calculadora te devuelve los valores equivalentes en formato rgb(r, g, b), cada uno de 0 a 255, junto con una muestra de color en tiempo real para que confirmes el resultado de un vistazo.
La fórmula explicada
Primero se escalan la saturación y la luminosidad al rango de 0 a 1. El croma se calcula como $$C = (1 - |2L - 1|)\,S$$ y representa la intensidad cromática del resultado. Un valor auxiliar $$X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)$$ se encarga de la mezcla intermedia dentro de cada sextante de 60° de tono, y $$m = L - \tfrac{C}{2}$$ desplaza todo para que coincida con la luminosidad solicitada. Según el sector de 60° en el que caiga el tono, los valores C, X y 0 se asignan a R, G y B en un orden concreto; después se suma m y cada canal se multiplica por 255 y se redondea.
Ejemplo resuelto
Para HSL(210°, 50%, 50%): \(S = 0{,}5\) y \(L = 0{,}5\). $$C = (1 - |0|)\cdot 0{,}5 = 0{,}5$$ \(H/60 = 3{,}5\), por lo que \((3{,}5 \bmod 2) = 1{,}5\) y $$X = 0{,}5\cdot(1 - |1{,}5 - 1|) = 0{,}25$$ $$m = 0{,}5 - 0{,}25 = 0{,}25$$ El tono de 210° está en el sector 3 (180–240°), lo que da \((R',G',B') = (0,\ X,\ C) = (0,\ 0{,}25,\ 0{,}5)\). Sumando m y multiplicando por 255: \(R = 64\), \(G = 128\), \(B = 191\) → rgb(64, 128, 191).
Preguntas frecuentes
¿Qué rangos usan los valores de entrada? El tono va de 0 a 360 grados; la saturación y la luminosidad van de 0 a 100 por ciento.
¿Por qué se redondean los valores? Los canales RGB deben ser números enteros de 0 a 255, así que el resultado escalado se redondea al entero más cercano.
¿Se puede obtener un gris? Sí: pon la saturación a 0 con cualquier tono y R, G y B serán todos iguales al valor de luminosidad escalado de 0 a 255.
