RGBA to HSL Converter Online – rgba() to hsla() Values

How to use the RGBA to HSL Converter

Type or paste a color into the RGBA field, such as rgba(99, 102, 241, 0.4).

The HSL field updates as you type: colors with alpha below 1 become hsla(h, s%, l%, a); opaque colors become hsl(h, s%, l%).

Copy the value with the button next to the field into your stylesheet or theme variables.

Convert RGBA to HSL and keep the alpha

This RGBA to HSL converter turns rgba() colors into hue, saturation and lightness while keeping their transparency. A translucent color is written as hsla(), so you can move semi-transparent colors into an HSL-based theme without losing their opacity.

How the alpha is handled

HSL describes only the color, so the alpha value is carried across untouched, rounded to three decimals. The tool picks the notation for you:

alpha below 1 → hsla(h, s%, l%, a)
alpha of 1, or no alpha → hsl(h, s%, l%)

rgba(99, 102, 241, 0.4)  →  hsla(239, 83.5%, 66.7%, 0.4)
rgba(15, 118, 110, 0.5)  →  hsla(175, 77.4%, 26.1%, 0.5)
rgba(46, 139, 87, 1)     →  hsl(146, 50.3%, 36.3%)

The color math

Alpha plays no part in the hue, saturation and lightness numbers; they come from R, G and B alone. For rgba(99, 102, 241, 0.4):

R = 0.3882   G = 0.4000   B = 0.9451   (alpha 0.4 set aside)
max = 0.9451 (B)   min = 0.3882   d = 0.5569
L = (0.9451 + 0.3882) / 2        = 0.6667 → 66.7%
S = 0.5569 / (1 − |1.3333 − 1|)  = 0.8353 → 83.5%
H = 60 × ((0.3882 − 0.4000) / 0.5569 + 4) = 238.7 → 239
→ hsla(239, 83.5%, 66.7%, 0.4)

Hue is rounded to a whole degree, saturation and lightness to one decimal place.

Why theme with HSL plus alpha

Many design systems define a color once and derive overlays from it. In HSL you can hold the hue steady and vary lightness and alpha independently: a solid hsl(239, 83.5%, 66.7%) for buttons, the same values at alpha 0.12 for a selected row, and at 0.4 for a focus ring. Because the hue number is shared, the family stays visually consistent.

hsla() and modern hsl()

In current CSS, hsla() is an alias of hsl() and both accept alpha. The space-separated hsl(239 83.5% 66.7% / 0.4) is equivalent to the first result above and works in all current browsers. The comma form is output here because older browsers and more tools understand it.

Numbers versus appearance

A translucent color's appearance depends on what is behind it, but the HSL numbers describe the color before blending. If you need the HSL of what is actually displayed on a given background, flatten it first (the RGBA to RGB page shows the blending formula), then convert the solid result with RGB to HSL. To reverse this conversion, use HSL to RGBA.

Frequently asked questions

What is the difference between hsl() and hsla()?

hsla() adds a fourth value for alpha. In current CSS they are aliases and both accept alpha, but the hsla() name is still common and is understood by older browsers.

Does the alpha change the lightness value?

No. Hue, saturation and lightness are calculated from the red, green and blue channels only. The alpha is passed through as a separate number.

Why did I get hsl() instead of hsla()?

The color had an alpha of 1, or no alpha at all, so there was no transparency to keep. Only colors with alpha below 1 are written as hsla().

Can I use a percentage alpha in the input?

Yes. rgb(99 102 241 / 40%) is read as alpha 0.4, and the output uses the decimal form.

RGBA to HSL Converter