HSL to HEX Converter
Type or paste a HSL color: With commas or spaces, hsla(); the hue may end in deg. Saturation and lightness need the % sign.
#FF0000HSL:
hsl(0, 100%, 50%)HEX:
#FF0000CSS Usage:
background-color: #FF0000;color: #FF0000;border: 1px solid #FF0000;Popular Examples:
How to Convert HSL to HEX
HSL to HEX converts Hue, Saturation, Lightness values to a 6-character hex color code. For example, hsl(0, 100%, 50%) becomes #FF0000, and hsl(210, 100%, 56%) becomes #1F8FFF — one step from dodgerblue #1E90FF, because HSL here is rounded to whole numbers. Use this converter when you've been working with HSL in CSS and need the HEX equivalent for a design tool, image editor, or brand color reference.
Why Use This Converter?
- Instant real-time conversion
- Free online tool - no registration required
- Live color preview
- CSS code examples
- One-click copy to clipboard