Color Converter

HEX to HSL Color Converter – a free online tool used to convert HEX colors to HSL colors. To use this tool, you don’t need to install any software or extension on your device.

This tool consists of three parts: the first part is for entering a hexadecimal color, the second is a button to convert the color to HSL, and the last is the output section for the converted value.

About HEX Colors:

The full HSL format: H: Hue, S: Saturation, and L: Lightness. Here, the Hue is the degree on the color wheel (0–360). On the color wheel, 0° or 360° corresponds to red, 120° to green, and 240° to blue. Saturation is a value from 0% to 100%; 0% means a shade of gray, and 100% means full color.

In the hexadecimal system, there are 16 symbols: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, and f. In the HEX color format, there are three parts - red, green, and blue. The HEX color syntax is: #rrggbb.

The "#" symbol indicates that the code is a hexadecimal color code. "rr" represents the red color code in hexadecimal, with a minimum of "00" and a maximum of "ff". The same applies for "gg" for green and "bb" for blue.

How to specify a color in HEX?

To create a pure red in HEX format, the color code should be: #ff0000.

Similarly, for green and blue, the codes are #00ff00 for green and #0000ff for blue, where 00 indicates the absence of that color.

About the HSL Color Format:

The full HSL format: H: Hue, S: Saturation, L: Lightness. Here, Hue is the degree on the color wheel (0–360). In the color wheel, 0° or 360° is red, 120° is green, and 240° is blue. Saturation is a value from 0% to 100%; 0% means a shade of gray, and 100% means full color.

The HSL syntax in CSS is:

hsl(hue, saturation, lightness)

Some examples of HSL colors:

1. HSL(0, 100%, 80%) = red color
2. HSL(360, 100%, 80%) = red color
3. HSL(120, 100%, 25%) = dark green color
4. HSL(120, 60%, 70%) = pastel green color

HSL Color also has an extended version with an alpha value that controls the opacity of the color.