Pick & Convert
HEX to HSL Converter
Enter a HEX color code to see its hue, saturation and lightness. For example, #4169E1 is hsl(225, 73%, 57%).
Your colors and images stay in your browser. Nothing is uploaded or stored on our servers.
How to use the HEX to HSL Converter
- Type a 3- or 6-digit HEX code in the field.
- Read the HSL value at the top: hue in degrees from 0 to 360, saturation and lightness in percent.
- Press Copy HSL and paste it into your CSS or design tool.
- Nudge the code and watch which of the three numbers moves.
Examples
Royal blue
#4169E1 is hsl(225, 73%, 57%). A hue of 225° sits in the blue part of the wheel.
Forest green
#228B22 is hsl(120, 61%, 34%). A hue of 120° is pure green, and the low lightness makes it dark.
Gold
#FFD700 is hsl(51, 100%, 50%). Full saturation at 50% lightness gives the most vivid version of that hue.
Tips
- To make a hover color, keep the hue and saturation and lower the lightness by 5 to 10 points.
- CSS accepts the result directly: color: hsl(225, 73%, 57%);
Questions about the HEX to HSL Converter
What do H, S and L stand for?
Hue is the position on the color wheel in degrees: 0 is red, 120 is green and 240 is blue. Saturation is how vivid the color is, from gray at 0% to full color at 100%. Lightness runs from black at 0% to white at 100%.
Why convert HEX to HSL?
HSL makes small adjustments easy. Raising lightness gives a tint, lowering it gives a shade, and keeping the hue steady keeps the color in the same family.
Why does a gray show a hue of 0?
A gray has no dominant color, so its hue is undefined. It is shown as 0 with saturation 0%.
Are the HSL values rounded?
Yes, to whole numbers, which is how designers usually write them. Converting back may differ from the original by one unit in a channel.