Hex to HSL Converter
Convert HEX color codes to HSL (hue, saturation, lightness). Supports 3- and 6-digit hex. Free and private.
Independently verified for accuracy
Calculator by Toolsloft ↗- HSL
- hsl(220, 60%, 50%)
Convert a HEX color code straight to HSL (hue, saturation, lightness). This is handy when you have a brand hex value but want to build a lighter or darker variant by adjusting lightness. It accepts 3- and 6-digit hex, with or without the hash.
How this is calculated
The hex is parsed to red, green, and blue bytes, then converted with the standard RGB to HSL formula: lightness is the midpoint of the extreme channels, saturation their spread, and hue the angle of the dominant channel.
How to use
- Enter a hex color code, for example #3366cc or #abc.
- The HSL value appears below as you type.
- Copy the hsl() result into your stylesheet.
Examples
- #3366cc:
hsl(220, 60%, 50%) - #abc (shorthand):
hsl(210, 25%, 73%)
FAQ
- Why convert hex to HSL?
- HSL makes it easy to build tints and shades of a brand color. Keep the hue and saturation, change only the lightness, and you get a consistent lighter or darker version.
- Do you support shorthand hex?
- Yes. A 3-digit code like #abc is expanded to #aabbcc before converting, the same rule browsers use.
- Is the hash required?
- No. Both #3366cc and 3366cc work. The leading hash is stripped before parsing.