HSL to HEX Converter
Convert any HSL color to HEX code instantly. Enter H (0–360), S (0–100), and L (0–100) values below.
Popular HSL to HEX Conversions
| Color | HSL | HEX | RGB | |
|---|---|---|---|---|
|
Red
|
hsl(0, 100%, 50%) | #FF0000 | rgb(255, 0, 0) | Details → |
|
Blue
|
hsl(240, 100%, 50%) | #0000FF | rgb(0, 0, 255) | Details → |
|
Green
|
hsl(120, 100%, 40%) | #00CC00 | rgb(0, 204, 0) | Details → |
|
Yellow
|
hsl(60, 100%, 50%) | #FFFF00 | rgb(255, 255, 0) | Details → |
|
Cyan
|
hsl(180, 100%, 50%) | #00FFFF | rgb(0, 255, 255) | Details → |
|
Magenta
|
hsl(300, 100%, 50%) | #FF00FF | rgb(255, 0, 255) | Details → |
|
Orange
|
hsl(30, 100%, 50%) | #FF8000 | rgb(255, 128, 0) | Details → |
|
Purple
|
hsl(270, 70%, 50%) | #8026D9 | rgb(128, 38, 217) | Details → |
|
Pink
|
hsl(330, 100%, 71%) | #FF6BB5 | rgb(255, 107, 181) | Details → |
|
Teal
|
hsl(180, 62%, 35%) | #229191 | rgb(34, 145, 145) | Details → |
|
Coral
|
hsl(16, 100%, 66%) | #FF8052 | rgb(255, 128, 82) | Details → |
|
Navy
|
hsl(240, 100%, 25%) | #000080 | rgb(0, 0, 128) | Details → |
|
Lime
|
hsl(80, 100%, 35%) | #77B300 | rgb(119, 179, 0) | Details → |
|
Maroon
|
hsl(0, 100%, 25%) | #800000 | rgb(128, 0, 0) | Details → |
|
Sky Blue
|
hsl(197, 71%, 73%) | #89CFEB | rgb(137, 207, 235) | Details → |
|
Gold
|
hsl(51, 100%, 50%) | #FFD900 | rgb(255, 217, 0) | Details → |
|
Silver
|
hsl(0, 0%, 75%) | #BFBFBF | rgb(191, 191, 191) | Details → |
|
Lavender
|
hsl(267, 67%, 78%) | #C3A1EC | rgb(195, 161, 236) | Details → |
|
Crimson
|
hsl(348, 83%, 47%) | #DB143C | rgb(219, 20, 60) | Details → |
|
Turquoise
|
hsl(174, 72%, 56%) | #3EE0CF | rgb(62, 224, 207) | Details → |
Color of the Day
Indigo
#6A3190
Did You Know?
Figma, Sketch, and Photoshop all default to HEX for color values because designers find them easy to share and remember.
Jun 22, 2026
Recent Conversions
Converted HSL(270, 70%, 50%) to HEX
17m ago
Converted HSL(16, 100%, 66%) to HEX
12m ago