hsl()

版本：CSS3

hsl()函数符被定义为色相-饱和度-明度（Hue-saturation-lightness）模式。HSL 相比 RGB 的优点是更加直观：你可以估算你想要的颜色，然后微调。它也更易于创建相称的颜色集合。（通过保持相同的色相并改变明度/暗度和饱和度）。

浏览器支持


IE9以上版本的浏览器都支持`hsl()`

hsl()函数

hsl(H,S,L)

取值：

色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。这个角度作为一个无单位的<number>被给出。定义red=0=360，其它颜色分散于圆环，所以green=120,blue=240，以此类推。作为一个角度，它隐含像-120=240 和 480=120 这样的回环。

饱和度和明度由百分数来表示。
100%是满饱和度，而0%是一种灰度。
100%明度是白色，0%明度是黑色，而50%明度是“一般的”。

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>document</title>
	<style type="text/css">
		div{
			
		background-color:hsl(360,50%,50%);

		}

	</style>
</head>
<body>
	<div>hsl颜色值</div>
	
</body>
</html>

效果图：

更多内容请参阅：CSS颜色值、CSS颜色

hsl(0,  100%,50%)    /* red */   
hsl(30, 100%,50%)                 
hsl(60, 100%,50%)                
hsl(90, 100%,50%)                
hsl(120,100%,50%)    /* green */ 
hsl(150,100%,50%)                
hsl(180,100%,50%)                
hsl(210,100%,50%)                
hsl(240,100%,50%)    /* blue */  
hsl(270,100%,50%)                
hsl(300,100%,50%)                
hsl(330,100%,50%)                
hsl(360,100%,50%)    /* red */   

hsl(120,100%,25%)    /* dark green */  
hsl(120,100%,50%)    /* green */       
hsl(120,100%,75%)    /* light green */ 

hsl(120,100%,50%)    /* green */  
hsl(120, 67%,50%)                 
hsl(120, 33%,50%)                 
hsl(120,  0%,50%)                 

hsl(120, 60%,70%)    /* pastel green */