How to use the HSL to Hex Converter
Enter hue from 0 to 360, and saturation and lightness from 0 to 100. You get the hex code and the RGB values.
How HSL to hex conversion works
Hue picks the colour on the wheel, saturation sets how vivid it is and lightness sets how close it is to black or white. The converter turns these into red, green and blue values from 0 to 255, then writes each one as a two-digit hex number.
Why the hex may differ slightly from an original
HSL values are usually rounded to whole numbers. Converting #3B82F6 to HSL gives hsl(217, 91%, 60%), and converting that back gives #3C83F6, one step away in each channel. The difference is not visible on screen.
How it works
Standard HSL to RGB conversion, then hex.
Examples
- hsl(217, 91%, 60%)
#3C83F6 rgb(60, 131, 246)
- hsl(11, 100%, 60%)
#FF5833 rgb(255, 88, 51)
HSL to hex table
| HSL | Hex |
|---|---|
| hsl(0, 100%, 50%) | #FF0000 |
| hsl(30, 100%, 50%) | #FF8000 |
| hsl(60, 100%, 50%) | #FFFF00 |
| hsl(120, 100%, 50%) | #00FF00 |
| hsl(180, 100%, 50%) | #00FFFF |
| hsl(240, 100%, 50%) | #0000FF |
| hsl(270, 100%, 50%) | #8000FF |
| hsl(300, 100%, 50%) | #FF00FF |
| hsl(0, 0%, 0%) | #000000 |
| hsl(0, 0%, 100%) | #FFFFFF |
| hsl(217, 91%, 60%) | #3C83F6 |
Limitations and assumptions
Runs entirely in your browser. Nothing you enter is uploaded.
Frequently asked questions
What hex is hsl(0, 100%, 50%)?
#FF0000, pure red.
What does 0% saturation give?
A neutral grey. With no saturation the hue has no effect, and lightness alone decides how light or dark the grey is.
How do I convert hex to HSL?
Use the hex to HSL converter.