HSL to RGB converter

How to convert HSL to RGB

To convert HSL to RGB, enter your HSL color in the box above and read the RGB value next to it. For example, hsl(199, 89%, 48%) is rgb(13, 162, 231). The result updates as you type, and every other format (HEX, RGB, HSL, CMYK and more) is shown at the same time.

What HSL and RGB mean

HSL describes a color as hue (0 to 360 degrees around the color wheel), saturation (0 to 100 percent) and lightness (0 to 100 percent). It is easier to reason about than RGB: keep the hue and change the lightness to get lighter or darker shades of the same color.

RGB describes a color as amounts of red, green and blue light, each from 0 to 255. rgb(59, 130, 246) is the same color as #3B82F6. CSS also accepts an opacity value, as in rgba(59, 130, 246, 0.5).

Convert HSL to RGB by hand

Here is the calculation for hsl(199, 89%, 48%), step by step:

1. Start from hue 199°, saturation 89% and lightness 48%.
2. Use them to find the chroma (the color intensity) and place the hue on the color wheel to get the three channel values: red 13, green 162, blue 231.
3. Result: rgb(13, 162, 231).

HSL to RGB table of common colors

When to use HSL and when RGB

HSL is best when you want to adjust a color by eye or in code: raise the lightness for a hover state, lower the saturation for a muted variant. RGB is the model screens use and the one CSS functions such as rgba() build on, which makes it handy when you need transparency or want to compute colors in code.

Good to know

• Shorthand HEX codes such as #38F expand to #3388FF, and eight-digit codes carry an opacity value at the end.
• Values are rounded to whole numbers for display; the converter keeps more precision internally.
• The color picker lets you pick a color by eye when you do not have its code.
• Colors displayed on screen depend on your monitor's calibration, so the same code can look slightly different on different devices.