Converting HEX to HSL
HEX is the six-digit hexadecimal notation (like #A855F7) used throughout HTML and CSS to describe screen colors. HSL expresses a color as a hue angle plus saturation and lightness percentages, which maps closely to how people think about color.
HEX and HSL both describe on-screen color, so the conversion is exact and lossless. HEX is handy for web design, CSS, and sharing exact brand colors, while HSL is better for designing palettes and tweaking colors intuitively in CSS.
This HEX to HSL converter works instantly in your browser: type or pick a HEX color and the HSL value updates live, along with every other common format so you can copy whichever you need. Nothing is sent to a server, and it is completely free with no limits.
When do you need HSL?
Reach for HSL when you are working on designing palettes and tweaking colors intuitively in CSS. Designers and developers routinely convert HEX to HSL to move a color between a web workflow and a design one without eyeballing it. If you want to grab a color straight from an image instead of typing it, try our color picker from image, or build a full scheme with the palette generator.
You can also convert in the other direction with our HSL to HEX converter, or jump to any other format — the tool always shows HEX, RGB, HSL, HSV, and CMYK side by side.