HTML HSL Colors
HTML
HSL colors are created with different combinations of Hue, Saturation and Lightness value.
Select and convert your color code in RGB | HEX | HSL
HSL color code.
hsl(0, 100%, 50%)
hsl(147, 50%, 47%)
HTML HSL Colors
In HSL colors Hue,Saturation,Lightness values are given in decimal number.
Hue is a color range from minimum 0 to maximum 360 value. where 0 is red, 120 is green and 240 is blue color.
Saturation is the percentage value of colorfulness 0% means no color at all and 100% means full color of its value.
Lightness is the percentage value of light 0% means no light(black) and 100% means full light(white).
hsl(hue, saturation, lightness)
is used where hue, saturation, lightness are the corresponding value of the parameter.
hsl(hue, saturation, lightness, alpha)
is used where hue, saturation, lightness are the corresponding value of the parameter, and alpha is value of opacity from a range of 0 to 1
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML HSL Color Example</title>
</head>
<body>
<h2>HTML HSL Color Example</h2>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
<h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
<h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
<h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
<h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>
</body>
</html>
Click on the "See output" button to see how it works.
Shades of gray color
Gray color in HSL is the color where Hue is set to 0 and Saturation is set to 0%, and Lightness value changes for different types of gray shades.