hsl()

版本： CSS3

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

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
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 */

上篇： rgba()

下篇： hsla()