What range are HSL values?

Hue is 0–360 (degrees), Saturation and Lightness are 0–100 (percent).

CSS supports HSL natively: hsl(220, 90%, 56%). Many design tools also display HSL.

Why doesn't my HSL value convert back to the original HEX?

HSL is entered in whole degrees and percentages, so a round trip can move a channel slightly. #3b82f6 converts to hsl(217, 91%, 60%), and that converts back to #3c83f6.

What happens if hue is above 360?

Enter hue from 0 to 360 and saturation and lightness from 0 to 100. Values outside those ranges show no result instead of being wrapped or clamped.

HSL to HEX Converter

Enter HSL values and get the corresponding HEX color code instantly. Useful when going from design tools to CSS code. Runs in your browser.

Input

H (0–360)

S (0–100)

L (0–100)

All formats

HEX#3c83f6

RGBrgb(60, 131, 246)

HSLhsl(217, 91%, 60%)

CONVERT

All three formats are shown simultaneously regardless of mode.

Runs entirely in your browser

How it works

Hue picks a point on the color wheel, and saturation and lightness set how far the red, green and blue channels spread around the lightness value. The channels are rounded to whole numbers from 0 to 255 and written as a HEX code: hsl(217, 91%, 60%) becomes rgb(60, 131, 246), which is #3c83f6. All conversion runs in JavaScript in your browser.

Processing runs in your browser

All computation happens inside your browser tab. Our servers are not involved at any point.

Related operations

To check whether two colours meet WCAG legibility, try the contrast checker. For building a coordinated set from one base colour, use the colour palette generator. To craft smooth multi-stop blends in CSS, see the CSS gradient generator.

Frequently asked questions

What range are HSL values?: Hue is 0–360 (degrees), Saturation and Lightness are 0–100 (percent).
Where is HSL used?: CSS supports HSL natively: hsl(220, 90%, 56%). Many design tools also display HSL.
Why doesn't my HSL value convert back to the original HEX?: HSL is entered in whole degrees and percentages, so a round trip can move a channel slightly. #3b82f6 converts to hsl(217, 91%, 60%), and that converts back to #3c83f6.
What happens if hue is above 360?: Enter hue from 0 to 360 and saturation and lightness from 0 to 100. Values outside those ranges show no result instead of being wrapped or clamped.

Last reviewed September 30, 2026

Other pages for this tool

Related tools

Background reading: Complete guide to color tools