Conversor de HSL a RGBA
Convierte tono, saturación y luminosidad en un valor rgba() listo para usar transparencia en CSS.
Entrada hsl
Resultado · RGBA
rgba(255, 61, 119, 1)
HEX
#FF3D77
RGB
rgb(255, 61, 119)
HSL
hsl(342, 100%, 62%)
HSV
hsv(342, 76%, 100%)
CMYK
cmyk(0%, 76%, 53%, 0%)
Cómo usarlo: HSL a RGBA
- 1
Introduce un color
Escribe un código de color o elige un color con el selector: cada campo acepta el formato que muestra.
- 2
Mira la conversión
El resultado se actualiza al instante mientras escribes, junto con una vista previa en vivo del color.
- 3
Copia el código
Copia el valor que necesitas con un clic y pégalo en tu diseño, tu CSS o tu configuración de impresión.
Sobre HSL y RGBA
HSL y RGBA nacen de dos formas distintas de pensar el color. HSL define un color por su tono, saturación y luminosidad, lo que facilita diseñar un conjunto de variantes relacionadas. RGBA lo define por los valores de los canales rojo, verde y azul de 0 a 255 más un canal alfa para la opacidad: el formato que esperan muchas librerías de JavaScript, el código de dibujo en canvas, las herramientas de gráficos y los proyectos CSS antiguos.
El conversor transforma tus valores HSL en rgba() con el alfa en 1, es decir, totalmente opaco. Edita ese último número para obtener transparencia: 0.8 para un panel ligeramente translúcido, 0.3 para una capa sobre una foto y 0 para que sea invisible. Consejo: en el CSS moderno también puedes añadir alfa directamente a HSL, como en hsl(160 60% 45% / 0.3), pero rgba() es la opción más segura cuando una librería o una plantilla de email no admite la sintaxis nueva.
Todo se ejecuta localmente en tu navegador: tus imágenes nunca se suben a un servidor.