About This Tool
HEX to HSL uses the same HEX parsing rules as HEX to RGB, then calculates hue, saturation, and lightness. HSL is useful for understanding color relationships and adjusting lighter or darker shades of a hue.
How to Use
- Enter a 3- or 6-digit HEX color, with or without #.
- View the HSL output and individual H, S, and L values.
- Check the color preview, then copy HSL.
- Click Clear to remove the input or load an example.
Examples
- #ff0000 → hsl(0, 100%, 50%).
- #00ff00 → hsl(120, 100%, 50%); #0000ff → hsl(240, 100%, 50%).
- #808080 → hsl(0, 0%, 50.2%); #ffffff → hsl(0, 0%, 100%).
How the Calculation Works
Divide RGB channels by 255, then find the maximum max, minimum min, and difference delta. Lightness L = (max + min) / 2. For chromatic colors, S = delta / (1 − |2L − 1|); hue follows the largest channel's position on the color wheel. For gray, H and S are defined as 0. Decimal values are rounded only for display.
Common Uses
- Understand the hue and lightness of design colors.
- Convert HEX constants to HSL for easier color adjustments.
- Check HSL values for pure colors, gray, black, and white.
Privacy
All input processing, calculations, CSS generation, and previews run in your browser. Your content is never uploaded. No backend, database, online API, or third-party CDN is used, and your input is not saved automatically.
FAQ
What are the three HSL components?
H is the hue angle, S is saturation as a percentage, and L is lightness as a percentage.
Why is hue measured in degrees?
Hue is represented on a color wheel. One full turn is 360°, so 0° and 360° point to the same position.
Why does gray have a hue of 0?
When all three RGB channels are equal, there is no distinct hue. The tool uses H = 0 and S = 0% by convention.
Can rounding affect the conversion?
Calculations use floating-point numbers internally. The output is rounded to a practical number of decimal places, which can cause slight differences when converting back.