HEX to HSL
Free online photo editor & creative toolkit
hex input
Result · HSL
hsl(344, 100%, 62%)
HEX
#FF3D72
RGB
rgb(255, 61, 114)
HSV
hsv(344, 76%, 100%)
CMYK
cmyk(0%, 76%, 55%, 0%)
How to use: HEX to HSL
- 1
Enter a color
Type a color code or choose a color with the picker — every field accepts the format it shows.
- 2
See it converted
The result updates instantly as you type, together with a live preview of the color.
- 3
Copy the code
Copy the value you need with one click and paste it into your design, CSS or print settings.
HEX and HSL colors
HEX is how colors are written in CSS and design tools: a # followed by three pairs of hexadecimal digits for red, green and blue. HSL describes the same color the way people think about it — hue as an angle on the color wheel from 0 to 360°, saturation and lightness in percent.
Converting to HSL is handy when you need variations of one color: keep the hue and change the lightness to get lighter and darker shades for hover states, backgrounds and borders. Browsers understand both notations, for example hsl(342, 100%, 62%).
Everything runs locally in your browser — your images are never uploaded to a server.