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.
Blue Color Codes
Common Blue web colours with their HEX, RGB, and HSL equivalents.
| Colour name | Hex code | RGB value | HSL value | |
|---|---|---|---|---|
| Pure Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | |
| Navy Blue | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 27%) | |
| Dark Blue | #00008B | rgb(0, 0, 139) | hsl(240, 100%, 27%) | |
| Royal Blue | #4169E1 | rgb(65, 105, 225) | hsl(225, 73%, 57%) | |
| Sky Blue | #87CEEB | rgb(135, 206, 235) | hsl(197, 71%, 73%) | |
| Light Blue | #ADD8E6 | rgb(173, 216, 230) | hsl(195, 53%, 79%) | |
| Ice Blue | #F0F8FF | rgb(240, 248, 255) | hsl(208, 100%, 97%) | |
| Cornflower Blue | #6495ED | rgb(100, 149, 237) | hsl(219, 79%, 66%) | |
| Dodger Blue | #1E90FF | rgb(30, 144, 255) | hsl(210, 100%, 56%) | |
| Steel Blue | #4682B4 | rgb(70, 130, 180) | hsl(207, 44%, 49%) | |
| Midnight Blue | #191970 | rgb(25, 25, 112) | hsl(240, 64%, 27%) | |
| Cobalt Blue | #0047AB | rgb(0, 71, 171) | hsl(215, 100%, 34%) | |
| Sapphire | #0F52BA | rgb(15, 82, 186) | hsl(216, 85%, 39%) | |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | |
| Cyan / Aqua | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
Colors with RGB, HEX, and HSL values
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.