HSL to HEX Converter

Convert HSL and HSLA color values to HEX color codes instantly in your browser.

Convert any HSL or HSLA color to a HEX code instantly with this free online HSL to HEX converter. Type values such as hsl(243, 75%, 59%) (or just 243, 75%, 59%), or pick a color with the swatch, and get the matching #4f46e5 right away. It accepts plain comma-separated numbers, hsl() and hsla() strings, and an optional alpha channel that becomes an 8-digit #rrggbbaa value — and everything runs in your browser with nothing to install.

What is an HSL to HEX converter?

An HSL to HEX converter turns hue, saturation, and lightness values into a hexadecimal color code. HSL describes a color the way people tend to think about it: a hue angle on the color wheel (0–360°), a saturation percentage, and a lightness percentage. HEX describes the same color as a six-digit code like #4f46e5, which is the format CSS, design tools, and most websites use to set colors. Converting from HSL to HEX lets you design with intuitive hue and lightness controls and still paste the exact code your stylesheet needs.

How to convert HSL to HEX

The hue picks a base color on the wheel, saturation controls how vivid it is, and lightness controls how light or dark it is. The converter first maps HSL to red, green, and blue channels in the 0–255 range, then writes each channel as a two-digit hexadecimal pair and joins them behind a #. For example, hsl(243, 75%, 59%) becomes #5048e5. If you include an alpha value between 0 and 1, it is appended as a third pair to form an 8-digit #rrggbbaa code.

  1. Type or paste HSL values into the HSL field (hsl(...), hsla(...), or plain numbers all work).
  2. Read the HEX code and, when you add alpha, the 8-digit HEX value, updated as you type.
  3. Use the color picker if you would rather choose a color visually.
  4. Click Copy to copy the format you need.

Why use this HSL to HEX converter?

  • 100% free with no ads, sign-up, or limits.
  • Instant conversion as you type.
  • Accepts hsl(), hsla(), and plain comma-separated numbers.
  • Outputs ready-to-use #rrggbb, plus 8-digit #rrggbbaa when you include alpha.
  • Runs entirely in your browser — your colors never leave your device.

Frequently asked questions

How do I convert an HSL color to HEX?

First convert the HSL values to red, green, and blue channels in the 0–255 range, then write each channel as a two-digit hexadecimal number and join them after a #. For example hsl(243, 75%, 59%) becomes #5048e5. This tool does the math automatically.

What HSL formats does it accept?

You can paste hsl(243, 75%, 59%), hsla(243, 75%, 59%, 0.5), or just plain numbers like 243, 75%, 59%. The percent signs are optional, and spaces, commas, and slashes between values all work.

Can it convert HSLA with transparency to HEX?

Yes. When you include an alpha value between 0 and 1, the result also shows an 8-digit hex code where the final pair encodes the alpha channel, such as #5048e580 for 50% opacity.

What is the difference between HSL and HEX?

They describe the same color in different ways. HSL uses a hue angle, a saturation percentage, and a lightness percentage, while HEX packs the red, green, and blue channels into a six-digit hexadecimal code. HSL is often easier to adjust by hand, but HEX is the most common way to write colors in CSS and design files. Modern browsers accept both.