Convertidor HSL a RGB

Convierte valores HSL a RGB para uso en programación, APIs de color y herramientas que requieren valores numéricos RGB.

Valores HSL

H
°
S
%
L
%
HSL(213°, 78%, 58%) Ctrl+C
RGB(64, 140, 231)
R: 64G: 140B: 231
HEX: #408CE7

Variantes de luminosidad

Cómo Usar el Convertidor HSL a RGB

1Define el tono (H) — Ajusta H en la barra del espectro (0° rojo → 120° verde → 240° azul → 360° rojo).
2Ajusta saturación (S) y luminosidad (L) — S controla la intensidad (0%=gris, 100%=vibrante). L controla la claridad (0%=negro, 50%=puro, 100%=blanco).
3Obtén RGB y HEX — Los valores R, G, B (0-255) y el código HEX se calculan automáticamente. Copia con un clic.

¿Cómo Funciona la Conversión HSL → RGB?

El algoritmo convierte las coordenadas cilíndricas HSL a las coordenadas cartesianas RGB:

PasoCálculoPropósito
1. Calcular CC = (1 − |2L − 1|) × SCroma: rango máximo del color
2. Calcular XX = C × (1 − |H/60 mod 2 − 1|)Componente secundario
3. Mapear a RGB'Según sector de H (0-5)Color primario sin ajuste
4. Ajustar con mm = L − C/2; RGB = RGB' + mAjuste de luminosidad

¿Por Qué Convertir HSL a RGB?

Programación

Canvas API, WebGL, SVG programático y la mayoría de APIs de gráficos trabajan con RGB. Si calculaste colores con HSL, necesitas convertir para renderizar.

Procesamiento de Imágenes

Los formatos PNG, BMP, TIFF almacenan píxeles en RGB. Para guardar un color definido en HSL, el paso de conversión es obligatorio.

Interoperabilidad

La mayoría de herramientas y sistemas (bases de datos, APIs REST, exports) esperan colores en RGB o HEX. Convertir HSL a RGB es esencial para la compatibilidad.

Cadena de Impresión

Para imprimir un color definido en HSL, debes convertir a RGB y luego a CMYK. HSL → RGB es el primer paso de esta cadena.

Limitaciones

  • Redondeo: Los valores RGB son enteros (0-255), por lo que hay un redondeo mínimo desde los valores continuos de HSL. Esto puede causar diferencias de ±1 en casos extremos.
  • No perceptual: HSL no es perceptualmente uniforme. Dos colores con la misma L no siempre se ven igual de "claros" al ojo humano. Para uniformidad perceptual, considera OKLCH.
  • Espacio sRGB: Tanto HSL como RGB están limitados al espacio sRGB. Colores fuera de sRGB (como P3 en pantallas modernas) no se representan completamente.

Preguntas Frecuentes

¿HSL a RGB pierde calidad?
No. La conversión HSL → RGB es matemáticamente exacta y reversible. Ambos modelos representan el mismo espacio de color sRGB, solo usan coordenadas diferentes. No hay pérdida de información.
¿Para qué necesito valores RGB si CSS ya soporta hsl()?
Necesitas RGB cuando trabajas con: 1) APIs de JavaScript como Canvas y WebGL; 2) Lenguajes de programación (Python, Java, C#); 3) Formatos de imagen (PNG, BMP); 4) Herramientas que solo aceptan RGB; 5) Comunicación con imprentas (como paso previo a CMYK).
¿Qué pasa si mi H es mayor que 360?
El tono (H) es cíclico: H = 370° es igual a H = 10°. Nuestra herramienta normaliza automáticamente cualquier valor fuera del rango 0-360. Del mismo modo, S y L se limitan a 0-100%.
¿Cómo verifico que la conversión es correcta?
Puedes verificar en cualquier selector de color que soporte ambos modelos, como el de Google Chrome DevTools: abre el selector, ingresa tu HSL y verifica que los valores RGB coinciden.
¿La función CSS rgb() y hsl() producen el mismo color?
Sí, si los valores son equivalentes. hsl(210, 80%, 50%) produce el mismo píxel que rgb(25, 118, 230). El navegador convierte internamente todo a RGB para renderizar.