HSL to HEX Converter
Enter an HSL color to get its HEX code right away. You can paste hsl(217, 91%, 60%) or just type the three numbers, and the swatch updates live. The math runs in your browser.
How to convert HSL to HEX
- Type or paste your HSL color into the box, for example hsl(217, 91%, 60%).
- Read the HEX code as it updates live below, next to a color swatch.
- Copy the #hex value with the copy button to use it in CSS or design tools.
Examples
Pure red
hsl(0, 100%, 50%)
#ff0000
Brand-style blue
hsl(217, 91%, 60%)
#3c83f6
Frequently asked questions
What are HSL and HEX colors?
HSL describes a color by hue (0 to 360 degrees), saturation (0 to 100%) and lightness (0 to 100%), which is intuitive for tweaking shades. HEX is a 6-digit code like #3b82f6 that packs the red, green and blue channels into hexadecimal, the format CSS and design tools use most.
What input formats does this accept?
Either a full CSS string like hsl(217, 91%, 60%) or just the three numbers as h,s,l, for example 217,91,60. The percent signs and the hsl() wrapper are optional, so paste whatever you have.
Why would I convert HSL to HEX?
HSL is great for picking and adjusting a color by feel, but most stylesheets, design files and brand guidelines store colors as HEX. Converting lets you keep working in HSL and ship a HEX code that drops straight into your code.
How is the HEX value rounded?
HSL is mapped to red, green and blue, and each channel is rounded to the nearest whole number from 0 to 255 before being written as two hex digits. Tiny rounding can occur because 256 integer steps cannot represent every HSL value exactly, so hsl(217, 91%, 60%) lands on #3c83f6, the closest matching HEX.
Does it handle hue values outside 0 to 360?
Yes. Hue wraps around the color wheel, so 370 is treated as 10 and negative hues wrap too. Saturation and lightness are clamped to the 0 to 100% range.
Is my data sent anywhere?
No. The conversion runs entirely in your browser, so the colors you enter never leave your device.
Related tools
HEX to HSL
Convert a HEX color to HSL online. Paste a hex code like #3b82f6 and get the hue, saturation and lightness instantly. Runs in your browser.
HSL to RGB
Convert HSL colors to RGB instantly. Paste hsl(h, s%, l%) or plain h,s,l values and get an rgb() string with a live color swatch. Runs in your browser.
Binary to Decimal
Convert binary to decimal online. Paste any binary number, with or without spaces, and get the exact base-10 value instantly. Runs in your browser.
Binary to Hex
Convert binary to hexadecimal online. Paste a binary number and get exact hex, with optional uppercase. Handles huge values. Runs in your browser.
Celsius to Fahrenheit
Convert Celsius to Fahrenheit instantly. Type a temperature in C and get F, with the formula and a quick reference table. Runs in your browser.
Centimeters to Inches
Convert centimeters to inches instantly. Type a length in cm and get inches, with the formula and a quick reference table. Runs in your browser.