RGB indica a una pantalla cuánto emitir de luz; HSL te dice cómo se percibe el color. Convertir los tres canales a tono, saturación y luminosidad hace que sea fácil ajustar un color a mano.
Cómo funciona la conversión de RGB a HSL
- Divide R, G y B entre 255 para que cada valor quede entre 0 y 1.
- Toma el máximo y el mínimo de los tres — su promedio es la luminosidad L.
- Si máximo y mínimo son iguales, el color es gris: tono y saturación son ambos 0.
- Si no, deriva S a partir de la diferencia entre máximo y mínimo, y lee H según cuál canal sea el máximo.
Ejemplo práctico
Exacto en principio. Como H, S y L normalmente se muestran redondeados a números enteros, convertir de vuelta puede desplazar un canal uno o dos pasos.
RGB y HSL explicados
¿Qué es RGB?
RGB describe un color como tres canales de luz — rojo, verde y azul — cada uno de 0 a 255. Refleja cómo funcionan las pantallas: los tres a 255 dan blanco, los tres a 0 dan negro. RGB es la opción correcta cuando necesitas calcular con un color, y rgba() añade transparencia encima.
- Sintaxis:
- rgb(R, G, B)
- Rango:
- 0–255 por canal
- Mejor para:
- código, canvas, transparencia con rgba()
¿Qué es HSL?
HSL divide un color en tono (0–360° en la rueda de color), saturación (qué tan colorido, 0–100%) y luminosidad (qué tan claro, 0–100%). Como cada parte coincide con la forma en que la gente describe el color, HSL es el formato más sencillo para crear tintes, sombras y paletas coherentes — a mano o en código.
- Sintaxis:
- hsl(H, S%, L%)
- Rango:
- 0–360°, 0–100%, 0–100%
- Mejor para:
- paletas, tintes y sombras, theming
Tabla de referencia de RGB a HSL
Los colores CSS más comunes, convertidos de RGB a HSL.
| Color | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |