HSL to HEX Converter
Set hue, saturation and lightness and get the matching six-digit HEX color code, ready to copy.
hsl input
Result · HEX
#FF3D77
RGB
rgb(255, 61, 119)
HSL
hsl(342, 100%, 62%)
HSV
hsv(342, 76%, 100%)
CMYK
cmyk(0%, 76%, 53%, 0%)
How to use: HSL to HEX
- 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.
Why convert HSL to HEX
HSL is the most intuitive way to build a color system. You fix a hue, say 262° for violet, and create a whole scale by changing mainly the lightness: around 95% for backgrounds, 58% for buttons and accents, 30% for text. Designers and developers use this method for tints, shades and dark themes.
The finished scale, however, usually has to be delivered as HEX codes: style guides, design tokens, Figma libraries, brand books and many content management systems expect #RRGGBB values. Enter the HSL values and copy the HEX result — hsl(262, 83%, 58%), for example, becomes #7C3BED. The tool also shows RGB, HSV and CMYK for the same color. Since HEX can store only 256 levels per channel, very small changes in HSL do not always change the HEX code.
Everything runs locally in your browser — your images are never uploaded to a server.