HEX to HSL

Convert a HEX color to HSL for CSS, with a live preview.

HEX Input: #00f2feHue: 183°Saturation: 100%Lightness: 50%

HEX Color Code

Presets:

HSL Output

hsl(183, 100%, 50%)

H 183° · S 100% · L 50%

HEX and HSL color, explained

HSL (hue, saturation, lightness) is often easier to reason about than HEX: adjust lightness for shades and tints, or rotate hue for a palette, without recomputing channels by hand. This converter parses your HEX, derives the RGB channels, and converts to HSL — all in your browser.

Go the other way with HSL to HEX, get RGB via HEX to RGB, or use the all-in-one color converter.

Built and maintained by Meet Shah · Last updated 18 July 2026

What this tool is used for

Converting a hex token into a model where lightness can be adjusted directly.
Building a tint and shade scale from a base colour.
Producing HSL for a CSS custom property that a theme will vary.
Understanding a hex colour's hue and saturation without guessing.
Comparing two hex colours by their lightness.

Frequently Asked Questions

What does the conversion actually compute?: Hue from which RGB channel is largest and the relationship between them, lightness as the midpoint of the max and min channels, and saturation from their spread — scaled differently depending on whether lightness is above or below 0.5.
Why is grey's hue meaningless?: Because when all three channels are equal, saturation is zero and the hue angle is undefined. Implementations conventionally report 0, so #808080 reads as hsl(0, 0%, 50%) — the 0 is a placeholder, not red.
Is HSL lightness the same as perceived brightness?: No, and this is HSL's main flaw. Pure yellow and pure blue are both 50% lightness in HSL yet look nothing alike in brightness. OKLCH exists precisely to fix this, which is why palettes built in HSL need manual correction.
Why is HSL still worth converting to?: Because it is easy to reason about for small adjustments — darken by reducing L, mute by reducing S — and it is universally supported. For a hover state or a border tint it remains the practical choice.
Is the conversion lossless?: Mathematically yes within sRGB, but rounding is not. Hex has 8 bits per channel while HSL is normally written with integer degrees and percentages, so a round trip can shift by a unit or two.
Why does the hue value look arbitrary for a grey?: Because at zero saturation hue has no effect, so the conversion returns whatever the arithmetic produced — commonly 0. Two greys can report very different hues and render identically.

Common errors and gotchas

Treating HSL lightness as perceptual, so two colours at the same lightness look very different.
Assuming equal lightness steps produce an even scale, which they do not in HSL.
Losing alpha, which needs the four-part HSL form to carry.
Rounding hue to a whole degree on a low-saturation colour, where it shifts noticeably.
Round-tripping repeatedly through 8-bit hex, accumulating error each time.