HEX to HSL Converter
Instantly convert Hexadecimal color codes to HSL (Hue, Saturation, Lightness). Paste your code below to get exact CSS values, live previews, and accessibility checks.
Recent Conversions
How to Use HEX to HSL Converter
Turn any HEX colour code into HSL — the hue, saturation and lightness values that are easy to tweak in CSS.
Enter a HEX Code
Type or paste a code like #3366FF, #36F or #3366FF80.
See Every Format
Get HSL, HSLA and RGB values with a live colour preview.
Copy the Value
Click Copy and paste it into your CSS or design app.
Converts
HEX → HSL / HSLA
Accepts
3, 4, 6, 8 digits
History
Recent colours
Works on
Phone & computer
Privacy
Runs in your browser
Price
100% free
HEX to HSL Converter: Quick Reference
The key numbers and facts in one place.
| #FF0000 | hsl(0, 100%, 50%) – red |
|---|---|
| #00FF00 | hsl(120, 100%, 50%) – green |
| #0000FF | hsl(240, 100%, 50%) – blue |
| #FFFFFF | hsl(0, 0%, 100%) – white |
| #000000 | hsl(0, 0%, 0%) – black |
| #808080 | hsl(0, 0%, 50%) – grey |
What Can You Use It For?
Popular ways people use HEX to HSL Converter.
CSS Work
Use HSL to make lighter or darker shades.
Design Systems
Build colour scales from one colour.
Dark Mode
Adjust lightness for dark themes.
Learning
Understand how colours are built.
Tips for the Best Result
- To make a colour lighter, raise only the L value.
- 8-digit HEX codes include transparency (the last two digits).
- Go the other way with the HSL to HEX Converter.
Frequently Asked Questions
Quick answers about HEX to HSL Converter.
Hue (the colour, 0–360), Saturation (how strong, 0–100%) and Lightness (how light, 0–100%).
It's easier to adjust: change one number to make a colour lighter, darker or softer.
Yes. 4 and 8-digit HEX codes give HSLA with an alpha value.
No, it works with or without #.
Yes.
Related Free Tools
Ready to Use HEX to HSL Converter?
Scroll up and get your result in seconds. 100% free, no sign-up needed.
Start Now