Developer
Encoders, converters & dev utilities
HEX to HSL Color Converter
Convert a HEX color like #FF8800 into HSL — hue, saturation, lightness — the model designers reach for when tuning themes. HEX first decodes to RGB (#FF8800 → 255, 136, 0), then the channels are normalised to 0–1 and HSL is computed per W3C CSS Color 3: lightness L = (max + min) / 2, saturation from the max−min chroma, and hue from whichever channel is the maximum (×60°). Worked example: #FF8800 → rgb(255, 136, 0) → hsl(32, 100%, 50%). HSL makes it easy to lighten, darken, or shift hue by nudging one number. Runs 100% in your browser with a live swatch — nothing is uploaded. Free, no login.
HEX → HSL = decode HEX to RGB, normalise to 0–1, then L=(max+min)/2, S from chroma, H from the max channel ×60° (W3C CSS Color 3)
- Byte-exact worked example: #FF8800 → rgb(255, 136, 0) → hsl(32, 100%, 50%)
- H is in degrees (0–360), S and L are percentages; pure orange #FF8800 has full saturation (100%) at mid lightness (50%)
- HSL ≠ HSV: HSL lightness is (max+min)/2, whereas HSV value V is just the max channel — identical numbers are NOT interchangeable
- 100% client-side with a live swatch — the HSL math never leaves your browser
Frequently asked questions
How do I convert HEX to HSL?
First decode the HEX to RGB (for #FF8800 that is 255, 136, 0), then normalise each channel to the 0–1 range and apply the CSS Color 3 formula: lightness is (max + min) / 2, saturation is derived from the max−min chroma relative to that lightness, and hue comes from which channel is largest, scaled by 60°. #FF8800 works out to hsl(32, 100%, 50%). The tool shows all formats and a live swatch at once.
What is the difference between HSL and HSV/HSB?
They share the same hue but define brightness differently. HSL lightness is (max + min) / 2, so pure colors sit at 50% lightness. HSV (also called HSB) value is simply the maximum channel, so pure colors are at 100% value. Their saturation is also computed differently. Because of this, the same three numbers mean different colors in each model — CSS uses HSL, while many design tools use HSV/HSB, so never copy HSV numbers into an hsl() function.
Why is #FF8800 saturation 100% and lightness 50%?
Because it is a fully saturated, pure hue. The max channel is 255 and the min is 0, so lightness = (255 + 0) / 2 / 255 = 50%, and with min at 0 the saturation is at its maximum, 100%. The hue, driven by red being the max with green partway up, lands at 32°. Adding white would raise lightness above 50%; adding grey would drop saturation below 100%.