HSL to HEX Converter
Convert HSL to HEX as you type — free, instant, with a worked example and a common-colors chart.
Type a HSL value and read the HEX value below it, or pick a color from the swatch.
Worked example
HSL 11, 100%, 60% = HEX #ff5733
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 HSL and HEX
| Color | HSL | HEX |
|---|---|---|
| Red | 0, 100%, 50% | #ff0000 |
| Orange | 39, 100%, 50% | #ffa500 |
| Yellow | 60, 100%, 50% | #ffff00 |
| Green | 120, 100%, 25% | #008000 |
| Cyan | 180, 100%, 50% | #00ffff |
| Blue | 240, 100%, 50% | #0000ff |
| Purple | 300, 100%, 25% | #800080 |
| Pink | 350, 100%, 88% | #ffc0cb |
| Brown | 0, 59%, 41% | #a52a2a |
| White | 0, 0%, 100% | #ffffff |
| Gray | 0, 0%, 50% | #808080 |
| Black | 0, 0%, 0% | #000000 |
Every conversion runs in your browser. Nothing you enter is uploaded to BroBroGo.
FAQ
How do I convert HSL to HEX?
Type or paste your HSL value above — the HEX 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.