quialo.

RGB to HSL Converter

Modern hsl()
hsl(13 64% 43%)
Comma hsl()
hsl(13, 64%, 43%)

Turn red, green, and blue (RGB) into hue, saturation, and lightness (HSL), or swap and go back the other way. Set the three channels, or paste a color, and copy Cascading Style Sheets (CSS) values in the modern space form and the older comma form. Open Show the math to see the formula worked on your color. The conversion runs in your browser.

How to use

  1. Choose RGB to HSL, or HSL to RGB.
  2. Set the three channels with the number fields or the sliders, or paste a color such as rgb(180 70 40) or a hex value.
  3. Read the swatch and the two CSS values, one with spaces and one with commas.
  4. Select Copy next to the value you want.
  5. Select Show the math to see each step of the formula for this color.

Examples

  • rgb(59, 130, 246) converts to hsl(217, 91%, 60%), in both modern and comma syntax.
  • Pure red, rgb(255, 0, 0), converts to hsl(0, 100%, 50%).
  • Mid gray, rgb(128, 128, 128), converts to hsl(0, 0%, 50%).

FAQs

What does HSL mean?
HSL stands for hue, saturation, and lightness. Hue is the color's place on the wheel, from 0 to 360 degrees. Saturation is how strong the color is, from 0 percent (gray) to 100 percent (fully strong). Lightness is how close the color is to black or white, from 0 percent to 100 percent, with 50 percent as the pure color.
What is the RGB to HSL formula?
Divide each red, green, and blue channel by 255 so the values sit between 0 and 1. Lightness is the average of the largest and smallest of those three. Saturation is the gap between the largest and smallest, divided by a term that depends on lightness. Hue comes from which channel is largest, then is scaled to degrees. Show the math runs these steps on the color you entered.
Why can converting back change a channel by one?
The converter rounds hue to a whole degree and saturation and lightness to whole percents, which is how CSS hsl() values are usually written. rgb(59, 130, 246) becomes hsl(217, 91%, 60%). Converting that HSL back gives rgb(60, 131, 246). Red and green each moved by one because of that rounding. The color on screen is the same for practical purposes.
What is the difference between modern space syntax and comma syntax?
Modern CSS writes the channels separated by spaces: hsl(217 91% 60%). Older stylesheets use commas: hsl(217, 91%, 60%). Both describe the same color. This page gives you both so you can paste the one your stylesheet uses.
Does HSL include alpha?
HSL itself is only hue, saturation, and lightness. Transparency is a separate alpha value. The comma form that carries it is hsla(217, 91%, 60%, 0.5). The modern form uses a slash: hsl(217 91% 60% / 0.5). This page converts the color channels. If you paste a color that includes alpha, the alpha is noted and left out of the HSL result.

Supporting guides

Related tools