How to Convert HSL to HEX
Converting HSL (Hue, Saturation, Lightness) to a HEX code bridges the gap between how designers think about color and how legacy web systems expect to receive it. While HSL is very intuitive for humans to tweak, HEX remains the most universally supported and compact color format on the web.
The Conversion Process
You can't convert HSL directly into a base-16 HEX string. The color must first be translated back into the RGB (Red, Green, Blue) color model. Once you have the decimal values for the red, green, and blue light channels (ranging from 0 to 255), you convert each of those numbers into a two-digit hexadecimal string and combine them.
From Cylinder to Cube
The math to get from HSL to RGB involves mapping a cylindrical coordinate system back into a cubic one. Here is how the algorithm generally works:
- Check Saturation: If the saturation is
0%, the color is a shade of gray. All three RGB channels will simply equal the lightness value. - Calculate Chroma: If there is saturation, the algorithm calculates the "chroma" (the intensity of the color) based on the saturation and lightness percentages.
- Find the Hue Segment: The 360-degree hue wheel is divided into six 60-degree segments. The algorithm checks which segment the hue falls into to determine the primary and secondary RGB channels.
- Match Lightness: Finally, a baseline value is added to the raw RGB channels to ensure the final color matches the requested lightness.
Once the RGB values are calculated, they are multiplied by 255, rounded to the nearest whole number, and converted to HEX.
Handling Alpha Transparency
If your HSL value includes an alpha channel (e.g., hsl(204deg 70% 53% / 50%)), the resulting HEX code will be 8 characters long instead of 6. The alpha percentage is converted to a 0-255 scale and appended to the end of the HEX string (in this case, 50% becomes 80).
A Tip for Designers
Many designers find it easier to work in HSL but need HEX for their final mockups or legacy systems. Use this converter to freely experiment with hue, saturation, and lightness until you land on the perfect shade, and then instantly grab the HEX code to implement it.