HEX to HSL Converter
Enter a HEX color to get its hue, saturation, and lightness instantly. Copy the CSS-ready HSL value or switch direction to convert HSL back to HEX.
Supported examples: #36C, 3366CC, or #3366CC.
Enter a HEX color to see its HSL value
The preview and CSS-ready result update instantly.
More tools
Picker
Color Picker
Upload an image and click to extract HEX, RGB, and HSL color codes.
Converter
Color Converter
Convert colors between HEX, RGB, and HSL instantly.
Checker
Contrast Checker
Check color contrast ratios against WCAG AA and AAA standards.
Generator
Colour Wheel
Create five-colour complementary, analogous, triadic and other harmony palettes from one base colour.
Extractor
Image Palette Extractor
Find the dominant colors in any image and copy the palette as HEX, RGB, or CSS variables.
How to Convert HEX to HSL
Enter a three- or six-digit HEX color, with or without the # symbol. The converter reads the red, green, and blue channels encoded in the HEX value, converts them to hue, saturation, and lightness, and returns a CSS-ready hsl() value.
- Paste a HEX value such as #3366CC into the input.
- Check the live preview to confirm the color.
- Copy the complete HSL value or read the individual hue, saturation, and lightness values.
HEX to HSL Example
For example, #3366CC converts to hsl(220, 60%, 50%). Hue 220° identifies the blue family, 60% saturation controls its intensity, and 50% lightness places it midway between black and white.
The tool rounds HSL components to whole numbers, which keeps the result concise and ready for common CSS workflows. Because of rounding, converting some HSL results back to HEX can differ by a small RGB step from the original color.
HEX vs HSL
HEX stores the same red, green, and blue information as RGB in a compact hexadecimal form. It is convenient for copying exact colors into stylesheets, design tokens, and graphics tools.
HSL separates a color into hue, saturation, and lightness. That makes HSL easier to adjust by hand when you want to create a lighter shade, reduce saturation, or shift a color around the color wheel while preserving the other properties.
Using HSL Colors in CSS
Modern browsers support HSL directly in CSS. You can paste the converted value into properties such as color: hsl(220, 60%, 50%);, background-color, border-color, or a custom property used by your design system.
Need RGB output or a different conversion direction? Use the general Color Converter for HEX, RGB, and HSL in one place.
Frequently Asked Questions
- How do I convert HEX to HSL?
- Enter a three- or six-digit HEX color in the input. The matching CSS-ready HSL value, its individual components, and a live preview appear instantly.
- Can I convert HSL back to HEX?
- Yes. Select HSL to HEX, then enter hue from 0 to 360 and saturation and lightness from 0 to 100. The converter returns an uppercase six-digit HEX value.
- Does the converter support shorthand HEX colors?
- Yes. Three-digit values such as #36C are expanded and converted along with standard six-digit values such as #3366CC. The # symbol is optional.
- Can I use the HSL result directly in CSS?
- Yes. The result uses the hsl(h, s%, l%) format supported by modern browsers and can be copied directly into a CSS color property.
- Why can converting back produce a slightly different HEX value?
- The displayed HSL components are rounded to whole numbers for readability. That rounding can change an RGB channel by a small amount when the value is converted back to HEX.
- Are my colors uploaded or stored?
- No. The conversion runs entirely in your browser. No color values are uploaded, stored, and no signup is required.