Convertidor RGB a HSL

Cómo convertir RGB a HSL

RGB
Ajusta Rojo, Verde y Azul (0–255).
HSL
Matiz (0–360°), saturación y luminosidad (0–100%) se actualizan solos.
Copiar
Copia HSL para CSS o diseño.

¿Por qué RGB a HSL?

HSL separa matiz, color vivo y claridad; suele ser más intuitivo para crear variaciones.

Ventajas de HSL

Intuitivo: ajustes de tono más claros
Brillo y saturación: menos ensayo con mezclas RGB
Diseño: común en temas y UI
Variaciones: escalas de color más rápidas
Relaciones: entender matiz y gris

RGB frente a HSL

RGB mezcla luz aditiva; HSL describe percepción de tono y cantidad de gris.

RGB

Canales 0–255
Modelo estándar en pantalla
Control canal a canal
Formato estándar para el diseño digital
Compatible con todas las herramientas de diseño

HSL

Matiz como ángulo 0–360
Saturación y luminosidad en %
Útil para theming
Muy usado en herramientas de diseño
Más intuitivo para elegir colores

Por qué la luminosidad HSL no es lo que ve tu ojo

HSL es el modelo de color más fácil de razonar y el menos fiable para construir una paleta. Conviene saber por qué antes de comprometer un tema con él.

50% de luminosidad no es un solo brillo — hsl(60 100% 50%) es un amarillo vivo y hsl(240 100% 50%) es un azul oscuro. Mismo número, brillo aparente muy distinto: una rampa basada en él queda desigual.
Aclarar desplaza el tono — Sube la luminosidad de un azul en HSL y deriva hacia el morado. OKLCH se diseñó justo para eso, y esta página muestra ambos para que compares.
El gris no tiene tono — Con 0% de saturación el tono es indefinido, no cero. Esta página conserva el tono que escribiste en lugar de devolverlo a cero, para que puedas fijar el tono y añadir saturación después.
La saturación se comporta distinto en los extremos — Cuando la luminosidad se acerca a 0% o 100%, toda saturación converge en negro o blanco, por eso allí los ajustes pequeños parecen no hacer nada.

Cuándo usarlo

Al afinar paletas, temas claros/oscuros o gradientes por matiz.

Casos de uso

UI: sistemas de color
Exploración: probar saturación
Ajuste de brillo: Ajusta el brillo de forma intuitiva
Control de saturación: Controla la saturación con más facilidad
Herramientas de diseño: Usa HSL en aplicaciones de diseño

Datos

Referencia rápida.

Puntos clave

HSL y RGB describen el mismo punto en sRGB típico
La conversión es determinista
La conversión mantiene la precisión del color
HSL es más intuitivo para elegir colores
RGB es más preciso para manipular colores

Buenas prácticas

Antes de publicar.

Calidad

Clamp de RGB 0–255
Comprobar hsl() en el dispositivo destino
Comprueba la exactitud de los valores HSL
Prueba los colores en la aplicación de destino
Ten en cuenta el espacio de color y los límites de gama

Cuándo no

Si tu pipeline solo necesita HEX o RGB
Mantén RGB para aplicaciones que lo exijan expresamente
Evita convertir si no necesitas compatibilidad de formato
No conviertas para aplicaciones que no admiten HSL

Límites

Requiere JavaScript y dispositivo actual.

Impulsado por algoritmos optimizados de procesamiento de imagen.

Los demás convertidores de color

Preguntas frecuentes

¿Cómo funciona el conversor de RGB a HSL?

Introduce Rojo, Verde y Azul (0-255) con los deslizadores o los campos y la herramienta los convierte en Tono (0-360 grados), Saturación (0-100%) y Luminosidad (0-100%). Una vista previa se actualiza al instante y puedes copiar los valores HSL para CSS o herramientas de diseño.

¿Qué es HSL y por qué usarlo?

HSL describe el color mediante Tono (el color en una rueda de 360 grados), Saturación (qué tan intenso es) y Luminosidad (qué tan claro). Se ajusta a cómo las personas piensan el color, lo que facilita ajustar el tono o crear variaciones de tema más que editando números RGB en bruto.

¿La conversión de RGB a HSL pierde información?

No. HSL y RGB describen el mismo color en coordenadas distintas, así que la conversión es reversible y sin pérdidas. Convierte a HSL, ajusta los valores y puedes volver a RGB o HEX sin degradar el color.

¿Qué rangos usan los valores HSL?

El Tono va de 0 a 360 grados alrededor de la rueda de color, mientras que la Saturación y la Luminosidad son porcentajes de 0 a 100. El conversor muestra los resultados exactamente en estos rangos, igual que la sintaxis hsl() de CSS.

¿Cómo ajusto colores usando HSL?

Cambia el Tono para pasar a otro color, sube o baja la Saturación para hacerlo más vivo o apagado, y ajusta la Luminosidad para aclarar u oscurecer. Esto hace de HSL la opción ideal para generar tintes, sombras y escalas de color de interfaz coherentes.

¿La herramienta es gratuita, privada y funciona sin conexión?

Sí. El conversor es totalmente gratuito, y cada cálculo se ejecuta localmente en tu dispositivo, por lo que tus colores nunca se suben. Funciona en móvil y escritorio y sigue funcionando después de cargar la página.