Back to: HTML Tutorials
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
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.
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.
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.
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.
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.
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.
