HEX to HSL Converter
Convert HEX to HSL as you type — free, instant, with a worked example and a common-colors chart.
Type a HEX value and read the HSL value below it, or pick a color from the swatch.
Worked example
HEX #ff5733 = HSL 11, 100%, 60%
How the conversion works
- A HEX code is the same three RGB channels written in base-16: two digits per channel, from 00 (0) to ff (255).
- HSL describes the same color by hue (0–360° on the color wheel), saturation and lightness — handy for darkening or desaturating a color by changing just one component.
Common colors in HEX and HSL
| Color | HEX | HSL |
|---|---|---|
| Red | #ff0000 | 0, 100%, 50% |
| Orange | #ffa500 | 39, 100%, 50% |
| Yellow | #ffff00 | 60, 100%, 50% |
| Green | #008000 | 120, 100%, 25% |
| Cyan | #00ffff | 180, 100%, 50% |
| Blue | #0000ff | 240, 100%, 50% |
| Purple | #800080 | 300, 100%, 25% |
| Pink | #ffc0cb | 350, 100%, 88% |
| Brown | #a52a2a | 0, 59%, 41% |
| White | #ffffff | 0, 0%, 100% |
| Gray | #808080 | 0, 0%, 50% |
| Black | #000000 | 0, 0%, 0% |
Every conversion runs in your browser. Nothing you enter is uploaded to BroBroGo.
FAQ
How do I convert HEX to HSL?
Type or paste your HEX value above — the HSL value updates as you type. You can also pick the color visually with the swatch.
Is the conversion exact?
Values are rounded to whole numbers, the form CSS and design tools expect. The difference stays far below anything the eye can see.