运行 ❯
获取您
的
网站
×
更改方向
保存代码
更改主题，深色/浅色
转到 Spaces
<!DOCTYPE html> <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>
