HEX to HSL converter
Convert a hex color code to HSL — hue, saturation and lightness — for easier color tweaking.
3, 6 or 8 hex digits, with or without #
Hue 0–360, saturation & lightness 0–100%
All values for this color
HEX to HSL reference table
Common colors with their Hexadecimal and Hue, Saturation, Lightness values. Select a name to open its full color page.
| Color | Name | hex | hsl |
|---|---|---|---|
| Black | #000000 | 0, 0%, 0% | |
| White | #FFFFFF | 0, 0%, 100% | |
| Red | #FF0000 | 0, 100%, 50% | |
| Green | #008000 | 120, 100%, 25% | |
| Blue | #0000FF | 240, 100%, 50% | |
| Yellow | #FFFF00 | 60, 100%, 50% | |
| Cyan | #00FFFF | 180, 100%, 50% | |
| Magenta | #FF00FF | 300, 100%, 50% | |
| Orange | #FFA500 | 39, 100%, 50% | |
| Purple | #800080 | 300, 100%, 25% | |
| Pink | #FFC0CB | 350, 100%, 88% | |
| Brown | #A52A2A | 0, 59%, 41% | |
| Gray | #808080 | 0, 0%, 50% | |
| Navy | #000080 | 240, 100%, 25% | |
| Teal | #008080 | 180, 100%, 25% | |
| Maroon | #800000 | 0, 100%, 25% | |
| Olive | #808000 | 60, 100%, 25% | |
| Lime | #00FF00 | 120, 100%, 50% | |
| Silver | #C0C0C0 | 0, 0%, 75% | |
| Gold | #FFD700 | 51, 100%, 50% |
Frequently asked questions
How do I convert hex to HSL?
The hex is read as RGB, then remapped onto a cylinder: hue is the angle 0–360°, saturation is color intensity 0–100%, and lightness is 0–100% from black to white. This tool shows the result live as you type.
Why use HSL instead of hex?
HSL is intuitive for adjusting color. To make a shade darker you lower lightness; to mute it you lower saturation — no base-16 math required. It is ideal for generating tints, shades and hover states.
Is HSL the same as HSB/HSV?
No. HSL uses lightness where 50% is the pure hue; HSV/HSB uses value/brightness where 100% is the pure hue. They share the hue angle but differ in the third axis.