HEX to HSL Converter
Convert a hex color code to HSL (hue, saturation, lightness).
HSL (hue, saturation, lightness) is easier to tweak than hex — adjust lightness for tints/shades or rotate the hue for color schemes. Converted in your browser.
Enter a hex code to get its HSL values — hue in degrees, saturation and lightness as percentages — with a live preview and a ready-to-paste CSS hsl() string. HSL is far easier to tweak than hex: adjust lightness for tints and shades, or rotate the hue to build color schemes. Converted in your browser.
How to use the HEX to HSL Converter
- Type or pick a hex color.
- Read the hue, saturation and lightness values.
- Copy the CSS hsl() string.
Frequently asked questions
What is HSL?
HSL stands for hue (0–360°), saturation (0–100%) and lightness (0–100%). It maps to how people think about color, which makes adjustments more intuitive than editing hex digits.
Why convert hex to HSL?
HSL makes it easy to create lighter/darker variants (change lightness) or harmonious schemes (rotate hue) while keeping the color recognisable.