🎚️ HEX to HSL Converter
Convert HEX to HSL and HSL to HEX instantly. Paste a hex code or set hue, saturation and lightness to get every format — RGB, HSV, CMYK — plus a component breakdown, a lightness scale and contrast. Free, instant & 100% private.
Accepts 3, 6 or 8 digits — with or without #.
🎚️ Hue · Saturation · Lightness
What each part of an HSL color actually means — shown on its own gradient scale.
Position on the color wheel — blue.
Vivid and intense.
Mid-tone.
🌗 Lightness Scale
Same hue and saturation, only the lightness changes — the easiest way to build a tint/shade palette. Tap a swatch to copy.
📊 Color Properties
♿ Readability (WCAG Contrast)
Everything This Converter Gives You
A complete HSL workbench — convert, understand each component, and build palettes in seconds.
Two-Way Conversion
Edit the HEX field or the HSL sliders — both stay perfectly in sync, in either direction.
Live Gradient Sliders
Hue, saturation and lightness each get their own gradient track so you can see exactly what you're changing.
HSL Explained
A breakdown card for each component shows its value, its scale, and what it means in plain language.
Lightness Scale
Instantly generate tints and shades by varying only the lightness — HSL's biggest practical advantage.
More Formats
Get HEX, RGB, HSV and CMYK alongside HSL/HSLA, all one-click copyable.
Contrast & Stats
Hue family, temperature, luminance and WCAG contrast against white and black — all at a glance.
How to Convert HEX and HSL
It works both ways — edit either side and the other updates live.
Paste a HEX code
Drop your hex (3, 6 or 8 digits, # optional) into the HEX field to get HSL instantly.
…or set H, S, L
Type hue, saturation and lightness or drag the gradient sliders to convert the other way.
Build a palette
Use the Lightness Scale to grab ready-made tints and shades of the same color.
Copy any format
Tap HEX, HSL, HSLA, RGB, HSV or CMYK to copy it to your clipboard.
Frequently Asked Questions
HEX to HSL, HSL to HEX, what hue/saturation/lightness mean, the formula, and building tints & shades.
How do I convert HEX to HSL?
Paste your hex code (for example 2563EB) into the HEX field and the HSL value appears instantly — here, hsl(217, 83%, 53%). Behind the scenes the hex is converted to RGB, then to HSL. Click any output to copy it.
How do I convert HSL to HEX?
Enter your hue (0–360), saturation (0–100%) and lightness (0–100%) in the HSL fields, or drag the sliders. The matching hex code updates live above so you can copy it straight into CSS.
What do hue, saturation and lightness mean?
Hue is the color's position on the 360° color wheel (0 is red, 120 is green, 240 is blue). Saturation is how vivid it is, from 0% (gray) to 100% (full color). Lightness runs from 0% (black) through the pure color at 50% to 100% (white).
Why do designers like HSL?
Because it matches how people describe color. To get a darker version you just lower the lightness; to make it calmer you lower the saturation; to find a related color you rotate the hue. That's far more intuitive than guessing new hex digits.
What is the HEX to HSL formula?
Convert the hex to RGB, scale each channel to 0–1, then find the max and min. Lightness is their average. Saturation depends on how far apart they are, and hue is calculated from which channel is largest and by how much. This tool does all of it instantly.
How do I make tints and shades with HSL?
Keep the hue and saturation fixed and only change the lightness — raise it for lighter tints, lower it for darker shades. The built-in Lightness Scale shows a ready-made set you can copy.
Is HSL the same color as HEX?
Yes. HSL and HEX are two notations for the same on-screen color. Converting between them is lossless apart from tiny rounding, so the color you see never actually changes.
Is this converter free and private?
Completely free, no sign-up, and every calculation runs in your browser — nothing is sent to a server. It works on all modern desktop and mobile browsers.