CSS3 HSL()详解:

这是CSS3新增的颜色表示模式。
在CSS2中，只有RGB（red、green和blue的缩写）和十六进制两种颜色模式。
为了能够支持颜色的透明度，CSS3新增了RGBA（A是Alpha缩写）。
但是无论是RGB、RGBA还是十六进制颜色值，都无法对颜色有一个直观的感受，毕竟大多数人都没有超凡的艺术细胞。
所以CSS3又新增了HSL颜色表示模式和与透明度相关的HSLA模式。
在介绍HSL颜色模式之前，先来对RGB和十六进制颜色值进行一下简单介绍:
一.RGB颜色模式:
RGB模式表示颜色是由red、green和blue三种颜色混合而成。
每一种颜色的最小值是0，最大值是255。
0表示没有对应的颜色，255表示纯色。
例如rgb(255,0,0)表示纯红色，rgb(0,255,0)纯绿色，rgb(0,0,255)纯蓝色，rgb(255,255,255)黑色。
二.十六进制颜色颜色模式:
十六进制颜色值简称HEX，颜色值前面带有#号，格式可以描述为如下:

#RRGGBB

每两位上的值就是RGB上的数字转换16进制后的值。
三.HSL颜色模式:
HSL就是色调(Hue)、饱和度(Saturation)和亮度(Lightness)的缩写。
通过三个颜色通道的叠加实现调节颜色的功能。
H：0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360。
S：取值为：0.0% - 100.0%；0% 意味着灰色，而 100% 是全彩
L：取值为：0.0% - 100.0%；0% 是黑色，100% 是白色。

看一段代码实例，它演示了色调的分步规律:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
section{
  position:relative;
}
div{
  width:1px;
  height:150px;
  float:left;
}
</style>
<script>
window.onload=function(){
  var container = document.querySelector('section');
  for (var index = 0; index < 360; index++) {
    var div = document.createElement('div');
    div.style.background = 'hsl(' + index + ',100%, 50%)';
    container.appendChild(div);
  }
}
</script>
</head>
<body>
<section></section>
</body>
</html>

效果图：是不是红、橙、黄、绿、青、蓝、紫的分布规律非常清晰了。

下面是演示颜色饱和度的代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
section{
  position:relative;
}
div{
  width:1px;
  height:150px;
  float:left;
}
</style>
<script>
window.onload=function(){
  var container = document.querySelector('section');
  for (var index = 0; index < 100; index++) {
    var div = document.createElement('div');
    div.style.background = 'hsl(100,' + index + '%, 50%)';
    container.appendChild(div);
  }
}
</script>
</head>
<body>
<section></section>
</body>
</html>

效果图：饱和度从灰色到全彩的变化也是一目了然。

下面对于亮度的演示，代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
section{
  position:relative;
}
div{
  width:1px;
  height:150px;
  float:left;
}
</style>
<script>
window.onload=function(){
  var container = document.querySelector('section');
  for (var index = 0; index < 100; index++) {
    var div = document.createElement('div');
    div.style.background = 'hsl(100,100%, ' + index + '%)';
    container.appendChild(div);
  }
}
</script>
</head>
<body>
<section></section>
</body>
</html>

效果图：

下面再看一下HSLA的使用，这个就比较简单了，A就是设置透明度的，代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
div {
  margin:10px;
  width:150px;
  height:50px;
  text-align:center;
  line-height:50px;
}
div:first-child {
  background-color: hsla(100,100%,54%,0.3)
}
div:last-child {
  background-color: hsl(100,100%,54%)
}
</style>
</head>
<body>
<div>蚂蚁部落</div>
<div>蚂蚁部落</div>
</body>
</html>

效果图: