Hex to HSL Converter — Convert to Hue, Saturation, Lightness
Quick Answer: HSL represents colors as Hue (0-360 degree color wheel), Saturation (0-100% intensity), and Lightness (0-100% dark to light). Enter a hex code to convert. HSL is more intuitive than hex for creating color palettes and adjusting colors.
rgb(109, 40, 217)
hsl(263, 70%, 50%)
CSS Values
color: #6d28d9;
color: rgb(109, 40, 217);
color: hsl(263, 70%, 50%);
FAQ
Why is HSL better than hex for theming?
HSL separates color (hue) from intensity (saturation) and brightness (lightness). You can create lighter/darker shades by adjusting L, muted versions by reducing S, without changing the base color.
What does each HSL value control?
H (Hue): 0-360 degrees on the color wheel (0=red, 120=green, 240=blue). S (Saturation): 0%=gray, 100%=vivid. L (Lightness): 0%=black, 50%=pure color, 100%=white.