Why does HSL matter more than hex while designing?

Because you can change one property at a time. Add 20% lightness to a hex code and the hue shifts as well; do it in HSL and the hue and saturation stay exactly where they were.

HSLA is HSL with an alpha channel — hsl(262, 83%, 58%, 0.5). Use the hex to RGBA converter if you would rather work with the rgba() function.

Is HSL the same as HSV?

No. HSL measures lightness from black through the pure color to white, while HSV measures brightness from black to the brightest version of that color. Hue is identical in both models.

Hex to HSL Converter

Paste a hex code and read its hue, saturation and lightness — the three values you actually edit when you adjust a color.

Hex code

#7c3aed

HSL

hsl(262, 83%, 58%)

Hue

262°

Saturation

83%

Lightness

58%

RGB

rgb(124, 58, 237)

Hex

#7c3aed

HSL describes a color the way people talk about it: a hue angle on the wheel (0-360°), a saturation percentage and a lightness percentage. A hex code stores the same color as three bytes, which suits machines and not humans — turning #7C3AED into hsl(262, 83%, 58%) immediately tells you it is a saturated violet you can lighten or desaturate predictably.

Frequently asked questions

Convert the hex to RGB first, then map those channels onto the HSL cylinder: hue comes from which channel dominates, saturation from how far the strongest channel sits from the average, and lightness from the midpoint between the brightest and darkest channel.

Good to know

Hue is an angle from 0° to 360° — 0° is red, 120° green and 240° blue.
Lightness 50% is where an HSL color is at full strength; 0% is black and 100% is white.
The values update live as you type or paste a different hex.

Tools that pair with Hex to HSL Converter

Hex to HSL Converter is one of 33 single-page tools in this workspace. These are the ones that carry the job on — the color value moves between them, so nothing gets retyped or re-uploaded.

RGB to HSL ConverterConvert red, green and blue channels into HSL.HSL to Hex ConverterTurn hue, saturation and lightness into a hex code.Color PickerPick, fine-tune and copy any color in HEX, RGB or HSL.