Hex to HSL Converter

How to Convert Hex to HSL Online

Step-by-Step: Using the Hex to HSL Converter

• Paste your hex code (for example, #3b82f6 or #ABC) into the Hex Color input field.
• The converter parses your hexadecimal color and outputs the exact HSL value in HSL Output, such as hsl(217, 91%, 60%) — no button click required, the result updates as you type.
• The result specifies hue (H): 0–360°, saturation (S): 0–100%, and lightness (L): 0–100%.
• Copy the resulting hsl() string directly into a CSS stylesheet, a design tool, or a JavaScript color utility.

Valid Hex Code Formats

• #RRGGBB: 6-digit hexadecimal (like #000080). Each pair ranges from 00 to ff.
• #RGB: Shorthand hexadecimal (like #ABC), which expands to #AABBCC.
• Uppercase and lowercase letters are both accepted.
• Input must be a legal hex color — no unexpected characters or wrong length.

Understanding HSL Output

• Hue (H): The color's angle on the color wheel, from 0° to 360°, where 0° is red, 120° is green, and 240° is blue.
• Saturation (S): How vivid the color is, from 0% (gray) to 100% (fully saturated).
• Lightness (L): How bright or dark the color is, from 0% (black) through 50% (the pure hue) to 100% (white).
• The hsl format in CSS is written as hsl(210, 100%, 56%) — hue in degrees, saturation and lightness as percentages.

How the Hex to HSL Converter Works Under the Hood

Conversion Formula Explained

Converting hex to HSL means translating the hexadecimal RGB channels into hue, saturation, and lightness using the standard formulas: Need a hex equivalent of an RGB color? The rgb to hex converter generates the six-digit code automatically.

// Example formula (using floating point math):
1. Parse the hex string to extract red, green, and blue channels (R, G, B)
   - Each is a value between 0 and 255
2. Normalize R, G, and B to a 0-1 range:
   - r = R / 255, g = G / 255, b = B / 255
3. Find max and min among r, g, b
4. Calculate Lightness (L):
   $$L = \frac{max + min}{2}$$
5. Calculate Saturation (S):
   - If max == min: $$S = 0$$
   - Else:
     $$S = \frac{\text{delta}}{1- |2L-1|}$$
     (where delta = max - min)
6. Calculate Hue (H):
   - If max==min: $$H = 0$$
   - If max==r: $$H = 60 \times \frac{g-b}{\text{delta}} + (g < b ? 360 : 0)$$
   - If max==g: $$H = 60 \times \frac{b-r}{\text{delta}} + 120$$
   - If max==b: $$H = 60 \times \frac{r-g}{\text{delta}} + 240$$

Output structure: hsl(H, S%, L%) with H in [0–360], S and L in [0–100%].

Code Example: Convert Hex to HSL in JavaScript

function hexToHSL(hexInput) {
  // Remove # symbol if present
  hexInput = hexInput.replace(/^#/, '');
  if(hexInput.length === 3) {
    hexInput = hexInput[0]+hexInput[0]+hexInput[1]+hexInput[1]+hexInput[2]+hexInput[2]; // #ABC → #AABBCC
  }
  let r = parseInt(hexInput.slice(0,2), 16) / 255;
  let g = parseInt(hexInput.slice(2,4), 16) / 255;
  let b = parseInt(hexInput.slice(4,6), 16) / 255;
  let max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  if(max === min){ h = s = 0; }
  else {
    let d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    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 *= 60;
  }
  return `hsl(${Math.round(h)}, ${Math.round(s*100)}%, ${Math.round(l*100)}%)`;
}

This is the same logic the tool on this page runs client-side in your browser — nothing is sent to a server.

Handling Invalid Inputs

• An invalid input — a hex code of the wrong length, unexpected characters, or a missing # — will trigger an error.
• The converter only processes valid 6-digit hex or 3-digit shorthand hex codes.
• A "not a legal hex color" message is returned if unexpected characters are found.
• For predictable results, make sure the value you paste in is a properly formatted hex color.

Practical Tips for Hex to HSL Conversion

Choosing the Right Format for Web Design

• For CSS stylesheets and iterative design work, HSL's intuitive hue/saturation/lightness sliders make it easy to tweak a color without guessing at hex digits.
• Hex codes remain the standard for exact color matching against a brand guide, a design file, or existing legacy CSS.
• If you're building a design system with several lightness steps of the same hue (e.g., a button's default, hover, and active states), HSL makes generating that scale straightforward.

Avoiding Common Mistakes

• Don't use unexpected characters in a hex code — only 0-9 and a-f are valid.
• Check length: hex codes must be 3 or 6 characters long after the # (e.g., #FFF, #AABBCC).
• Always consider contrast and legibility — a low-saturation, mid-lightness HSL color can look fine in isolation but fail accessibility checks against certain backgrounds.
• Use a converter rather than eyeballing the conversion by hand — the hue calculation in particular is easy to get wrong manually.

When to Use HSL over Hex

• If you want intuitive adjustments — directly nudging hue, saturation, or lightness — HSL is the better starting point.
• Choose HSL when you need predictable brightness steps for hover, active, or disabled states in a UI.
• Stick with hex for compatibility with older browsers, image formats, and any tooling that expects a hex string specifically.
• Use this Hex to HSL Converter to move between the two whenever your workflow needs one format but your source material is in the other.