HSL to HEX converter

How to convert HSL to HEX

To convert HSL to HEX, enter your HSL color in the box above and read the HEX value next to it. For example, hsl(262, 83%, 58%) is #7C3BED. The result updates as you type, and every other format (HEX, RGB, HSL, CMYK and more) is shown at the same time.

What HSL and HEX mean

HSL describes a color as hue (0 to 360 degrees around the color wheel), saturation (0 to 100 percent) and lightness (0 to 100 percent). It is easier to reason about than RGB: keep the hue and change the lightness to get lighter or darker shades of the same color.

A HEX color is a six-digit hexadecimal code with a # in front: two digits each for red, green and blue, from 00 to FF. In #3B82F6, red is 3B, green is 82 and blue is F6. A three-digit shorthand such as #38F repeats each digit, and eight digits add opacity at the end.

Convert HSL to HEX by hand

Here is the calculation for hsl(262, 83%, 58%), step by step:

1. Start from hue 262°, saturation 83% and lightness 58%.
2. Use them to find the chroma (the color intensity) and place the hue on the color wheel to get the three channel values: red 124, green 59, blue 237.
3. Convert each channel to two hexadecimal digits: #7C3BED.

HSL to HEX table of common colors

When to use HSL and when HEX

HSL is best when you want to adjust a color by eye or in code: raise the lightness for a hover state, lower the saturation for a muted variant. HEX is the most compact way to write a color in CSS and design tools, so it is the code most people copy and share.

Good to know

• Shorthand HEX codes such as #38F expand to #3388FF, and eight-digit codes carry an opacity value at the end.
• Values are rounded to whole numbers for display; the converter keeps more precision internally.
• The color picker lets you pick a color by eye when you do not have its code.
• Colors displayed on screen depend on your monitor's calibration, so the same code can look slightly different on different devices.