Why does the HSL result include decimal places?

Hue, saturation and lightness are continuous values derived from the RGB channels. Rounding them to whole numbers would prevent an exact round-trip back to the original color.

Is HSL the same as HSB or HSV?

No. HSV and HSB share the hue axis but define their third axis as value or brightness, so the same color has different numbers in each model. This converter uses HSL, which is what CSS hsl() expects.

Can I use the HSL output directly in CSS?

Yes. The formatted result is written as hsl(h, s%, l%), which CSS accepts as-is.

RGB to HSL Converter

RGB input

Red

Green

Blue

HSL output

hsl(188.067, 73.006%, 31.961%)

HEX: #167d8d
RGB: rgb(22, 125, 141)
HSL: hsl(188.067, 73.006%, 31.961%)

Why HSL is easier to edit than RGB

RGB describes how much of each primary light to mix, which is how a screen works but not how people describe color. Making a color "a bit lighter" in RGB means changing all three channels together, and it is easy to shift the hue by accident.

HSL splits the same color into hue in degrees, saturation as a percentage and lightness as a percentage. Each can be changed on its own, so you can lighten a color without altering which color it is. Both notations describe the same sRGB space.

Grays, black and white

When all three RGB channels are equal the color has no hue to report. Saturation is zero and the hue value is arbitrary, so a gray entered at any hue converts back to the same gray. Black is lightness zero and white is lightness 100, both with zero saturation.

Hue wraps at 360 degrees, so 0 and 360 describe the same red. Converting RGB to HSL and back returns the original channels, though the intermediate HSL numbers are shown with decimals because the conversion is not restricted to whole degrees.

HSL lightness is not perceived brightness

Two colors with the same HSL lightness can look noticeably different in brightness, because HSL is a simple geometric transform of RGB rather than a model of human vision. A saturated yellow at 50 percent lightness reads much brighter than a saturated blue at the same value.

For contrast decisions, compare the measured contrast ratio rather than the lightness number.

Frequently asked questions

A neutral color has no hue to measure, so saturation is reported as zero and the hue value carries no meaning. Converting back returns the same gray whatever hue is shown.