Why is HSL lightness not the same as brightness?

Lightness is the midpoint between the darkest and brightest channel in HSL. RGB has no single brightness — a saturated blue and a pale yellow can share a luminance value — which is why the contrast checker measures luminance separately.

Is the RGB to HSL conversion lossless?

Yes, both directions are exact: HSL is RGB in cylindrical coordinates. Rounding is the only place value is lost, so copy the full values when they need to round-trip.

What should I use in CSS?

Either. Hex and rgb() are the most portable, hsl() is the easiest to theme. This page gives you all three so you can pick per project.

RGB to HSL Converter

Set the red, green and blue channels to read the matching hue, saturation and lightness.

RedGreenBlue

#7c3aed

HSL

hsl(262, 83%, 58%)

Hue

262°

Saturation

83%

Lightness

58%

Hex

#7c3aed

RGB

rgb(124, 58, 237)

RGB is a device format: three light intensities a screen mixes to make a color. HSL describes the same color in terms a person can reason about — a hue angle, a saturation level and a lightness level — which is why design tools show both. Converting RGB to HSL is what lets you take a color sampled from a screenshot and change its brightness without shifting its hue.

Frequently asked questions

Divide the channels by 255, take the highest and lowest, then derive three values: hue from which channel is highest and by how much, saturation from how far the highest and lowest differ relative to their sum, and lightness from their average.

Good to know

Red, green and blue each run from 0 to 255 — 256 levels per channel.
A neutral grey has equal RGB channels, which always gives 0% saturation in HSL.
The hex code comes from the same maths the RGB to Hex converter uses.

Tools that pair with RGB to HSL Converter

RGB to HSL Converter is one of 33 single-page tools in this workspace. These are the ones that carry the job on — the color value moves between them, so nothing gets retyped or re-uploaded.

Hex to HSL ConverterRead the hue, saturation and lightness behind a hex code.RGB to HexTurn red, green and blue channels into a hex code.Color PickerPick, fine-tune and copy any color in HEX, RGB or HSL.