How does HSL to HEX conversion work?
Converting HSL to HEX is a two-step process: first, H, S, L values are converted to RGB decimal channels using a standard color-wheel formula. Then each RGB channel is converted from decimal to two-digit hexadecimal and concatenated with a # prefix.
For hsl(221, 83%, 53%), the formula produces rgb(37, 99, 235), which then converts to #2563EB.
When would you convert HSL to HEX?
Many design tools and CSS properties output HSL because it is intuitive to adjust. However, older codebases, SVG files, and some email clients require HEX format. This converter lets you work in HSL and get a compatible HEX output instantly.
Common color reference
Common web colours with their HSL and HEX equivalents.
| Colour name | Hex code | RGB value | HSL value | |
|---|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | |
| Orange | #FF8000 | rgb(255, 128, 0) | hsl(30, 100%, 50%) | |
| Coral | #FF6347 | rgb(255, 99, 71) | hsl(9, 100%, 64%) | |
| Silver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | |
| Maroon | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) | |
| Amber | #F59E0B | rgb(245, 158, 11) | hsl(38, 92%, 50%) | |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | |
| Navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) | |
| Indigo | #4B0082 | rgb(75, 0, 130) | hsl(275, 100%, 25%) |
Frequently asked questions
Does HSL support transparency?
Standard HSL has no alpha channel. For transparency use hsla(H, S%, L%, A) where A is 0–1. The HEX equivalent is an 8-digit code where the last two digits encode the alpha.
What happens at L = 0% or L = 100%?
At L = 0%, the result is always black regardless of hue. At L = 100%, always white. The hue is only visible between those extremes.