RGB a HSL
Escribe los valores de rojo, verde y azul de 0 a 255 para obtener al instante los valores HSL, HSV (HSB), HWB y HEX correspondientes. Cada resultado tiene un botón de copiar, y la conversión inversa muestra si el HSL redondeado vuelve exactamente a tu RGB.
Última actualización:
1 = totalmente opaco; añade una parte / alfa al CSS
Cómo usar RGB a HSL
- Introduce los valores RGB. Escribe rojo, verde y azul de 0 a 255, o haz clic en uno de los colores de ejemplo.
- Añade alfa si lo necesitas. Deja alfa en 1 para un color sólido o introduce 0-1 para transparencia.
- Elige la precisión. Los números enteros sirven para CSS; elige 2 decimales para volver exactamente al RGB.
- Copia el resultado. Usa los botones Copiar junto a las cadenas CSS HSL, hsl() antiguo, HEX, HSV o HWB.
- Explora tintes y sombras. Haz clic en cualquier muestra de la escala de luminosidad para copiar su código HEX.
Fórmula de RGB a HSL
HSL describe un color por su tono (el ángulo en la rueda de color, 0-360°), su saturación (cuánto se aleja del gris) y su luminosidad (de negro en 0% a blanco en 100%). El convertidor usa la fórmula estándar de CSS Color Module Level 4:
- Escala cada canal a 0-1: R′ = R / 255, G′ = G / 255, B′ = B / 255.
- Cmax = max(R′, G′, B′), Cmin = min(R′, G′, B′), Δ = Cmax − Cmin.
- L = (Cmax + Cmin) / 2.
- S = 0 si Δ = 0; si no, S = Δ / (1 − |2L − 1|).
- H = 60° × ((G′ − B′) / Δ mod 6) si Cmax es R′; 60° × ((B′ − R′) / Δ + 2) si Cmax es G′; 60° × ((R′ − G′) / Δ + 4) si Cmax es B′.
HSV/HSB comparte el tono; su valor es V = Cmax y su saturación es Δ / Cmax.
Colores RGB comunes en HSL y HSV
| Color | RGB | HSL | HSV / HSB | HEX |
|---|---|---|---|---|
| Rojo | 255, 0, 0 | 0°, 100%, 50% | 0°, 100%, 100% | #FF0000 |
| Naranja | 255, 165, 0 | 39°, 100%, 50% | 39°, 100%, 100% | #FFA500 |
| Amarillo | 255, 255, 0 | 60°, 100%, 50% | 60°, 100%, 100% | #FFFF00 |
| Verde | 0, 128, 0 | 120°, 100%, 25% | 120°, 100%, 50% | #008000 |
| Cian | 0, 255, 255 | 180°, 100%, 50% | 180°, 100%, 100% | #00FFFF |
| Azul cielo | 135, 206, 235 | 197°, 71%, 73% | 197°, 43%, 92% | #87CEEB |
| Azul | 0, 0, 255 | 240°, 100%, 50% | 240°, 100%, 100% | #0000FF |
| Púrpura | 128, 0, 128 | 300°, 100%, 25% | 300°, 100%, 50% | #800080 |
| Gris | 128, 128, 128 | 0°, 0%, 50% | 0°, 0%, 50% | #808080 |
| Blanco | 255, 255, 255 | 0°, 0%, 100% | 0°, 0%, 100% | #FFFFFF |
Cuándo usar HSL en lugar de RGB
HSL es más fácil de ajustar a mano: mantén el tono y la saturación y cambia solo la luminosidad para crear estados hover, tintes y sombras, o gira el tono en pasos de 30° para obtener colores análogos. RGB y HEX son lo que guardan las pantallas y los archivos de imagen, así que convierte de vuelta con los valores inversos cuando necesites colores de píxel exactos.
Preguntas frecuentes
¿Cómo se convierte RGB a HSL?
Divide R, G y B entre 255. Busca el valor mayor (Cmax) y el menor (Cmin) y su diferencia Δ. Luminosidad L = (Cmax + Cmin) / 2. Si Δ = 0 el color es gris (H = S = 0); si no, S = Δ / (1 − |2L − 1|), y el tono depende de qué canal es el mayor: 60 × ((G − B) / Δ mod 6) para el rojo, 60 × ((B − R) / Δ + 2) para el verde y 60 × ((R − G) / Δ + 4) para el azul.
¿Qué diferencia hay entre HSL y HSV (HSB)?
Ambos usan el mismo ángulo de tono. HSL sitúa los colores puros en 50% de luminosidad, y el 100% de luminosidad siempre es blanco. HSV (también llamado HSB) sitúa los colores puros en 100% de valor, y el 100% de valor con 0% de saturación es blanco. Los selectores de color de herramientas de diseño como Photoshop y Figma usan HSB, mientras que CSS usa HSL.
¿Por qué al convertir HSL de nuevo a RGB salen números algo distintos?
Los valores HSL suelen redondearse a grados y porcentajes enteros. El redondeo puede desplazar un canal en 1 o 2 al convertir de vuelta. Elige 2 decimales y la conversión de ida y vuelta devuelve tus valores RGB exactos.
¿Cuánto es RGB 255, 0, 0 en HSL?
El rojo puro rgb(255, 0, 0) es hsl(0, 100%, 50%) y hsv(0, 100%, 100%).
¿Cómo se escribe HSL en CSS?
El CSS moderno acepta hsl(150 39% 30%) con espacios y un alfa opcional tras una barra, por ejemplo hsl(150 39% 30% / 0.5). La sintaxis antigua con comas hsl(150, 39%, 30%) y hsla(150, 39%, 30%, 0.5) sigue funcionando en todos los navegadores.
¿Qué es HWB?
HWB significa tono (hue), blancura (whiteness) y negrura (blackness). La blancura es el canal RGB más pequeño y la negrura es 1 menos el mayor, ambos en porcentaje. Se admite en CSS con hwb() y es fácil de ajustar a mano.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.