ToolWox
Log inSign up

HSL to RGB Converter

HSL to RGB Converter turns hue, saturation and lightness values into red, green and blue channels. RGB is the format you need for rgba() transparency and many graphics APIs.

Enter the three HSL channels and the matching RGB string appears instantly, alongside HEX and a live swatch.

HSLhsl(262, 83%, 58%)
HEX#7c3bed
RGBrgb(124, 59, 237)

How to use HSL to RGB Converter

  1. 1

    Enter HSL values

    Set hue (0–360), saturation (0–100%) and lightness (0–100%).

  2. 2

    Read the RGB value

    The matching rgb() string updates live, with HEX shown too.

  3. 3

    Copy the RGB string

    Paste it straight into your stylesheet or code.

From HSL to RGB

HSL is convenient for picking and tweaking a color, but graphics code, canvas APIs and rgba() transparency all work in RGB. This converter bridges the two so you can author in HSL and ship RGB.

The conversion is exact within the precision RGB supports — eight bits per channel.

RGB and transparency

One common reason to convert is alpha. CSS rgba() takes RGB channels plus an opacity, so converting an HSL color to RGB is the first step toward a semi-transparent version of it.

Once in RGB you can also feed the values into image libraries and shaders that expect 0–255 channels.

Frequently asked questions

What ranges do the HSL channels use?
Hue is 0–360 degrees, and both saturation and lightness are percentages from 0 to 100.
Can I get an rgba() value?
Convert to RGB here, then add your desired alpha as a fourth value in rgba().

Last updated: