HSL to HEX Color Converter
Convert HSL color values to HEX format easily. Enter hue, saturation, and lightness values and get the equivalent hex color code.
H: 0-360°, S: 0-100%, L: 0-100%
HEX Result
Enter valid HSL values to see HEX result
Why Convert HSL to HEX?
HSL is intuitive for humans — you know hsl(217, 91%, 60%) is a vibrant medium blue. But design tools, older CSS codebases, and many third-party libraries expect hex codes. This converter translates HSL values into the compact #3B82F6 format.
How the Conversion Works
The algorithm first converts HSL to RGB using the standard formula (which involves calculating intermediate values based on saturation and lightness). Then each RGB channel (0-255) converts to a two-digit hex number.
For hsl(217, 91%, 60%): The conversion produces RGB(59, 130, 246), which becomes #3B82F6 in hex.
When You Need HEX Instead of HSL
Design Tool Compatibility
Figma, Sketch, and Adobe XD display colors as hex by default. Converting from HSL lets you input exact values into these tools.
Legacy CSS Codebases
Older projects standardize on hex codes. When adding new colors defined in HSL, convert them to maintain consistency with existing code.
JavaScript Color Libraries
Many npm packages expect hex strings as input. Converting from HSL lets you use these libraries with colors you've defined in HSL format.
Short Format Optimization
When HSL values produce colors like #AABBCC, you can use the short form #ABC. This tool detects when short format is possible for smaller file sizes.
Understanding Short Hex Format
When each pair of hex digits is identical, you can use three-digit format. This tool automatically detects and displays when short format is available.
• hsl(0, 0%, 100%) → #FFFFFF → #FFF
• hsl(0, 0%, 0%) → #000000 → #000
• hsl(0, 0%, 73%) → #BBBBBB → #BBB
• hsl(217, 91%, 60%) → #3B82F6 → cannot shorten
Frequently Asked Questions
Do I need to include the % symbols?
No, just enter the numbers. Enter "217, 91, 60" or "hsl(217, 91%, 60%)" — the converter parses both formats.
What if my hue is over 360?
Hue values wrap around. 360° equals 0°, 370° equals 10°, etc. The converter handles this automatically using modulo arithmetic.
Can I convert colors with 0% saturation?
Yes, fully desaturated colors are grays. The hue value doesn't matter when saturation is 0%. hsl(0, 0%, 50%) and hsl(180, 0%, 50%) both produce #808080.
How do I convert hex back to HSL?
Use our Hex to HSL Converter tool. The conversion is fully reversible with no loss of precision.
Why is my hex code uppercase?
Hex codes are case-insensitive. #3B82F6 and #3b82f6 are identical. This tool outputs uppercase by convention, but you can lowercase it if needed.
Can I use decimal values in HSL?
CSS accepts decimals like hsl(217.5, 91.3%, 60.2%). This tool rounds to whole numbers for simplicity. For more precision, convert manually or use a calculator.
Common HSL to HEX Conversions
hsl(0, 100%, 50%)
→ #FF0000 (red)
hsl(120, 100%, 50%)
→ #00FF00 (green)
hsl(240, 100%, 50%)
→ #0000FF (blue)
hsl(60, 100%, 50%)
→ #FFFF00 (yellow)
hsl(180, 100%, 50%)
→ #00FFFF (cyan)
hsl(300, 100%, 50%)
→ #FF00FF (magenta)
hsl(0, 0%, 0%)
→ #000000 (black)
hsl(0, 0%, 100%)
→ #FFFFFF (white)
Related Color Tools
Other Free Color Tools
HEX to HSL Color Converter
Convert HEX color codes to HSL (Hue, Saturation, Lightness) values instantly. Perfect for CSS developers who work with HSL color functions.
RGB to HEX Color Converter
Convert RGB color values to HEX format in one click. Enter your red, green, and blue values and get the corresponding hex code ready to use.
HEX to RGB Color Converter
Convert HEX color codes to RGB values instantly. Simply enter any hex code and get the exact red, green, and blue values for your CSS or design work.
HSL to HSV Color Converter
Convert HSL (Hue, Saturation, Lightness) color values to HSV (Hue, Saturation, Value) format. Useful for designers working across different color models.
Color Picker
Pick any color using an interactive palette or enter HEX, RGB, or HSL values. Copy your color code instantly for use in any design or development project.
Color Palette Generator from Base Color
Generate a beautiful, harmonious color palette from a single base color. Perfect for building consistent UI color schemes and brand identities.