RGB to HSL Formula Explained

Red, green, and blue (RGB) is how a screen stores a color: three channels, each from 0 to 255. Hue, saturation, and lightness (HSL) is the same color written so you can change the shade, the strength, or the brightness without guessing new channel numbers. Hue is an angle on the color wheel, from 0 to 360 degrees. Saturation is how strong the color is. Lightness is how close it sits to black or white.

The RGB to HSL converter runs this formula in your browser and shows each step for the color you enter. Nothing you type is uploaded.

The steps from RGB to HSL

Divide each channel by 255 so red, green, and blue sit between 0 and 1. Lightness is the average of the largest and the smallest of those three numbers.

If the largest and the smallest are equal, the color is a gray. Saturation is 0 percent and hue is set to 0, because a gray has no hue.

Otherwise saturation is the gap between the largest and the smallest, divided by a term that depends on lightness: the gap, divided by 1 minus the absolute value of (2 times lightness minus 1). Hue depends on which channel is largest, then is multiplied by 60 so it lands between 0 and 360 degrees. If that angle is negative, add 360.

The page rounds hue to a whole degree and saturation and lightness to whole percents. That is how Cascading Style Sheets (CSS) usually writes hsl().

Three checks

These match the converter:

• rgb(59, 130, 246) becomes hsl(217, 91%, 60%).
• Pure red, rgb(255, 0, 0), becomes hsl(0, 100%, 50%).
• Mid gray, rgb(128, 128, 128), becomes hsl(0, 0%, 50%).

Why a round trip can move by one

rgb(59, 130, 246) converts to hsl(217, 91%, 60%). Converting that HSL back to RGB gives rgb(60, 131, 246). Red moved from 59 to 60, and green moved from 130 to 131. The formula itself is reversible. The change comes from rounding hue, saturation, and lightness to whole numbers before the trip back. For almost every use, the two colors look the same.

Two ways to write the result

Modern CSS separates the channels with spaces: hsl(217 91% 60%). Older stylesheets use commas: hsl(217, 91%, 60%). They are the same color. The converter copies both.

HSL has no transparency of its own. Alpha is written as hsla(217, 91%, 60%, 0.5) or, in the modern form, hsl(217 91% 60% / 0.5).

If you need many formats at once, use the color converter. It reads one color and lists the others, including this HSL value.