Example
hsl(330, 100%, 71%)
HEX to HSL Converter
Convert HEX color codes to HSL (hue, saturation, lightness) instantly in your browser. Free online HEX to HSL color converter — no uploads.
Enter the values below, then press Calculate (or press Enter). The calculator updates your results instantly. Try different values to see how your inputs change the outcome.
- HEX color code — enter a text value. A typical HEX color code would be e.g. #ff69b4 or ff69b4.
- Review your results — the key output is highlighted, with supporting figures below.
Loading calculator…
Results
HSL value
| Detail | Value |
|---|---|
| Hue (°) | |
| Saturation (%) | |
| Lightness (%) | |
| CSS color |
What is this calculator for?
Convert a HEX color into its hue, saturation, and lightness components, ready for CSS.
How to Use This Calculator
Enter the values below, then press Calculate (or press Enter). The calculator updates your results instantly. Try different values to see how your inputs change the outcome.
- HEX color code — enter a text value. A typical HEX color code would be e.g. #ff69b4 or ff69b4.
- Review your results — the key output is highlighted, with supporting figures below.
What You'll Need
- HEX color code
- a text value · required
About This Calculator
HSL expresses color as hue (0–360° on the wheel), saturation (0–100% vividness), and lightness (0–100%, 50% = pure color).
This converter derives those three values from a hex code, producing the CSS hsl() string directly. Many designers find HSL easier to reason about than RGB — lighten a color by raising L, or mute it by lowering S.
Conversion runs instantly in your browser.
Worked Examples
Frequently Asked Questions
Why use HSL instead of RGB?
HSL separates color (hue) from intensity (saturation/lightness), making shade tweaks natural — e.g. hold hue constant and adjust lightness for a correct darker variant.
Does hue ever go negative?
When calculated, hue is normalized to 0–360°, so the result is always a positive degree value.