CSS HSL Colors
CSS
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%)
CSS 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 CSS Editor "Try it Now"
You can edit the CSS code and view the result using online editor.
Example
<h2>CSS 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>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.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<title>CSS HSL Color Example</title>
<style>
h2{
text-align:center;
}
.c1 {
background-color:hsl(0, 100%, 50%);
}
.c2 {
background-color:hsl(240, 100%, 50%);
}
.c3 {
background-color:hsl(147, 50%, 47%);
}
.c4 {
background-color:hsl(300, 76%, 72%);
}
.c5 {
background-color:hsl(39, 100%, 50%);
}
.c6 {
background-color:hsl(248, 53%, 58%);
}
</style>
</head>
<body>
<h2>CSS HSL Color Example</h2>
<h2 class="c1">hsl(0, 100%, 50%)</h2>
<h2 class="c2">hsl(240, 100%, 50%)</h2>
<h2 class="c3">hsl(147, 50%, 47%)</h2>
<h2 class="c4">hsl(300, 76%, 72%)</h2>
<h2 class="c5">hsl(39, 100%, 50%)</h2>
<h2 class="c6">hsl(248, 53%, 58%)</h2>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.