HEX to HSL Converter
Enter a HEX color code to get its HSL values — hue, saturation, and lightness. Copy the HSL result for your CSS.
#6366F1
Click to change color
Red99
Green102
Blue241
Hue239
Saturation84
Lightness67
HSV / HSB
H239°
S59%
V95%
CMYK
C59%
M58%
Y0%
K5%
CIE LAB
L50
A39
B-70
XYZ (D65)
X25.77
Y18.5
Z85.42
CSS Formats
HEX#6366F1
RGBrgb(99, 102, 241)
HSLhsl(239, 84%, 67%)
HWBhwb(239 11% 33%)
Pantone Matches
Closest
Pantone 2685 C
#9D4EDC
Pantone Cool Gray 11
#53565A
Pantone 2592 C
#B83DBA
Quick Copy
How to use this converter
- Type your six-digit HEX code into the HEX field at the top (the # is optional).
- Read the HSL row, which shows
hsl(h, s%, l%). - Use the copy button next to the HSL row to copy the value.
Worked example
#336699 converts to a hue of 210 degrees, 50% saturation, and 40% lightness. Hue 210 is a blue, the 50% saturation gives a clear but not neon color, and 40% lightness places it in the darker half of the range.
#336699→hsl(210, 50%, 40%)Limitations to know
- Only six-digit HEX codes are accepted; expand three-digit shorthand before converting.
- Hue, saturation, and lightness are rounded to whole numbers for display.
- HSL is derived from sRGB and does not represent a wide-gamut or perceptually uniform space.
Frequently asked questions
How do I convert HEX to HSL?
Type the six-digit HEX code into the HEX field. The HSL row updates to the matching hue, saturation, and lightness, which you can copy with the copy button next to the row.
What is hue in HSL?
Hue is the position on the color wheel, measured in degrees from 0 to 360. For example, 0 is red, 120 is green, and 240 is blue.
What are saturation and lightness?
Saturation is how intense the color is, from 0% (gray) to 100% (full color). Lightness is how light or dark the color is, from 0% (black) through 50% (normal) to 100% (white).
Why are my HSL values slightly different in another tool?
HSL is computed from the sRGB channels and then rounded for display. Small rounding differences in hue, saturation, or lightness between tools are normal and usually less than one unit.