Developer
Encoders, converters & dev utilities
RGB to HSL Color Converter
Convert RGB channels like rgb(255, 136, 0) into HSL — hue, saturation, lightness. Normalise each channel to 0–1, then apply the W3C CSS Color 3 formula: lightness L = (max + min) / 2, saturation from the max−min chroma, and hue from whichever channel is the maximum, scaled by 60°. Worked example: rgb(255, 136, 0) → hsl(32, 100%, 50%). HSL is the format designers use to lighten, darken, or rotate hue by changing a single number, which is far more intuitive than editing three RGB channels. Runs 100% in your browser with a live swatch, and round-trips (HSL→RGB→HSL) are rounded sensibly. Free, no login, nothing uploaded.
RGB → HSL = normalise channels to 0–1, then L=(max+min)/2, S from the max−min chroma, H from the max channel ×60° (W3C CSS Color 3)
- Byte-exact worked example: rgb(255, 136, 0) → hsl(32, 100%, 50%)
- H is degrees 0–360; S and L are percentages 0–100%
- HSL ≠ HSV: HSL L is (max+min)/2, HSV V is the max channel — the same numbers are NOT interchangeable
- Round-trips (HSL→RGB→HSL) are not always bit-exact — values are rounded sensibly; runs 100% client-side
Frequently asked questions
How do I convert RGB to HSL?
Divide each channel by 255 to get 0–1 values, find the max and min, then compute lightness as (max + min) / 2, saturation from the chroma (max − min) relative to that lightness, and hue from the channel that is the maximum, multiplied by 60°. For rgb(255, 136, 0) this yields hsl(32, 100%, 50%). This is the standard W3C CSS Color 3 algorithm, and the tool shows the result with a live swatch.
Why are HSL round-trips sometimes off by one?
Because converting RGB → HSL → RGB passes through floating-point math and then rounds hue to a whole degree and saturation/lightness to whole percents. That rounding can shift a channel by a unit on the way back. It is normal and visually imperceptible; if you need an exact original color, keep the HEX or RGB value rather than relying on a rounded HSL round-trip.
Is HSL the same as HSV or HSB?
No. HSL and HSV share hue but compute brightness differently: HSL lightness is (max + min) / 2, while HSV value (HSB brightness) is just the maximum channel, and their saturations differ too. CSS supports hsl() but not hsv(), whereas many design tools expose HSV/HSB pickers. So the same three numbers describe different colors in each model — do not paste HSV values into an hsl() function.