How to convert HEX to HSL
- Type or paste the HEX code into Color. The # is optional.
- The HSL value appears on the right with RGB, HSV and CMYK.
- Click the HSL value to copy it.
From a brand color to a full palette
Brand guides usually give colors as HEX codes, but HEX is hard to adjust by eye. Converting to HSL splits the color into three plain controls. Keep the hue and saturation of your brand color and change only the lightness to get lighter backgrounds, borders and darker hover states that still clearly belong together.
For #6a5acd that could mean hsl(248, 53%, 95%) for a pale background, hsl(248, 53%, 58%) for the main color and hsl(248, 53%, 40%) for text or a pressed button. Type each one back into the color converter if you need the HEX code.
Reading the three numbers
- Hue is an angle on the color wheel: 0 is red, 120 is green and 240 is blue, with every other hue in between.
- Saturation runs from 0% (gray) to 100% (the most intense version of the hue).
- Lightness runs from 0% (black) to 100% (white). The purest color sits at 50%.