HSL to RGBA Color Converter

What this tool does

A colour set in HSL is solid by default, but plenty of designs need it partly transparent: a wash over an image, a gentle overlay, a panel that lets the layer beneath glow through. RGBA adds the opacity that HSL on its own does not carry.

That is what this does. You give it a colour in HSL, and it returns the RGBA form. A plain HSL value comes back solid, but if you enter it as HSLA, with an extra value for the alpha, the tool passes that opacity straight through, so the RGBA it gives you is see-through to the degree you set.

How to use it

1. Enter an HSL value. Type a plain HSL colour for a solid result, or an HSLA value with a fourth number for the alpha, or use the picker or random.
2. Read the RGBA result. The red, green, and blue come back with the alpha, ready to copy.
3. Copy it. Click the result to copy the RGBA value into your work.

Give it a plain HSL colour for solid, or an HSLA value to include opacity, and copy the RGBA the tool returns.

How it works

The colour side runs through RGB: the hue, saturation, and lightness are turned into red, green, and blue amounts, the form RGBA is built on, a step handled by TinyColor. The transparency depends on whether you included an alpha. A plain HSL value has none, so the tool treats the colour as fully solid, giving it an alpha of 1.

Written as HSLA, the value carries a fourth number, the alpha, and the tool reads it as the opacity, so the RGBA it returns is see-through to that degree. The transparency therefore comes from your input: give it plain HSL for a solid colour, or HSLA to fold in the opacity you want.

What RGBA is

RGBA takes RGB and adds a value: the same red, green, and blue that make up a screen colour, plus an A for alpha that describes how opaque it is. Alpha is written from 0 to 1, with 1 fully solid and 0 fully transparent, and the values in between letting the layer behind show through by degrees.

That extra number is what lets colours stack. A solid colour blocks whatever is behind it, while a colour with an alpha under 1 mixes with the layer below, which is how overlays, tints, and shadows work. RGBA is just the format that keeps that opacity attached to the colour.

Adding alpha with HSLA

To set transparency here, you write the colour as HSLA rather than plain HSL. HSL has three parts, the hue in degrees and the saturation and lightness as percentages. HSLA adds a fourth, the alpha, placed at the end.

That fourth value is the opacity, given from 0 to 1, where 0 is fully transparent and 1 is fully solid, and a value like 0.5 is half see-through. So an HSLA value is simply your HSL colour with the alpha added on, and the tool takes the whole thing and returns the matching RGBA, opacity included. If you know how see-through you want the colour, that fourth number is where you say so.

When the result is solid

Enter a plain HSL value, or pick a colour with the picker, or use the random button, and the result is fully solid, carrying an alpha of 1. That is correct, because none of those supplies any opacity for the tool to pass along.

If you then want the colour to be see-through, you can either re-enter it as HSLA with the alpha you want, which is the cleaner route, or take the solid RGBA the tool returns and lower its alpha yourself once it is copied. The opacity is set by that alpha either way, whether you include it in the HSLA or adjust it afterwards.

Why convert HSL to RGBA

The usual reason to reach for RGBA is transparency, which HSL cannot express by itself. As soon as a design needs a colour to be partly see-through, a layer darkening an image, a tint over a photo to hold text legible, a soft shadow, the alpha that RGBA carries becomes necessary.

It turns up most in web and interface design. Translucent backgrounds, hover states that lightly shade a control, modal layers that dim the page, and stacked panels all depend on it. Taking a colour you have tuned in HSL and turning it into RGBA, with the alpha supplied as HSLA, gives you the see-through version those effects need.

Questions people ask

How do I add transparency?

Enter the colour as HSLA, adding a fourth value for the alpha, from 0 for transparent to 1 for solid. The tool carries that into the RGBA.

What if I enter plain HSL?

The result is fully solid, with an alpha of 1, since plain HSL has no opacity. Use HSLA, or lower the alpha after copying.

What does the alpha do?

It sets the opacity, from 0 for invisible to 1 for solid, with values between letting the background show through in proportion.

Does the picker set opacity?

No. The picker and random button give solid colours. Opacity comes from entering an HSLA value, or from adjusting the alpha yourself afterwards.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. RGBA color model, RGB with an alpha transparency channel. Wikipedia. https://en.wikipedia.org/wiki/RGBA_color_model
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor