How to convert HEX to HSL
Convert HEX color codes to HSL instantly. Enter a HEX or RGB value, or use the sliders, and every format updates at once, with a live preview, the formula and a table of common colors.
- Type or paste a HEX value, such as #3B82F6, into its field above.
- The HSL value updates immediately: #3B82F6 is hsl(217, 91%, 60%). The other formats and the color preview update too.
- Copy the HSL value into your CSS, design tool or code.
The HEX to HSL formula
Scale the red, green and blue channels to 0-1. Lightness is the average of the largest and smallest channel, saturation grows with the gap between them, and hue is the position of the strongest channel on the 360° color wheel:
#3B82F6 → hsl(217, 91%, 60%)
Common colors in HEX and HSL
| HEX | HSL |
|---|---|
#000000 | hsl(0, 0%, 0%) |
#FFFFFF | hsl(0, 0%, 100%) |
#FF0000 | hsl(0, 100%, 50%) |
#00FF00 | hsl(120, 100%, 50%) |
#0000FF | hsl(240, 100%, 50%) |
#FFFF00 | hsl(60, 100%, 50%) |
#00FFFF | hsl(180, 100%, 50%) |
#FF00FF | hsl(300, 100%, 50%) |
#808080 | hsl(0, 0%, 50%) |
#FFA500 | hsl(39, 100%, 50%) |
#800080 | hsl(300, 100%, 25%) |
#3B82F6 | hsl(217, 91%, 60%) |
HEX and HSL explained
A HEX color is a # followed by six hexadecimal digits: two each for red, green and blue, from 00 (none) to FF (full). It is the most common way to write colors in CSS and design tools.
HSL describes a color by hue (an angle from 0 to 360 on the color wheel), saturation and lightness (both in %). It makes it easy to create lighter, darker or muted shades of the same color.
Frequently asked questions
Does converting change the color?
HEX, RGB and HSL describe the same screen colors, so converting between them is exact (HSL is rounded to whole numbers). CMYK is for print: the printed result depends on the printer's color profile, so treat screen-to-CMYK values as a starting point.
Can I use the result in CSS?
Yes. CSS accepts hex (#3B82F6), rgb(59, 130, 246) and hsl(217, 91%, 60%) directly. CMYK is not a CSS format; it is used in print and design software.
What about transparency?
Add an alpha value: 8-digit hex (#3B82F680) or rgba()/hsla() in CSS. The converter works with the solid color; the alpha value stays the same in every format.
Is this tool free?
Yes, it's free to use. No signup, no email required. Get results on this page.
How do I get my result?
Use the tool on this page. Your result appears here; no email delivery is required.