Convert color from HEX to HSL

HEX to HSL converter

Get hue, saturation and lightness from a HEX code.

Example: #ff6b35

HSL
See this color in all formats

About HEX to HSL Converter

HSL is the format to reach for when you want to adjust a color rather than just reproduce it. With a brand color in HSL you can make a hover state by dropping the lightness a few points, a muted version by lowering saturation, or a whole scale by stepping lightness while the hue stays put.

About the formats. 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. 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.

How exact is it? HEX holds a whole number from 0 to 255 per channel, so every code maps to exactly one color and nothing has to be rounded on the way in. The HSL values are shown to one decimal place, which is enough to give back exactly the same 8-bit color when you convert them again.

For example, #2a9d8f in HEX is hsl(172.7, 57.8%, 39%) in HSL. Hue is an angle on the color wheel from 0° to 360°, and saturation and lightness are percentages. Greys such as #808080 have 0% saturation and a hue of 0, because a grey has no dominant color for the hue to point at.

How to convert HEX to HSL

  1. Type or paste a HEX color code, such as #2a9d8f, or choose a color with the picker.
  2. The HSL value, hsl(172.7, 57.8%, 39%) for that example, appears straight away.
  3. Press Copy to put the HSL 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 HEX to HSL?

Type or paste a HEX value such as #2a9d8f and the HSL value, hsl(172.7, 57.8%, 39%), appears straight away. Use Copy to put it on your clipboard, or choose a color with the picker.

How do I make a color lighter or darker with HSL?

Convert the HEX to HSL, change only the lightness percentage, then convert back with the HSL to HEX converter. Hue and saturation stay the same, so the color keeps its character.

Why is the hue 0 for greys?

A grey has no dominant color, so its hue is undefined. Tools report 0 by convention. Its saturation is 0%, so the hue has no visible effect anyway.

Is converting HEX to HSL exact?

HEX holds a whole number from 0 to 255 per channel, so every code maps to exactly one color and nothing has to be rounded on the way in. The HSL values are shown to one decimal place, which is enough to give back exactly the same 8-bit color when you convert them again.

Does HEX to HSL keep transparency?

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

Are my colors sent anywhere?

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