HSL to HEX Converter with Live Preview
Enter hue, saturation, and lightness values and get the HEX code immediately.
Summary
Enter hue, saturation, and lightness values and get the HEX code immediately.
How it works
- Set the hue (0-360), saturation (0-100), and lightness (0-100)
- The HEX code and preview update instantly
- Click copy to use the code elsewhere
Use cases
- Export HSL color picker results to hex format
- Align design tokens between HSL-based design systems and hex-based tools
- Convert CSS variables to hex for older tools
Frequently Asked Questions
Last updated: 2026-07-01 ·
Reviewed by Nham Vu