HEX to HSL converter
Convert HEX colors to HSL with hue, saturation and lightness readouts plus OKLCH equivalents for modern CSS.
Result
hsl(311, 100%, 14%)oklch(0.27 0.119 337.9)
How to use this tool
- Paste a HEX value or use the color picker.
- Read the hsl() equivalent, plus OKLCH for perceptual work in modern CSS.
- Copy either format instantly.
Frequently asked questions
- How does HEX to HSL conversion work?
- The HEX values are first expanded to normalized RGB, then hue is derived from the dominant channel difference, saturation from the spread between min and max, and lightness from their average.
- Why would I use HSL over HEX?
- HSL separates hue, saturation and lightness, which makes it easy to build consistent variations of one color — darker hover states or desaturated backgrounds — while keeping the same hue.
- Does it also show OKLCH?
- Yes — alongside hsl() you get the OKLCH equivalent, useful for modern CSS where perceptually uniform adjustments matter.