Boneyard Tools

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

  1. Type or paste your HSL color into the box, for example hsl(217, 91%, 60%).
  2. Read the HEX code as it updates live below, next to a color swatch.
  3. 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