HSL in HTML

HSL and HSLA in HTML with Examples

In this article, I am going to discuss HSL and HSLA in HTML with Examples. Please read our previous article where we discussed HEX in HTML with Examples. At the end of this article, you will learn everything about HTML HSL with Examples.

HSL in HTML

HSL and HSLA in HTML with Examples

The letters ‘H,’ ‘S,’ and ‘L’ stand for hue, saturation, and lightness, respectively.

Syntax: hsl(hue, saturation, lightness)

Hue

The color of an image is referred to as its hue. It has a scale of 0 to 360. 0 signifies red, 120 represents green, and 240 represents blue.

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;}

div{
padding:25px;
color:white;}
</style>

<div class="div1" style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</div>
<div class="div2" style="background-color:hsl(120, 100%, 50%);">hsl(240, 100%, 50%)</div>
<div class="div3" style="background-color:hsl(240, 100%, 47%);">hsl(147, 50%, 47%)</div>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

HSL in HTML

Saturation

The intensity of a color can be described as saturation. When a color is totally saturated, it is regarded to be in its purest form. In 0 percent saturation color is grey color and one can’t be able to see the color. In 50 percent saturation color is 50 percent grey and one can see the color. In 100 percent saturation color is in the purest form with no shades of grey.

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;}

div{
padding:25px;
color:white;}
</style>

<div class="div1" style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</div>
<div class="div2" style="background-color:hsl(0, 50%, 50%);">hsl(0, 50%, 50%)</div>
<div class="div3" style="background-color:hsl(0, 100%, 47%);">hsl(0, 100%, 47%)</div>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

HSL in HTML with Examples

Lightness

The brightness of a color is measured in lightness, with 0 percent representing no lightness and the color being black, 50 percent representing neither dark nor light, and 100 percent representing full lightness and the color is white.

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;}

div{
padding:25px;
color:white;
border:1px solid lightgrey;}
</style>

<div class="div1" style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</div>
<div class="div2" style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</div>
<div class="div3" style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</div>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

HSL in HTML

HSLA in HTML

Along with hue, saturation, and lightness, HSLA has another value alpha that is used to define a color’s opacity. The value of alpha ranges from 0.0 to 1.0. where 0.0 denotes complete transparency and 1.0 denotes complete opacity.

HSLA in HTML

Syntax: hsla(hue, saturation, lightness, alpha)

HSLA Example in HTML:
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
padding:2%;
justify-content:center;
align-items:center;
height:100vh;}

div{
padding:25px;
color:black;
border:1px solid lightgrey;}
</style>

<div class="div1" style="background-color:hsla(0, 100%, 50%,0);">hsla(0, 100%, 50%,0)</div>
<div class="div1" style="background-color:hsla(0, 100%, 50%,0.25);">hsla(0, 100%, 50%,0.25)</div>
<div class="div2" style="background-color:hsla(0, 100%, 50%,0.5);">hsla(0, 100%, 50%,0.5)</div>
<div class="div1" style="background-color:hsla(0, 100%, 50%,0.75);">hsla(0, 100%, 50%,0.75)</div>
<div class="div3" style="background-color:hsla(0, 100%, 50%,1);">hsla(0, 100%, 50%,1)</div>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

HSLA Example in HTML

In the next article, I am going to discuss Styles in HTML with Examples. Here, in this article, I try to explain HSL and HSLA in HTML with Examples and I hope you enjoy this HTML HSL and HSLA with Examples article.

Leave a Reply

Your email address will not be published. Required fields are marked *