HEX to HSL Color Converter is a free online tool, that is used to convert HEX Color into HSL color, to use this tool you don’t need to install any software or extension to your device.
This tool has a three-part first part for Hex color input, the second one is a button press this button to convert the color into HSL the last is the output part for the converted value.
About HEXADECIMAL color:
The full form of HSL is H: hue, S: saturation, and lightness. Here Hue is the degree on the color wheel between (0-360), in the color wheel 0deg or 360deg is for red color, 120deg for green, and 240deg is for blue color. Saturation is the value between 0% to 100%; 0% means a shade of gray and 100% is the full color.
In Hexadecimal number system, it has 16 alphabets like 0,1,2,3,4,5,6,7,8,9, a,b,c,d,e, and f, and in Hexadecimal color format has three parts- red, green, and blue. The syntax of hex color is #rrggbb.
In this system “#” represents that this code is a hexadecimal color code, “rr” represent the color code for red in hexadecimal number and its minimum value is “00” and the maximum value is “ff”, same as “gg” represent color code for the green in hexadecimal and last one “bb” represents the hexadecimal color code for blue color.
How to make color using hexadecimal?
If you want to create the original red color in hexadecimal format by following the hex color format role the color code should be: #ff0000
now let’s write a color code for green and blue: #00ff00 (for green) and #0000ff (for blue) here 00 means no color.
About HSL Color Formate:
The full form of HSL is H: hue, S: saturation, and lightness. Here Hue is the degree on the color wheel between (0-360), in the color wheel 0deg or 360deg is for red color, 120deg for green, and 240deg is for blue color. Saturation is the value between 0% to 100%; 0% means a shade of gray and 100% is the full color.
Syntex of an HSL color in CSS is:
hsl(hue, saturation, lightness)
Some Examples of HSL Colors:
- HSL(0, 100%, 80%) = red color
- HSL(360, 100%, 80%) = red color
- HSL(120, 100%, 25%) = dark green color
- HSL(120, 60%, 70%) = pastel green color
HSL Color has another version extended with an alpha value which can manage the opacity of the color.
Create Beautiful colors using our Color generator:
Leave a Reply