Hex to HSL converter
Type or paste a hex code to get hue, saturation and lightness.
How hex to HSL works
First the hex code becomes RGB, and each channel is divided by 255. Lightness is the average of the largest and smallest channel. Saturation is the spread between them, divided by 1 − |2L − 1|. Hue depends on which channel is largest and is measured in degrees around the color wheel.
Common colors in HSL
| Color | HEX | HSL | HSV / HSB |
|---|---|---|---|
| Red | #FF0000 | hsl(0, 100%, 50%) | hsv(0, 100%, 100%) |
| Green | #008000 | hsl(120, 100%, 25%) | hsv(120, 100%, 50%) |
| Blue | #0000FF | hsl(240, 100%, 50%) | hsv(240, 100%, 100%) |
| Black | #000000 | hsl(0, 0%, 0%) | hsv(0, 0%, 0%) |
| White | #FFFFFF | hsl(0, 0%, 100%) | hsv(0, 0%, 100%) |
| Gray | #808080 | hsl(0, 0%, 50%) | hsv(0, 0%, 50%) |
| Navy Blue | #000080 | hsl(240, 100%, 25%) | hsv(240, 100%, 50%) |
| Teal | #008080 | hsl(180, 100%, 25%) | hsv(180, 100%, 50%) |
| Sage Green | #9CAF88 | hsl(89, 20%, 61%) | hsv(89, 22%, 69%) |
| Burgundy | #800020 | hsl(345, 100%, 25%) | hsv(345, 100%, 50%) |
| Lavender | #E6E6FA | hsl(240, 67%, 94%) | hsv(240, 8%, 98%) |
| Gold | #FFD700 | hsl(51, 100%, 50%) | hsv(51, 100%, 100%) |
| Coral | #FF7F50 | hsl(16, 100%, 66%) | hsv(16, 69%, 100%) |
| Hot Pink | #FF69B4 | hsl(330, 100%, 71%) | hsv(330, 59%, 100%) |
| Beige | #F5F5DC | hsl(60, 56%, 91%) | hsv(60, 10%, 96%) |
| Charcoal | #36454F | hsl(204, 19%, 26%) | hsv(204, 32%, 31%) |
Questions
- What is HSL?
- HSL describes a color by hue (its position on the color wheel, 0 to 360°), saturation (how vivid, 0 to 100%) and lightness (from black at 0% to white at 100%). It is easier to tweak by hand than hex or RGB.
- Is HSL the same as HSB or HSV?
- No. They share the hue, but HSB/HSV uses brightness (value) instead of lightness, so the saturation numbers differ too. Pure red is hsl(0, 100%, 50%) but hsv(0, 100%, 100%).
- Can I use HSL in CSS?
- Yes: color: hsl(91, 22%, 61%); works in every modern browser, and hsl() accepts an alpha value too.
More color tools
- Color pickerPick any color and get its HEX, RGB, HSL and CMYK codes
- Hex to RGB converterTurn a hex code into RGB values
- RGB to hex converterTurn red, green and blue values into a hex code
- Hex to CMYK converterPrint-ready CMYK percentages from a hex code
- Color contrast checkerWCAG contrast ratio for text and background colors
- Color mixerBlend two colors and see every step in between
- Image color pickerUpload a photo and pick colors from it
- CSS gradient generatorBuild a linear or radial gradient and copy the CSS