HEX to HSL Converter
What is HEX to HSL Converter
This tool converts HEX color codes (like #3B82F6) to HSL values (like hsl(217, 91%, 60%)). HSL stands for Hue, Saturation, and Lightness — a more intuitive color model for designers. Adjusting lightness in HSL is far easier than in HEX or RGB, making it ideal for creating color palettes and CSS custom properties.
How to use
- Type or paste a HEX color code into the HEX field (with or without #).
- HSL and RGB values appear instantly in the fields below.
- Click the copy button next to HSL to copy hsl(h, s%, l%) format.
- Switch between all 6 color converters using the mode links at the top.
When to use it
Building a color system from a brand color? Paste the brand HEX (#E63946) and get hsl(356, 75%, 56%) back. From there you can spin up lighter tints by raising the lightness and darker shades by lowering it, all while keeping the exact same hue.
Frequently asked questions
What is HSL and why use it instead of HEX?
HSL (Hue, Saturation, Lightness) describes color in human-intuitive terms. Hue is the color wheel position (0–360°), Saturation is color intensity (0–100%), and Lightness is brightness (0–100%). It's much easier to create color variations in HSL than in HEX.
What is #FF0000 in HSL?
Pure red #FF0000 is hsl(0, 100%, 50%). Hue 0° is red on the color wheel, 100% saturation means fully saturated, 50% lightness is the pure color (neither tinted nor shaded).
Does CSS support HSL colors?
Yes. Modern CSS fully supports `hsl()` and `hsla()` notation. For example: `color: hsl(217, 91%, 60%);` and `background: hsla(217, 91%, 60%, 0.5);`
What is #000000 in HSL?
Black (#000000) is hsl(0, 0%, 0%). Lightness at 0% means pure black regardless of hue or saturation.
Can I share this tool with my inputs pre-filled?
Yes. The URL updates automatically as you type. Copy it from the address bar or use the Share button — anyone who opens the link will see your exact inputs ready to go.
Related tools
HSL to HEX Converter
Convert HSL color values to HEX codes instantly. Free HSL to HEX converter with live preview. Turn hsl() values into HEX codes for CSS and design.
Aspect Ratio Calculator
Calculate aspect ratios, find a missing width or height, and resize images or video while keeping the same proportions. Free and instant.
Base64 Decoder
Decode Base64 strings to plain text instantly in your browser. Supports full Unicode output including emojis. Free online Base64 decoder.