Hex to HSL Converter – Free & Instant Color Tool

Convert any hex color to HSL in one click

Paste or type a hex code above and the tool instantly gives you the matching HSL value – hue, saturation, and lightness – along with a live color swatch and every other common format (RGB, HSV, CMYK) at the same time. No sign-up, no upload, no waiting.

Everything runs right in your browser, so your color values never leave your device. That matters when you're working with brand palettes or client assets.

How to use this hex to HSL converter

1. Type or paste your hex code into the input field above (e.g. #3B82F6). The # prefix is optional.
2. The HSL result appears instantly, along with the live color swatch.
3. Click the copy icon next to the HSL value to grab it straight to your clipboard.
4. Switch to a different output format anytime – RGB, HSV, or CMYK – without re-entering anything.

Worked example: converting #E11D48 to HSL

Let's take the vivid rose-red #E11D48, used heavily in Tailwind CSS's rose palette.

The hue is an angle on the color wheel (0°–360°). Saturation is how vivid the color is – 0% is grey, 100% is pure color. Lightness is how bright it is – 0% is black, 100% is white, 50% is the 'true' shade.

How to convert hex to HSL in code

Need to do this programmatically? Here are clean, copy-pasteable snippets for the two most common languages.

JavaScript

function hexToHsl(hex) {
  // Strip '#' and parse r, g, b
  const r = parseInt(hex.slice(1, 3), 16) / 255;
  const g = parseInt(hex.slice(3, 5), 16) / 255;
  const b = parseInt(hex.slice(5, 7), 16) / 255;

  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s;
  const l = (max + min) / 2;
  const d = max - min;

  if (d === 0) {
    h = s = 0;
  } else {
    s = d / (1 - Math.abs(2 * l - 1));
    switch (max) {
      case r: h = ((g - b) / d + 6) % 6; break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }
  return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
}

console.log(hexToHsl('#E11D48')); // hsl(346, 76%, 49%)

Python

import colorsys

def hex_to_hsl(hex_color):
    hex_color = hex_color.lstrip('#')
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (0, 2, 4))
    # colorsys uses HLS order, not HSL
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return f'hsl({round(h * 360)}, {round(s * 100)}%, {round(l * 100)}%)'

print(hex_to_hsl('#E11D48'))  # hsl(346, 76%, 49%)

Python's built-in colorsys module returns HLS (hue, lightness, saturation) – note the swapped order – so unpack accordingly.

How the conversion actually works

A hex color like #E11D48 is just three pairs of hexadecimal digits: red (E1), green (1D), blue (48). Converting to HSL is a two-step math operation: first scale those RGB values to the 0–1 range, then apply the standard RGB-to-HSL formulas defined by the W3C (CSS Color Level 4 spec) to extract hue, saturation, and lightness.

The tool uses the same algorithm both browsers and design tools rely on, so the result will always match what you see in Figma, VS Code's color picker, or Chrome DevTools.

When HSL is the right color format

HSL is built for humans. Its three values map directly to how we think about color: the shade (hue), how vivid it is (saturation), and how bright it is (lightness). That makes it much easier to adjust a color than tweaking RGB numbers blindly.

Use HSL when you want to:

• Tweak a brand color slightly darker or lighter without resorting to a color picker
• Build color scales in CSS (e.g. bump lightness from 90% down to 20% in even steps)
• Use CSS hsl() and oklch() functions directly in your stylesheet
• Apply color logic in design tokens or Tailwind config

Stick with hex when:

• You're copying a color into a legacy system or design file that only accepts hex strings
• You need the shortest possible color representation in markup
• The color won't be modified programmatically

Privacy note

This tool runs entirely in your browser. No color data is sent to any server, stored, or logged. You can even use it offline once the page has loaded.

If you work with data formats alongside color work, you might also find our JSON Beautifier – Format, Validate & Minify JSON Online or JSON Validator – Check & Fix JSON Errors Online handy for design-token and config files.

Paste your hex code above and get your HSL value right now – no install, no account needed.