Convert color from HSL to RGB

HSL to RGB converter

Convert hsl() to rgb() values.

Example: hsl(16, 100%, 60.4%)

RGB
See this color in all formats

About HSL to RGB Converter

Canvas, WebGL, many image libraries and game engines work in RGB channels, while CSS-minded design work is often done in HSL. This turns the hue angle and the two percentages into red, green and blue numbers from 0 to 255, rounded to the nearest whole value.

About the formats. HSL describes a color as a hue angle on the color wheel (0 to 360 degrees, where 0 is red, 120 green and 240 blue), a saturation percentage and a lightness percentage. It is the same sRGB color as RGB, written in a way that is easier to adjust by eye. RGB gives the amount of red, green and blue light as three numbers from 0 to 255, as in rgb(255, 107, 53). Both the comma form and the space form rgb(255 107 53 / 50%) are read, and percentages work too.

How exact is it? HSL is only another way of writing sRGB, so no colors are added or lost, but the result is rounded to the nearest of the 256 levels per channel and the angle and percentages are read at full precision. The channels come out as whole numbers from 0 to 255, and a partly transparent color is written as rgba().

For example, hsl(197.3, 37.2%, 23.7%) in HSL is rgb(38, 70, 83) in RGB. A quick sanity check: saturation 0% always gives a grey where all three channels are equal, and lightness 0% is black while 100% is white, whatever the hue and saturation are.

How to convert HSL to RGB

  1. Type or paste an HSL color, such as hsl(197.3, 37.2%, 23.7%), or choose a color with the picker.
  2. The RGB value, rgb(38, 70, 83) for that example, appears straight away.
  3. Press Copy to put the RGB value on your clipboard.
  4. Use the From and To menus at the top to switch to a different conversion, or open the all-formats page to see every format at once.

Frequently asked questions

How do I convert HSL to RGB?

Type or paste an HSL value such as hsl(197.3, 37.2%, 23.7%) and the RGB value, rgb(38, 70, 83), appears straight away. Use Copy to put it on your clipboard, or choose a color with the picker.

Why do I get rounded numbers in my RGB?

rgb() channels are normally whole numbers from 0 to 255, so the exact result of the HSL calculation is rounded to the nearest integer.

Does hsl(0, 0%, 100%) equal white?

Yes. Lightness 100% is white whatever the hue and saturation are, so it gives rgb(255, 255, 255).

Is converting HSL to RGB exact?

HSL is only another way of writing sRGB, so no colors are added or lost, but the result is rounded to the nearest of the 256 levels per channel and the angle and percentages are read at full precision. The channels come out as whole numbers from 0 to 255, and a partly transparent color is written as rgba().

Does HSL to RGB keep transparency?

Yes. Add transparency to the HSL value and it is carried over to the RGB result, which supports it too.

Are my colors sent anywhere?

No. The conversion runs in your browser and nothing is uploaded.