HSL to Hex Converter
Enter a hue, saturation and lightness to get the hex and RGB color codes, with a preview swatch.
How to use the HSL to Hex Converter
- Enter hue (0–360°).
- Enter saturation and lightness (0–100%).
- Copy the hex or RGB value.
How it works
HSL describes color the way people think about it: hue is the position on the color wheel (0° red, 120° green, 240° blue), saturation is intensity and lightness runs from black (0%) to white (100%), with pure colors at 50%. Designers create tints and shades by changing only the lightness. The conversion to RGB follows the CSS Color specification.
HSL examples
| HSL | Hex | Color |
|---|---|---|
| hsl(0, 100%, 50%) | #FF0000 | Red |
| hsl(120, 100%, 25%) | #008000 | Dark green |
| hsl(240, 100%, 50%) | #0000FF | Blue |
| hsl(60, 100%, 50%) | #FFFF00 | Yellow |
| hsl(0, 0%, 50%) | #808080 | Gray |
| hsl(30, 100%, 50%) | #FF8000 | Orange |
Frequently asked questions
What is hsl(0, 100%, 50%) in hex?
#FF0000 (red).
How do I make a darker shade in HSL?
Lower the lightness while keeping hue and saturation.
Can CSS use HSL directly?
Yes — hsl() is supported in all modern browsers.
What is the hue of green?
120°.
How do I convert HSL to RGB by hand?
Compute chroma C = (1 − |2L − 1|) × S, pick the RGB order from the hue sector (each 60°), then add L − C/2 to each channel and multiply by 255.
Why use HSL instead of hex?
It is easier to adjust: change lightness for tints and shades or hue for a related color, without recalculating all three channels.