Convert hex color codes to HSL — hue on the 360° wheel, saturation and lightness as percentages. HSL makes a color editable: shift the hue, mute the saturation or lighten it numerically. The tool shows how hue, saturation and lightness are derived from your exact channels.
Settings
Generated locally in your browser — your settings and results never leave this page.
Why designers translate hex into HSL
A hex code tells a machine everything and a human nothing. #8a2be2 gives no hint that it is a violet, how vivid, or how dark — but its HSL reading, hsl(271.1, 75.9%, 52.7%), says all three: hue angle 271.1° (violet territory), 75.9% saturated (vivid), 52.7% light (mid-dark). HSL is the notation for reasoning about and editing color; hex is the notation for storing it.
Worked example: #8a2be2
The algorithm reads the channel extremes. For blueviolet — rgb(138, 43, 226):
max = 226 (blue side) min = 43 Lightness = (max + min) / 2 / 255 = 52.7% Saturation = (max − min) / (1 − |2L − 1|) = 75.9% Hue = blue leads, red trails close = 271.1°
Only the largest and smallest channels set lightness and saturation; the middle channel’s job is positioning the hue between the two neighbors. The tool prints this same derivation for your own color, with your numbers.
What to do with HSL once you have it
Systematic variants: hold H, drop L for a hover shade; hold H and L, drop S for a muted sibling; rotate H ±30° for analogous companions. Whole design systems are maintained this way. Two cautions: HSL lightness is arithmetic, not perceptual — equal L does not mean equal-looking lightness across hues — and saturation percentages are relative, not absolute vividness. When those distinctions matter, the OKLCH tools on this site are the upgrade.
Precision
The conversion itself is exact; only the displayed rounding (one decimal) is approximate, and re-converting the rounded value lands within a single 8-bit step of the original. The site’s tests round-trip the entire RGB grid through HSL to guarantee it.
How to use the HEX to HSL Converter
- Pick the color with the native picker, or type its hex code into the twin field.
- The result updates live as you type – no convert button needed.
- Read the derivation: channel max/min, then lightness, saturation and hue from your exact values.
- Copy the value with the copy button, or switch the output format dropdown for other export shapes.
- Share the exact result: the page URL updates with your input, so the link reproduces it.
Frequently asked questions
How is HSL calculated from a hex color?
Convert hex to RGB first, then: lightness = (max+min)/2 of the channels; saturation = the max-min spread scaled by lightness; hue = which channel leads and by how much, mapped to 0-360°. For #1e90ff that gives hsl(209.6, 100%, 55.9%), and the tool shows each step.
What do hue, saturation and lightness mean?
Hue is the angle on the color wheel (0° red, 120° green, 240° blue). Saturation is color intensity – 0% gray, 100% fully colored. Lightness runs black (0%) through the pure color (50%) to white (100%). Together they describe color the way people adjust it.
Why convert HEX to HSL at all?
Editability. Hex is opaque to humans; HSL exposes the knobs. Want a darker variant? Drop lightness. A muted version? Drop saturation. Same hue family? Keep H, vary the rest. That is why design systems often store colors as HSL.
Is HEX to HSL conversion exactly reversible?
Round-tripping returns the identical color – this tool and its HSL to HEX partner verify that in tests. The one caveat is rounding: HSL values shown to one decimal can be off by a fraction that disappears when converted back to 8-bit RGB.
Why does gray have a hue of 0 in the output?
When saturation is 0 there is no meaningful hue – grays sit on the wheel axis. The 0° shown is a convention, not "red-ish": any hue with zero saturation renders the same gray.
Is HSL perceptually uniform?
No – and that is its known weakness. hsl(60, 100%, 50%) yellow looks far lighter than hsl(240, 100%, 50%) blue despite equal L numbers. When you need honest lightness, use OKLCH; the HEX to OKLCH converter on this site does that.
What is the difference between HSL and HWB?
HWB describes the same colors as hue plus whiteness plus blackness – closer to how painters mix. The complete Color Converter shows hwb() alongside HSL so you can compare both notations for any color.
