A hex code tells you nothing at a glance — is #3498DB a muted blue or a vivid one, and how dark is it? This free hex to hsl converter rewrites it as hsl(204, 70%, 53%): a hue angle you can picture, plus saturation and lightness you can adjust one at a time. Everything runs in your browser, so nothing is uploaded and no signup is needed.
How to use this hex to hsl converter
Three quick steps — paste, read, adjust.
Enter a 6-digit code such as #3498DB, or a 3-digit shorthand, with or without the #.
Hue is the colour’s angle on the wheel, saturation is how vivid it is, and lightness is how light or dark it is.
Keep the hue, then raise lightness for a tint or lower it for a darker hover shade, without touching the other values.
Why this hex to hsl converter is the editing view of a colour
Built to be free, private, and exact — right in your browser.
Red sits near 0°, green near 120° and blue near 240°, so a hue of 204° reads as blue before you ever see a swatch.
Lowering lightness darkens a colour without greying it, which is exactly what editing RGB channels directly tends to get wrong.
Holding hue and saturation while stepping lightness up or down produces a coherent set of tints and shades.
HSL describes the same sRGB colour as the hex code, so nothing about the colour itself changes in the conversion.
HEX to HSL Converter FAQs
Short, direct answers to the questions readers ask most.
Hue is the colour’s angle on a 0–360° wheel, saturation is its vividness from 0% grey to 100% full colour, and lightness runs from 0% black through the pure colour at 50% to 100% white.
It first reads the hex code as RGB, then derives lightness from the midpoint of the highest and lowest channels, saturation from their spread, and hue from which channel leads.
No. HSL pairs hue and saturation with lightness, while HSV (also called HSB) pairs them with brightness, so the third number behaves differently.
Almost always, within a single step per channel. Displayed HSL values are rounded, so a round trip can shift a channel by one.
Yes. Modern CSS accepts hsl() as written, so you can often skip converting back to hex entirely.
Related Tools
More free converters that work the same way — right in your browser.
Free image color picker that picks any colour from a photo online, with no upload and no signup.
Favicon GeneratorFree favicon generator that turns your image or logo into a site icon online, with no upload.
PNG to WebP ConverterConvert PNG images to WebP online, with no upload and no signup.
Image CropperFree image cropper that trims your photo to any size online, with no upload and no signup.
Try the related tools above, or go back to the Convertion homepage for more free converters.
