1. Introduce un valor
Escribe un número en el campo de entrada.
Convertir RGB a HSL
Este convertidor convierte instantáneamente. Ingresa un valor y el resultado aparece al instante.
Loading tool editor...
¿Cuándo necesitas convertir RGB a HSL?
HSL (Tono, Saturación, Luminosidad) es una representación de color alternativa más intuitiva para los humanos. Tono = ángulo de color (0–360°), Saturación = intensidad (0–100%), Luminosidad = claro/oscuro (0–100%).
HSL facilita las variaciones de color: ajustar luminosidad para tintes/sombras, saturación para versiones apagadas/vibrantes, tono para colores complementarios.
CSS soporta hsl() nativamente: hsl(14, 100%, 60%) = rgb(255, 87, 51) = #FF5733.
Todos los cálculos se ejecutan localmente en tu navegador.
¿Cómo usar el convertidor?
2. Lee el resultado
El resultado aparece instantáneamente.3. Copia o invierte
Copia el resultado o invierte la dirección de conversión.
¿Cuándo es útil este convertidor?
Manipulación de color CSS
HSL facilita estados hover: oscurecer reduciendo L, desaturar reduciendo S.Sistemas de diseño
Crea escalas de color consistentes variando la luminosidad.Teoría del color
HSL mapea el círculo cromático. Complementario = H+180°, análogo = H±30°.Accesibilidad
La luminosidad HSL ayuda a asegurar contraste suficiente. L bajo 50% = texto oscuro.
¿Qué hace diferente a este convertidor?
Privacidad total
Todos los cálculos se ejecutan localmente en tu navegador.Resultados en tiempo real
El resultado se actualiza mientras escribes.Conversión bidireccional
Convierte en ambas direcciones con un solo clic.Tabla de referencia
Tabla con valores comunes y descripciones contextuales.
¿Cómo funciona la conversión?
Normalizar RGB a 0–1. Encontrar máximo y mínimo. L = (max + min) / 2. S depende de L.
El tono depende de qué canal es máximo. Resultado × 60°.
HSL es completamente reversible — HSL de vuelta a RGB da exactamente el mismo color.
¿Cómo funciona la conversión?
Normalizar RGB a 0–1. Encontrar máximo y mínimo. L = (max + min) / 2. S depende de L.
El tono depende de qué canal es máximo. Resultado × 60°.
HSL es completamente reversible — HSL de vuelta a RGB da exactamente el mismo color.
RGB vs HSL – comparación
| Característica | RGB | HSL |
|---|---|---|
| Modelo | Canales aditivos | Tono/Saturación/Luminosidad |
| Valores | 0–255 por canal | H: 0–360°, S/L: 0–100% |
| Intuitivo | Difícil de predecir | Fácil de ajustar |
| Teoría del color | No basado en círculo | Mapea círculo cromático |
| CSS | rgb(R, G, B) | hsl(H, S%, L%) |
RGB
- Modelo
Canales aditivos - Valores
0–255 por canal - Intuitivo
Difícil de predecir - Teoría del color
No basado en círculo - CSS
rgb(R, G, B)
HSL
- Modelo
Tono/Saturación/Luminosidad - Valores
H: 0–360°, S/L: 0–100% - Intuitivo
Fácil de ajustar - Teoría del color
Mapea círculo cromático - CSS
hsl(H, S%, L%)
Convertir RGB a otras unidades
Explorar otros conversores de unidades
Preguntas frecuentes
Ayúdanos a mejorar nuestras herramientas
¿Tienes una idea, encontraste un error o quieres sugerir una función? Escríbenos – respondemos en 24 horas.