¿Qué es el conversor de HSL a RGB?
HSL son las siglas en inglés de Hue, Saturation y Lightness, es decir, tono, saturación y luminosidad: una forma intuitiva de describir un color. El tono es un ángulo dentro de la rueda cromática (0-360°), la saturación indica la intensidad (0-100%) y la luminosidad expresa lo claro u oscuro que es el color (0-100%). El modelo RGB describe ese mismo color mediante tres canales —rojo, verde y azul (Red, Green, Blue)—, cada uno con valores de 0 a 255, que es el formato que utilizan las pantallas, el CSS y los archivos de imagen. Este conversor traduce un color HSL a su equivalente exacto en RGB.
Cómo usarlo
Introduce el tono en grados, la saturación en porcentaje y la luminosidad en porcentaje. La calculadora devuelve al instante el trío rgb(r, g, b) correspondiente y muestra una muestra de color en vivo para que puedas comprobar el resultado de un vistazo.
La fórmula explicada
Primero convierte S y L en fracciones (0-1). El croma representa la viveza del color: \( C = (1 - |2L - 1|)\cdot S \). El componente intermedio es \( X = C\,(1 - |(H/60 \bmod 2) - 1|) \), y el valor de ajuste \( m = L - C/2 \) desplaza todo hasta la luminosidad correcta. El tono se divide en seis sextantes de 60° cada uno; cada sextante asigna C, X y 0 a los canales R, G y B en un orden concreto. Por último, suma m a cada componente y multiplica por 255 (redondeando al entero más cercano).
$$(R,G,B) = \big( (R_1+m)\cdot 255,\; (G_1+m)\cdot 255,\; (B_1+m)\cdot 255 \big)$$ $$\text{where}\quad \left\{ \begin{aligned} C &= (1 - |2L - 1|)\cdot S \\ X &= C\,(1 - |(H/60 \bmod 2) - 1|) \\ m &= L - \tfrac{C}{2} \\ S &= \frac{\text{Saturation }(\%)}{100},\quad L = \frac{\text{Lightness }(\%)}{100} \\ H &= \text{Hue }(^{\circ}) \end{aligned} \right.$$Ejemplo resuelto
Para HSL(210°, 50%, 60%): \(S = 0{,}5\), \(L = 0{,}6\). \( C = (1 - |1{,}2 - 1|)\times 0{,}5 = (1 - 0{,}2)\times 0{,}5 = 0{,}4 \). \( H/60 = 3{,}5 \), así que \( X = 0{,}4 \times (1 - |3{,}5 \bmod 2 - 1|) = 0{,}4 \times (1 - 0{,}5) = 0{,}2 \). \( m = 0{,}6 - 0{,}2 = 0{,}4 \). El sextante 3 (\(\le H/60 < 4\)) da \( (R',G',B') = (0, X, C) = (0,\ 0{,}2,\ 0{,}4) \). Suma m: \( (0{,}4,\ 0{,}6,\ 0{,}8) \times 255 = \) (102, 153, 204).
Preguntas frecuentes
¿Por qué se redondean mis números RGB? Los canales RGB son números enteros del 0 al 255, por lo que los valores escalados se redondean al entero más cercano.
¿Qué resulta con una saturación del 0%? Un color totalmente desaturado es un gris cuyo valor depende únicamente de la luminosidad: los tres canales RGB tienen el mismo valor.
¿Se ajusta el tono si introduzco un valor mayor que 360? Sí. El tono se toma módulo 360, así que 370° se comporta igual que 10°.
