HSL Color Values in CSS3

HSL is for Hue, Saturation and Lightness when color is set for elements. Hue value is from 0 to 260, wherein 0 or 360 is for red, 240 for bluw, whereas 120 for green. Saturation and Lightness is a percentage value.


Let us now see an example for HSL color values −

 Live Demo

<!DOCTYPE html>
#demo1 {background-color: hsl(150, 100%, 50%);}
#demo2 {background-color: hsl(150, 100%, 50%);}
#demo3 {background-color: hsl(140, 100%, 40%);}
#demo4 {background-color: hsl(120, 100%, 40%);}
#demo5 {background-color: hsl(120, 100%, 30%);}
#demo6 {background-color:rgba(108,111,35,0.6);}
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>