HEX to HSL Colour Converter
Convert any HEX colour code into its Hue, Saturation and Lightness (HSL) values, with the calculation stages shown.
Enter a HEX Colour
HSL Result
hsl(138, 25%, 39%)
HEX: #4A7C59 RGB: rgb(74, 124, 89)
Calculation Stages
Stage 1 — HEX to RGB: #4A7C59 = rgb(74, 124, 89)
Stage 2 — RGB to HSL: rgb(74, 124, 89) = hsl(138, 25%, 39%)
How to Use the HEX to HSL Converter
Enter a HEX colour code, or use the Random Colour button, and the tool converts it to HSL (Hue, Saturation and Lightness) in two visible stages: first to RGB, then to HSL.
What is HSL?
HSL describes a colour by its Hue (the position on the colour wheel, 0-360 degrees), Saturation (how vivid or muted the colour is, 0-100%) and Lightness (how light or dark it is, 0-100%). Many artists find HSL more intuitive than RGB or HEX because it separates a colour's identity (hue) from how vivid and how light it is.
Why Convert HEX to HSL?
HSL makes it easy to create tints, shades and colour harmonies by hand: keep the hue the same and adjust lightness for a tint or shade, or rotate the hue to find a complementary or analogous colour. Many design and CSS tools also accept HSL directly.
Examples
Frequently Asked Questions
What is HSL colour?
HSL stands for Hue, Saturation and Lightness. Hue is the position on the colour wheel (0-360 degrees), Saturation is how vivid or muted the colour is, and Lightness is how light or dark it is.
How does this tool convert HEX to HSL?
It first converts the HEX code to RGB values, then applies a standard RGB-to-HSL formula to work out the hue, saturation and lightness.
Why use HSL instead of HEX or RGB?
HSL separates a colour's identity (hue) from how vivid and how light it is, which makes it easier to create tints, shades and colour harmonies by hand.
Can I use HSL values in CSS?
Yes. Most modern browsers accept HSL colour values directly in CSS, for example hsl(138, 25%, 39%).
Is the conversion exact?
Yes, HEX to HSL is a precise mathematical conversion with no approximation or rounding loss beyond standard display rounding.
Can I copy the HSL value?
Yes. Use the Copy HSL button to copy the value straight to your clipboard, or Copy HEX and Copy RGB for the other formats.
Does the tool save my colours?
No. All calculations happen in your browser and nothing is saved or sent to a server.
Is this tool free to use?
Yes, the HEX to HSL Colour Converter is completely free to use, with no account, sign-up or download required.
Related Colour Tools
Ready to Create with Colour?
Explore beginner-friendly Creative Flair by Sana painting kits with carefully selected colours and approachable step-by-step guidance.
Explore Painting KitsDigital colour results are provided for planning and educational purposes. Screens, printers, paint brands, pigments, paper and lighting can change how a colour appears. Test important colours before using them in a final artwork or print project.