Convert color from HSL to HEX

HSL to HEX converter

Turn an hsl() color into a HEX code.

Example: hsl(16, 100%, 60.4%)

HEX
See this color in all formats

About HSL to HEX Converter

You adjusted a color in HSL, a little lighter or less saturated, and now need the HEX for a style guide, an email template or a tool that does not understand hsl(). This converts the HSL values to the nearest 8-bit color and writes it as HEX.

About the formats. HSL describes a color as a hue angle on the color wheel (0 to 360 degrees, where 0 is red, 120 green and 240 blue), a saturation percentage and a lightness percentage. It is the same sRGB color as RGB, written in a way that is easier to adjust by eye. A HEX code writes the red, green and blue channels as two hexadecimal digits each, so #ff6b35 is red ff (255), green 6b (107) and blue 35 (53). The leading # is optional here, the short forms #f63 and #f63a work, and the 8-digit form #RRGGBBAA adds transparency.

How exact is it? HSL is only another way of writing sRGB, so no colors are added or lost, but the result is rounded to the nearest of the 256 levels per channel and the angle and percentages are read at full precision. The result is written as six hex digits (eight when the color is partly transparent), which gives one of 256 levels per channel.

For example, hsl(12, 75.8%, 61.2%) in HSL is #e76f51 in HEX. Hue accepts degrees (210), deg, turn, rad and grad, so hsl(0.5turn 100% 50%) works and gives #00ffff. Both the comma form hsl(210, 50%, 40%) and the modern space form hsl(210 50% 40%) are read, with a slash for transparency.

How to convert HSL to HEX

  1. Type or paste an HSL color, such as hsl(12, 75.8%, 61.2%), or choose a color with the picker.
  2. The HEX value, #e76f51 for that example, appears straight away.
  3. Press Copy to put the HEX value on your clipboard.
  4. Use the From and To menus at the top to switch to a different conversion, or open the all-formats page to see every format at once.

Frequently asked questions

How do I convert HSL to HEX?

Type or paste an HSL value such as hsl(12, 75.8%, 61.2%) and the HEX value, #e76f51, appears straight away. Use Copy to put it on your clipboard, or choose a color with the picker.

Why doesn't my hsl() come back the same after a round trip?

HEX holds whole 0 to 255 channels, so HSL values with many decimals are rounded to the nearest color. Converting that HEX back can give slightly different numbers, for example hsl(16, 100%, 60%) returns as hsl(15.9, 100%, 60%). The color is the same to the eye.

What happens to values over 100% or hues over 360?

Saturation and lightness are limited to 0 to 100%. Hue wraps around the wheel, so -30 is the same as 330 and 390 is the same as 30.

Is converting HSL to HEX exact?

HSL is only another way of writing sRGB, so no colors are added or lost, but the result is rounded to the nearest of the 256 levels per channel and the angle and percentages are read at full precision. The result is written as six hex digits (eight when the color is partly transparent), which gives one of 256 levels per channel.

Does HSL to HEX keep transparency?

Yes. Add transparency to the HSL value and it is carried over to the HEX result, which supports it too.

Are my colors sent anywhere?

No. The conversion runs in your browser and nothing is uploaded.