Convert a HEX color into HSL

With HEX to HSL, designers and front-end developers can tune an interface before implementation. Convert a HEX color into HSL.

Convert a HEX color into HSL. Use it free in your browser without creating an account, then review the result before moving to the next step.

How to use

Enter a valid hexadecimal color code in the input area, using the format shown by the interface.
Run the conversion to get the corresponding HSL components without any further setup.
Read the hue, saturation and lightness values, then compare them with the original color in your design.
Copy the HSL values into your stylesheet or design tool, and clear the field if you are sharing your screen.

Example

With the sample color, the tool should return a hue, saturation and lightness that match the hexadecimal code you entered. Pay attention to hue and lightness before adapting a palette or a button state.

Input

#16A34A

Output

hsl(142 76% 36%)

Limits and formats

It converts a color but does not check contrast with text or assess accessibility.
It does not build palettes, suggest variants or repair an invalid hexadecimal code.
The HSL values are meant for copying; check their exact format before using them in a framework or preprocessor.

Where processing happens

The conversion takes place locally in your browser. The color code you type is not sent anywhere and does not leave your device.

Frequently asked questions

What are HSL values used for?

HSL describes a color through hue, saturation and lightness. These components are practical for adjusting a palette, creating variants or explaining a color in documentation.

Can I convert several colors at once?

No, the tool works on the value in the input area. To compare several colors, run the conversion again with each code one after another.

What if the result looks wrong?

First check that the hexadecimal code is complete and correctly spelled. An invalid or incomplete value cannot be converted into reliable HSL components.