Hex to HSL Converter
Convert a hex code to HSL with hue, saturation, and lightness breakdown.
Loading tool…
About this tool
HSL describes colors the way humans think: pick a hue, then adjust how vivid (saturation) and how bright (lightness) it is. Converting hex to HSL makes it easy to create lighter or darker variants of a brand color by nudging one number.
The tool breaks the result into its three components so you can see exactly what drives the color.
How to use
- Type or paste a hex color.
- Read the hsl() value and the hue/saturation/lightness breakdown.
- Click Copy to use the CSS value.
Frequently asked questions
Hue (0–360°) is the position on the color wheel, saturation (0–100%) is the vividness, and lightness (0–100%) runs from black through the pure color to white.
HSL makes programmatic adjustments intuitive: raising lightness lightens a color, lowering saturation mutes it — without guessing new hex digits.
Hue, saturation, and lightness are rounded to whole numbers, which is precise enough for design work and matches how browsers report computed HSL.
Related tools
Color Palette Generator
Enter a base color to generate complementary, analogous, triadic, and more palettes.
Gradient Generator
Build multi-stop linear gradients with angle control and live preview — CSS ready.