HEX to HSL converter

How to convert HEX to HSL

To convert HEX to HSL, enter your HEX color in the box above and read the HSL value next to it. For example, #10B981 is hsl(160, 84%, 39%). The result updates as you type, and every other format (HEX, RGB, HSL, CMYK and more) is shown at the same time.

What HEX and HSL mean

A HEX color is a six-digit hexadecimal code with a # in front: two digits each for red, green and blue, from 00 to FF. In #3B82F6, red is 3B, green is 82 and blue is F6. A three-digit shorthand such as #38F repeats each digit, and eight digits add opacity at the end.

HSL describes a color as hue (0 to 360 degrees around the color wheel), saturation (0 to 100 percent) and lightness (0 to 100 percent). It is easier to reason about than RGB: keep the hue and change the lightness to get lighter or darker shades of the same color.

Convert HEX to HSL by hand

Here is the calculation for #10B981, step by step:

1. Convert the HEX code to RGB first: #10B981 is rgb(16, 185, 129).
2. Divide each channel by 255: 0.063, 0.725, 0.506.
3. Lightness is the average of the largest and smallest values: 39%.
4. Saturation depends on how far apart they are (84%), and the hue is the position on the color wheel from the dominant channel (160°).
5. Result: hsl(160, 84%, 39%).

HEX to HSL table of common colors

When to use HEX and when HSL

HEX is the most compact way to write a color in CSS and design tools, so it is the code most people copy and share. HSL is best when you want to adjust a color by eye or in code: raise the lightness for a hover state, lower the saturation for a muted variant.

Good to know

• Shorthand HEX codes such as #38F expand to #3388FF, and eight-digit codes carry an opacity value at the end.
• Values are rounded to whole numbers for display; the converter keeps more precision internally.
• The color picker lets you pick a color by eye when you do not have its code.
• Colors displayed on screen depend on your monitor's calibration, so the same code can look slightly different on different devices.