RGB to HSL converter

How to convert RGB to HSL

To convert RGB to HSL, enter your RGB color in the box above and read the HSL value next to it. For example, rgb(245, 158, 11) is hsl(38, 92%, 50%). The result updates as you type, and every other format (HEX, RGB, HSL, CMYK and more) is shown at the same time.

What RGB and HSL mean

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).

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.

Convert RGB to HSL by hand

Here is the calculation for rgb(245, 158, 11), step by step:

1. Divide each channel by 255: 0.961, 0.620, 0.043.
2. Lightness is the average of the largest and smallest values: 50%.
3. Saturation depends on how far apart they are (92%), and the hue is the position on the color wheel from the dominant channel (38°).
4. Result: hsl(38, 92%, 50%).

RGB to HSL table of common colors

When to use RGB and when HSL

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. 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.

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.