HEX to HSL Color Converter
Instantly convert Hexadecimal (HEX) to Hue, Saturation, Lightness (HSL) color codes. Enter any HEX value and get the HSL equivalent in real time — no signup required.
Color Preview
#6366F1
All formats
rgb(99, 102, 241)
hsl(239, 84%, 67%)
cmyk(59%, 58%, 0%, 5%)
HEX vs HSL — What's the Difference?
HEX
Hexadecimal
A 6-digit hex code (#RRGGBB) representing red, green, and blue channels in base-16. The most widely used color format in web development and CSS.
Example: color: #6366f1
HSL
Hue, Saturation, Lightness
Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). Designed to be intuitive for humans — great for adjusting color tones in CSS.
Example: color: hsl(239, 84%, 67%)
How to Convert HEX to HSL
All conversion math runs in your browser using the sRGB color space. No data is sent to a server.
Common Colors — HEX to HSL Reference Table
| Color | HEX | HSL |
|---|---|---|
| Red | #FF0000 | hsl(0, 100%, 50%) |
| Green | #008000 | hsl(120, 100%, 25%) |
| Blue | #0000FF | hsl(240, 100%, 50%) |
| White | #FFFFFF | hsl(0, 0%, 100%) |
| Black | #000000 | hsl(0, 0%, 0%) |
| Orange | #FFA500 | hsl(39, 100%, 50%) |
| Purple | #800080 | hsl(300, 100%, 25%) |
| Yellow | #FFFF00 | hsl(60, 100%, 50%) |
| Cyan | #00FFFF | hsl(180, 100%, 50%) |
| Magenta | #FF00FF | hsl(300, 100%, 50%) |
| Gray | #808080 | hsl(0, 0%, 50%) |
| Pink | #FFC0CB | hsl(350, 100%, 88%) |
Related Color Converters
Frequently Asked Questions
How do I convert HEX to HSL?
To convert HEX to HSL: Step 1: HEX → RGB (parse each byte). Step 2: RGB → HSL (normalize, find max/min, compute H/S/L). Use the converter above to do this instantly for any color value.
What is the HEX color format?
Hexadecimal (HEX) — A 6-digit hex code (#RRGGBB) representing red, green, and blue channels in base-16. The most widely used color format in web development and CSS.
What is the HSL color format?
Hue, Saturation, Lightness (HSL) — Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). Designed to be intuitive for humans — great for adjusting color tones in CSS.
Is this HEX to HSL converter free?
Yes. It is completely free, works in your browser with no signup or upload. All color math runs locally.
Can I convert HSL back to HEX?
Yes — use the swap button in the converter above, or visit the HSL to HEX converter page directly.