x
<html><head><style>#p1 {background-color:hsl(120,100%,50%);}#p2 {background-color:hsl(120,100%,75%);}#p3 {background-color:hsl(120,100%,25%);}#p4 {background-color:hsl(120,60%,70%);}#p5 {background-color:hsl(290,100%,50%);}#p6 {background-color:hsl(290,60%,70%);}</style></head><body><h2>HSL colors</h2><p>HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors.</p><p>An HSL color value is specified with the hsl() function: hsl(hue, saturation, lightness)</p><p>Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white.</p><p id="p1">Green</p><p id="p2">Light green</p><p id="p3">Dark green</p><p id="p4">Pastel green</p><p id="p5">Violet</p><p id="p6">Pastel violet</p></body></html>