HEX to HSL Converter

How to Convert HEX to HSL

Converting a hexadecimal color code to HSL (Hue, Saturation, Lightness) requires a two-step process. First, the machine-readable HEX string must be translated into standard RGB (Red, Green, Blue) values. Once you have the RGB channels, you can map them onto the HSL color cylinder, which is designed to be much more intuitive for human beings to read and manipulate.

Understanding Hue, Saturation, and Lightness

While HEX and RGB describe how a screen physically mixes light, HSL describes color the way a painter might think about it:

• Hue (0° - 360°): The base color positioned on a standard color wheel. 0° is red, 120° is green, and 240° is blue.
• Saturation (0% - 100%): The intensity of the color. 0% is completely washed out (a shade of gray), while 100% is the most vibrant version of that hue.
• Lightness (0% - 100%): How dark or light the color is. 0% is pitch black, 100% is pure white, and 50% is the "normal" baseline color.

Why Use HSL Over HEX?

HEX codes are compact and universally supported, but they are notoriously difficult to adjust by hand. If you have a brand blue like #3498db and you want a slightly darker shade for a hover state, guessing the new hex code is a chore.

In HSL, that same blue is hsl(204deg 70% 53%). To make it darker, you simply drop the Lightness percentage. Changing it to hsl(204deg 70% 43%) instantly gives you a perfectly matched, darker shade without altering the core hue or vibrancy.

The Math: From RGB to HSL

Because you can't jump straight from HEX to HSL, you first convert the hex pairs into RGB decimals (0 to 255), and then normalize them to a 0 to 1 scale. From there, you find the maximum and minimum values among the red, green, and blue channels.

The Lightness is simply the average of the highest and lowest RGB values. The Saturation is calculated based on the difference between that maximum and minimum. Finally, the Hue is determined by whichever RGB channel was the strongest, calculating its offset on the 360-degree wheel.

Converting HEX to HSL in JavaScript

If you need to write this conversion into your own application, here is a standard algorithm that handles the math. It assumes a 6-character hex string (e.g., #3498db):

function hexToHsl(hex) {

  // 1. Convert HEX to RGB (0-255)

  let r = parseInt(hex.substring(1, 3), 16) / 255;

  let g = parseInt(hex.substring(3, 5), 16) / 255;

  let b = parseInt(hex.substring(5, 7), 16) / 255;



  // 2. Find min and max values to determine Lightness

  let max = Math.max(r, g, b);

  let min = Math.min(r, g, b);

  let h = 0, s = 0, l = (max + min) / 2;



  if (max !== min) {

    let d = max - min;

    // 3. Calculate Saturation

    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

    

    // 4. Calculate Hue based on the dominant color

    switch (max) {

      case r: h = (g - b) / d + (g < b ? 6 : 0); break;

      case g: h = (b - r) / d + 2; break;

      case b: h = (r - g) / d + 4; break;

    }

    h /= 6;

  }



  // Return formatted values

  return {

    h: Math.round(h * 360),

    s: Math.round(s * 100),

    l: Math.round(l * 100)

  };

}



// Example: hexToHsl("#3498db") 

// Returns: { h: 204, s: 70, l: 53 }

Related Tools

• HSL to HEX Converter
• HEX to RGB Converter
• RGB to HSL Converter