HSL to HEX Converter
Convert HSL color values to HEX format instantly. HEX codes are the standard for web and UI work — this tool converts your hue, saturation, and lightness values to a copy-paste-ready hex string for CSS, Figma, or HTML.
name, hex, rgb, hsl, hwb, cmyk, ncol
| Format | Value | |
|---|---|---|
| Hex | #ff7e57 | |
| Name | — | |
| RGB | rgb(255, 126, 87) | |
| HSL | hsl(14, 100%, 67%) | |
| HWB | hwb(14, 34%, 0%) | |
| CMYK | cmyk(0%, 51%, 66%, 0%) | |
| NCol | R23, 34%, 0% | |
| OKLCH | oklch(73.5% 0.1665 37.54) |
Lighter / Darker:
#ffebe5
#ffc8b8
#ffa58a
#ff825c
#ff5f2e
#ff3c00
#d13100
#a32600
#751b00
#471100
#1a0600
Pick a Color:
Related Color Converters
How to Use This Tool
Enter an HSL color using hsl(h, s%, l%) syntax — for example, hsl(14, 100%, 67%). The tool converts it to a HEX code instantly. The hex output includes the leading # and is ready for use in HTML, CSS, Figma, Sketch, or any other tool. Click the hex value to copy it. The shade bar shows hex codes for tints and shades derived from your input color, letting you pick the right tone without extra steps.