HEX to HSL Converter
HEX to HSL Converter turns a hexadecimal color code into hue, saturation and lightness values. HSL is often the easiest format for making a color lighter, darker or less vivid while keeping the same hue.
Pick a color or type a HEX value and the matching HSL string appears instantly, alongside RGB and a live swatch.
#7c3aedrgb(124, 58, 237)hsl(262, 83%, 58%)How to use HEX to HSL Converter
- 1
Enter a HEX color
Type a 3- or 6-digit HEX value like #f00 or #ff0000, or use the picker.
- 2
Read the HSL value
The matching hsl() string updates live, with RGB shown too.
- 3
Copy the HSL string
Paste it straight into your stylesheet.
Why convert HEX to HSL
HSL describes a color as a hue angle on the color wheel (0–360), a saturation percentage and a lightness percentage. That makes it intuitive to build tints and shades: keep the hue, change the lightness.
A HEX code, by contrast, encodes raw red, green and blue channels, which is compact but hard to adjust by eye. Converting to HSL gives you a handle on the color you can actually reason about.
Building a palette with HSL
Once you have a base color in HSL, you can generate a consistent scale by stepping the lightness up and down while holding hue and saturation steady. This is how many design systems build their color ramps.
When you are done, convert back to HEX or RGB for the formats your code or design tool expects.
Frequently asked questions
- Does it support 3-digit shorthand HEX?
- Yes. Shorthand like #f00 is expanded to #ff0000 before conversion, so both forms work.
- What are the HSL ranges?
- Hue is 0–360 degrees, while saturation and lightness are percentages from 0 to 100.
Last updated: