HEX to HSL

What is a HEX colour?

A hex colour is a six-digit base-16 number that encodes the red, green and blue intensities of an sRGB colour. The first pair is red, the middle pair green, the last pair blue — each from 00 (none) to FF (255, full). So #FF0000 is pure red, #00FF00 pure green, #0000FF pure blue. Hex is the dominant way to write colours in HTML, CSS and design files because it’s compact and unambiguous, but it’s not very human-friendly: it’s hard to look at #3F8AC4 and predict what hue it actually is.

What is HSL?

HSL stands for Hue, Saturation, Lightness, and it’s a coordinate system designed to be readable by humans rather than packed for machines. Hue is an angle on the colour wheel from 0° to 360°: 0° is red, 120° green, 240° blue. Saturation is how colourful the result is, from 0% (a pure grey) to 100% (as vivid as the hue allows). Lightness is how light or dark, from 0% (black) through 50% (the most saturated version of the hue) to 100% (white). Once you internalise the wheel, hsl(210, 80%, 45%) is immediately recognisable as a punchy mid-blue — no decoder ring required.

The conversion math

The conversion goes via normalised RGB. First parse the hex into three channels and divide each by 255, giving values in the 0–1 range. Find the max and min of the three. Lightness is the midpoint: L = (max + min) / 2. If max equals min, the colour is achromatic (a grey) and saturation is 0. Otherwise saturation depends on lightness: S = (max - min) / (1 - |2L - 1|). Hue is computed from which channel held the max — red, green or blue — and the difference between the other two, then mapped onto the 0–360° wheel. The result is rounded for display (hue to whole degrees, S and L to whole percents).

Use cases

CSS authoring and theming. HSL is the format designers reach for when programmatically generating tints and shades — keep the hue constant and step the lightness from 95% down to 10% and you have a ten-shade scale of one colour, no painter’s eye required.

Design systems. Token systems often store base colours in HSL so they can derive variants by adjusting one channel at a time. A hover state becomes lightness − 10%; a disabled state becomes saturation × 0.3.

Accessibility. Bumping lightness while keeping hue constant is the simplest way to lift contrast without changing the colour’s identity. HSL makes that single-axis tweak trivial.

JavaScript colour manipulation. Libraries like chroma.js, color and tinycolor all accept HSL input and make derivative-colour code read almost like English.

Pitfalls

• HSL is not HSV. Photoshop’s colour picker, many design tools and some legacy APIs use HSV instead. The numbers look similar but mean different things — paste HSL into an HSV field and you’ll get the wrong colour. CSS only accepts HSL.
• The % symbol is required. hsl(210, 80, 45) is invalid CSS even though every human knows what you meant. Always include the percent signs on saturation and lightness.
• Gamma is not handled here. HSL operates on the gamma-encoded sRGB channels, which means the “lightness” axis doesn’t match perceptual lightness. For perceptually-uniform lightness you want OKLCH or HSLuv — outside the scope of this landing.
• Alpha not preserved. Eight-digit hex inputs lose alpha; use the HEX to RGBA landing or the Color Converter for alpha-aware workflows.

How to use this HEX to HSL converter

1. Paste your hex into the input. It can be 3 or 6 digits, with or without a leading #, in any case.
2. The hsl(h, s%, l%) output and the colour swatch update live — no Convert button.
3. If your input isn’t valid hex (wrong length, non-hex characters), a friendly inline message points at the problem.
4. Tap Copy to put the HSL string on your clipboard.

Privacy

The conversion is a small JavaScript function in your browser tab. No server call, no logging, no analytics on your colour values. The page caches its bundle on first load and works fully offline after that.

Compatibility notes

hsl() notation is supported in every browser since IE9 (2011), so it’s safe to use anywhere. The output uses comma-separated form (hsl(210, 80%, 45%)) because that’s still the most widely compatible and what CSS linters accept by default. The modern slash-separated syntax (hsl(210 80% 45% / 1)) is available in the Color Converter when you need it for alpha-aware modern CSS.