How to use the hex to hsl converter
- Type or paste a hex color code into the input field. The leading
#is optional, and 4 or 8 digit codes with alpha work too. - The tool immediately converts the hex code to hsl and displays the results below.
- Copy the
hsl()string directly into your CSS stylesheet. - Review the individual hue, saturation and lightness rows for precise adjustments.
How hex to hsl conversion works
A hex color code stores red, green and blue channels as two hexadecimal digits each. To perform a hex to hsl conversion, those values are first normalised to a 0 to 1 range. For example, #3498db becomes R = 0.204, G = 0.596, B = 0.859.
Lightness is the average of the largest and smallest channel values: L = (max + min) / 2. Saturation depends on lightness. When L is between 0 and 1, S = (max - min) / (1 - |2L - 1|). Hue is calculated from which channel is dominant. If blue is the maximum, H = 60 x ((R - G) / (max - min) + 4). For our example this gives roughly 204 degrees, 70% saturation and 53% lightness.
Each result also shows the unrounded hue, saturation and lightness to one decimal place, so you can see how the integer hsl() string was rounded.
Common hex colors in HSL
This reference table shows standard web colors converted from hex to HSL. Use it to quickly find the HSL equivalent of frequently used hex codes.
| Color name | Hex code | HSL value |
|---|---|---|
| Red | #ff0000 | hsl(0, 100%, 50%) |
| Green (CSS) | #008000 | hsl(120, 100%, 25%) |
| Lime | #00ff00 | hsl(120, 100%, 50%) |
| Blue | #0000ff | hsl(240, 100%, 50%) |
| Yellow | #ffff00 | hsl(60, 100%, 50%) |
| Cyan | #00ffff | hsl(180, 100%, 50%) |
| Magenta | #ff00ff | hsl(300, 100%, 50%) |
| White | #ffffff | hsl(0, 0%, 100%) |
| Black | #000000 | hsl(0, 0%, 0%) |
| Grey (mid) | #808080 | hsl(0, 0%, 50%) |
Why use HSL instead of hex
Hex codes are compact but not intuitive when you need to adjust a color. HSL separates the three perceptual dimensions of color. Hue selects the base color on a 360 degree wheel, saturation controls intensity from grey to vivid, and lightness moves from black through the pure color to white.
This makes building design systems much easier. You can keep the same hue and saturation while generating a full scale of lightness values for backgrounds, borders and text. If you also need print-ready values, pair this tool with a hex to cmyk converter. For matching branded swatches, try the hex to pantone page.
Handling greys and achromatic colors
When red, green and blue are all equal, the color is a shade of grey. Mathematically the hue formula divides by zero because the difference between the maximum and minimum channels is zero. By convention, achromatic colors are assigned a hue of 0 degrees and a saturation of 0%. This hex to hsl converter follows that rule, so inputs like #888888 or #ccc correctly produce hsl(0, 0%, ...).
Shorthand hex codes
CSS allows three-character shorthand hex codes where each digit is doubled. For instance, #f0a expands to #ff00aa. This converter accepts both formats automatically. Simply type the short code with or without the hash symbol and the tool will expand it before converting the hex color to hsl.
Four and eight digit codes add an alpha channel, for example #3498db80. The last pair is the opacity, with 80 hex equal to 128 out of 255 or 50.2%. The result is written as hsl(204 70% 53% / 50.2%), and an Alpha row shows the percentage. Codes without alpha digits are fully opaque and print the classic comma-separated hsl() string.
Worked examples
| Example | Input | Result |
|---|---|---|
| Bright blue | Hex color code: #3498db | HSL: hsl(204, 70%, 53%); Hue: 204.1°; Saturation: 69.9%; Lightness: 53.1%; RGB: rgb(52, 152, 219); Alpha: 100% |
| Pure red | Hex color code: ff0000 | HSL: hsl(0, 100%, 50%); Hue: 0.0°; Saturation: 100.0%; Lightness: 50.0%; RGB: rgb(255, 0, 0); Alpha: 100% |
| Short grey | Hex color code: #888 | HSL: hsl(0, 0%, 53%); Hue: 0.0°; Saturation: 0.0%; Lightness: 53.3%; RGB: rgb(136, 136, 136); Alpha: 100% |
| White | Hex color code: #ffffff | HSL: hsl(0, 0%, 100%); Hue: 0.0°; Saturation: 0.0%; Lightness: 100.0%; RGB: rgb(255, 255, 255); Alpha: 100% |
| With alpha | Hex color code: #3498db80 | HSL: hsl(204 70% 53% / 50.2%); Hue: 204.1°; Saturation: 69.9%; Lightness: 53.1%; RGB: rgb(52, 152, 219); Alpha: 50.2% |
FAQ
What is the HSL value of pure red (#ff0000)?
Pure red converts to hsl(0, 100%, 50%). The hue is 0 degrees, saturation is at its maximum and lightness is exactly half.
Can I omit the # symbol when entering a hex code?
Yes. The converter trims whitespace and ignores a missing hash symbol. Both ff0000 and #ff0000 produce the same result.
Does this support three-character shorthand hex codes?
It does. A code like #abc is expanded to #aabbcc before the hex to hsl calculation takes place.
Why is the hue 0 for grey colors?
Grey colors have equal red, green and blue channels, meaning there is no dominant wavelength. The hue is set to 0 by convention and saturation drops to 0%.
Is the hsl() output ready for CSS?
Yes. The main result row provides a valid CSS hsl() function string with rounded integer values that you can paste directly into a stylesheet.
How do I convert back from HSL to hex?
Use the dedicated hsl to hex converter to reverse the process.
Does this converter accept hex codes with alpha?
Yes. A 4 or 8 digit hex code such as #3498db80 is accepted. The hsl() output uses the modern slash syntax, for example hsl(204 70% 53% / 50.2%), and the Alpha row shows the opacity as a percentage.