HEX to HSL Converter
Convert HEX color codes to HSL (hue, saturation, lightness) instantly in your browser. Free, private and nothing is ever uploaded.
HEX
—
RGB
—
HSL
—
How to convert HEX to HSL
- Type or paste a hex color code into the box above (with or without the #).
- The RGB and HSL values update live as you type.
- Use the color picker next to the input to pick a color visually instead.
How the conversion works
HSL describes a color by hue, saturation and lightness instead of raw red/green/blue intensities. The engine first converts hex to RGB, finds which channel is largest to determine hue, measures the spread between the largest and smallest channel for saturation, and averages them for lightness — for example, #3b82f6 becomes hsl(217, 91%, 60%).
Where you'll need this
- Building a color palette in CSS where you want to vary lightness (tints/shades) while keeping the same hue and saturation.
- Reading or debugging colors defined with
hsl()in a stylesheet or design system. - Explaining a color's visual properties — how vivid or how light it is — rather than its raw channel numbers.
Related tools
- HEX to RGB converter — get red, green and blue channels instead.
- RGB to HEX converter — go from RGB back to hex.
- Color contrast checker — check WCAG accessibility between two colors.
Frequently asked questions
- How do I convert HEX to HSL?
- First convert hex to RGB, then derive hue from which channel is largest, saturation from how spread out the channels are, and lightness from the average of the largest and smallest channel. The tool above does all of this live as you type.
- What do hue, saturation and lightness mean?
- Hue (0–360°) is the position on the color wheel — red, yellow, green, and so on. Saturation (0–100%) is how vivid or gray the color is. Lightness (0–100%) is how close it is to black or white.
- Why use HSL instead of HEX or RGB?
- HSL separates a color from its intensity and shade, which makes it easy to create matching palettes — for example, keeping the same hue and saturation while only changing lightness to get a lighter or darker shade.
- Does this tool support 3-digit shorthand hex codes?
- Yes. A shorthand like #06c is expanded automatically to the equivalent full form, #0066cc, before the HSL values are computed.
- Why are the hue, saturation and lightness values rounded?
- They are rounded to whole numbers for readability, matching how HSL is normally written in CSS (e.g. hsl(217, 91%, 60%)). The rounding introduces only a negligible, usually invisible difference if converted back to hex.
- Is my color data sent to a server?
- No. The conversion is plain arithmetic that runs entirely in your browser with JavaScript — nothing is uploaded or logged.