Convert RGB to HSLA instantly — enter your red, green, and blue values plus an alpha level to get a ready-to-use hsla() CSS value, no signup required.
FAQ
What is HSLA in CSS?
HSLA is a CSS color format that defines a color using hue, saturation, lightness, and alpha (opacity). It’s the same as HSL with one extra value added at the end — a number between 0 and 1 that controls how transparent or opaque the color is.
How do you convert RGB to HSLA?
To convert RGB to HSLA, the red, green, and blue values (each 0–255) are first converted to hue, saturation, and lightness using the standard RGB-to-HSL formula, then the alpha value is added as-is to the end of the result. Alpha isn’t calculated from RGB — it’s a separate value you choose, since standard RGB has no transparency channel of its own.
What’s the difference between HSL and HSLA?
The difference between HSL and HSLA is the alpha channel: HSL describes a fully opaque color, while HSLA adds a fourth value for transparency. Use hsl() when a color should always be solid, and hsla() when you need it to blend with whatever’s behind it — overlays, hover states, and translucent UI elements are common cases.