Conversor
ColorConvertidor de HSL a RGB
Convierte valores HSL a RGB al instante con vista previa en vivo. Herramienta online gratuita y precisa para diseño web, CSS y manipulación de colores.
¿Cómo convertir HSL a RGB?
HSL (Tono, Saturación, Luminosidad) es un modelo de color intuitivo, más cercano a la percepción humana. El Tono va de 0-360°, la Saturación de 0-100% y la Luminosidad de 0-100%.
La conversión de HSL a RGB requiere calcular valores intermedios y mapearlos a coordenadas RGB. Esta herramienta lo hace automáticamente y muestra los valores RGB y el código hex resultante.
¿Qué es el modelo de color HSL?
HSL significa Tono, Saturación y Luminosidad. Es un modelo cilíndrico que representa los colores de forma más intuitiva que RGB. Tono (0-360°) indica el tipo de color, Saturación (0-100%) su intensidad y Luminosidad (0-100%) qué tan claro u oscuro es.
¿Por qué usar HSL en lugar de RGB?
HSL es más intuitivo para seleccionar y manipular colores. Permite crear variaciones (claros/oscuros) ajustando la luminosidad, y colores más o menos vivos ajustando la saturación. Es muy útil para esquemas de color en diseño; RGB sigue siendo necesario para implementación.
¿Cómo funciona el Tono en HSL?
El Tono es un ángulo en una rueda de color de 0 a 360°. Rojo está en 0° (y 360°), verde en 120° y azul en 240°. Ajustando el Tono se desplaza a cualquier color del espectro manteniendo saturación y luminosidad.
¿Diferencia entre HSL y HSV?
Ambos son modelos cilíndricos, pero difieren en el brillo. En HSL la Luminosidad va de negro (0%) a blanco (100%) pasando por el color puro (50%); en HSV el Valor va de negro (0%) al color más brillante (100%). HSL suele ser más simétrico para manipular colores.
Conversiones HSL a RGB comunes
| Vista previa | Color | HSL | RGB | Hex |
|---|---|---|---|---|
| Negro | (0°, 0%, 0%) | (0, 0, 0) | #000000 | |
| Blanco | (0°, 0%, 100%) | (255, 255, 255) | #FFFFFF | |
| Rojo | (0°, 100%, 50%) | (255, 0, 0) | #FF0000 | |
| Lima | (120°, 100%, 50%) | (0, 255, 0) | #00FF00 | |
| Azul | (240°, 100%, 50%) | (0, 0, 255) | #0000FF | |
| Amarillo | (60°, 100%, 50%) | (255, 255, 0) | #FFFF00 | |
| Cian | (180°, 100%, 50%) | (0, 255, 255) | #00FFFF | |
| Magenta | (300°, 100%, 50%) | (255, 0, 255) | #FF00FF | |
| Plata | (0°, 0%, 75%) | (191, 191, 191) | #BFBFBF | |
| Gris | (0°, 0%, 50%) | (128, 128, 128) | #808080 |