HSL to RGBA Converter
Convert hue, saturation and lightness into an rgba() value that is ready for transparency in CSS.
hsl input
Result · 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%)
How to use: HSL to RGBA
- 1
Enter a color
Type a color code or choose a color with the picker — every field accepts the format it shows.
- 2
See it converted
The result updates instantly as you type, together with a live preview of the color.
- 3
Copy the code
Copy the value you need with one click and paste it into your design, CSS or print settings.
About HSL and RGBA
HSL and RGBA come from two different ways of thinking about color. HSL defines a color by hue, saturation and lightness, which makes it easy to design a set of related shades. RGBA defines it by red, green and blue channel values from 0 to 255 plus an alpha channel for opacity — the format that many JavaScript libraries, canvas drawing code, charting tools and older CSS code bases expect.
The converter turns your HSL values into rgba() with alpha set to 1, meaning fully opaque. Edit that last number to get transparency: 0.8 for a slightly see-through panel, 0.3 for an overlay on a photo, 0 for invisible. Tip: in modern CSS you can also add alpha to HSL directly, as in hsl(160 60% 45% / 0.3), but rgba() is the safer choice when a library or an email template does not support the newer syntax.
Everything runs locally in your browser — your images are never uploaded to a server.