Hsl To Hex

Last Update:

  1. Hsl To Hex
  2. HSL Color Representation:
  3. HEX Color Representation:
  4. Converting HSL to HEX:
  5. Convert Hue to RGB:
  6. Convert Saturation and Lightness to RGB:
  7. Convert RGB to HEX:
  8. Color Conversion Table

Hsl To Hex

Converting colors between different representations is a common task in web development and graphic design. HSL (Hue, Saturation, Lightness) and HEX (Hexadecimal) are two widely used color representations. Let me explain how to convert from HSL to HEX.

HSL Color Representation:

HSL stands for Hue, Saturation, and Lightness. It is a cylindrical representation of colors in a way that's more intuitive for human perception compared to RGB (Red, Green, Blue). Here's a brief explanation of each component:

Hue (H): This represents the color itself. It's measured in degrees on a color wheel, ranging from 0° (red) to 360° (red again). Other hues are distributed around the wheel accordingly.

Saturation (S): This represents the intensity or purity of the color. A saturation value of 0% results in a grayscale color, while higher values result in more vibrant and intense colors.

Lightness (L): This represents the brightness of the color. A lightness value of 0% results in black, 100% results in white, and values in between result in varying levels of brightness.

HEX Color Representation:

HEX is a hexadecimal representation of colors commonly used in web development. It consists of a hash (#) followed by six characters, where each pair of characters represents the intensity of red, green, and blue components of the color. For example, "#FF0000" represents pure red, "#00FF00" represents pure green, and "#0000FF" represents pure blue.

Converting HSL to HEX:

To convert an HSL color to HEX, you need to:

  1. Convert the hue angle to its RGB equivalent.
  2. Convert the saturation and lightness to RGB values.
  3. Convert the RGB values to hexadecimal notation.

Here's a simplified formula to perform the conversion:

Convert Hue to RGB:

    • Let's assume H' is the normalized hue (scaled between 0 and 1).
    • Red = HueToRGB(H' + 1/3)
    • Green = HueToRGB(H')
    • Blue = HueToRGB(H' - 1/3)

Convert Saturation and Lightness to RGB:

  • For simplicity, let L' be the lightness normalized between 0 and 1.
  • If saturation = 0, then R, G, and B will all be L' (a shade of gray).
  • Otherwise, calculate the adjusted saturation:
  1.  If L' <= 0.5, adjustedSaturation = saturation * (L' + 0.5)
  2.  If L' > 0.5, adjustedSaturation = saturation * (1 - L')
  • Then, R, G, and B are calculated using adjustedSaturation and L'.

Convert RGB to HEX:

    • Convert the red, green, and blue values to their two-digit hexadecimal equivalents.

As this involves some mathematical calculations, it's often easier to use libraries or built-in functions available in programming languages to perform these conversions. Many programming languages and color libraries provide functions for converting between different color representations

Color Conversion Table


Color Name SL (H, S, L) RGB (R, G, B) HEX Color Code Color Preview
Red (0°, 100%, 50%) (255, 0, 0) #FF0000  
Green (120°, 100%, 50%) (0, 255, 0) #00FF00  
Blue (240°, 100%, 50%) (0, 0, 255) #0000FF  
Yellow (60°, 100%, 50%) (255, 255, 0) #FFFF00  
Cyan (180°, 100%, 50%) (0, 255, 255) #00FFFF  
Magenta (300°, 100%, 50%) (255, 0, 255) #FF00FF  
Black (0°, 0%, 0%) (0, 0, 0) #000000  
White (0°, 0%, 100%) (255, 255, 255) #FFFFFF  



#hsl to Hex converter #hsl rgb hex color codes #color converter

We use cookies to enhance your experience on our website. The types of cookies used: Essential Cookies and Marketing Cookies. To read our cookie policy, click here.