CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

没有口水与汗水，就没有成功的泪水。早安！有时，我们以为赢了，其实，我们输了！因为，我们赢了＂面子＂，却输了＂里子＂！早安！

HSL色彩模式是工业界的一种颜色标准，它通过对色调（H），饱和度（S），亮度（L）三个颜色通道的改变以及他们相互之间的叠加来获得各种颜色。这个标准几乎包括了人类视力可以感知的所有颜色，在屏幕上可以重现16777216种颜色，是目前应用最广的颜色系统之一。

语法：

hsl（<length>,<percentage>,<percentage>）

参数说明：

<length>表示色调（Hue），Hue衍生于色盘，取值可以为任意数值，其中0（或360或-360）表示红色，60表示黄色，120表示绿色，180表示青色，240表示蓝色，300表示洋红，当然可以设置其他数值来确定不同的颜色。

<percentage> 表示饱和度（Saturation），表示该色彩被使用了多少，即颜色的深浅程度和鲜艳程度。取值为0%到100%之间的值，其中0%表示灰度，即没有使用该颜色；100%的饱和度最高，即颜色最鲜艳。

<percentage> 表示亮度（Lightness），取值为0%到100%之间的值，其中0%表示最暗，显示为黑色；50%表示均值，100%最亮，显示为亮色。

实例：网页配色解决方案

XML/HTML Code复制内容到剪贴板

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>HSLColor</title>
<styletype="text/css">
table{
border:solid1pxOrange;
background:#eee;
padding:6px;
}
th{
color:Orange;
font-size:12px;
font-weight:normal;
}
td{
width:80px;
height:30px;
}
/*第1行*/
tr:nth-child(4)td:nth-of-type(1){background:hsl(30,100%,100%);}
tr:nth-child(4)td:nth-of-type(2){background:hsl(30,75%,100%);}
tr:nth-child(4)td:nth-of-type(3){background:hsl(30,50%,100%);}
tr:nth-child(4)td:nth-of-type(4){background:hsl(30,25%,100%);}
tr:nth-child(4)td:nth-of-type(5){background:hsl(30,0%,100%);}
/*第2行*/
tr:nth-child(5)td:nth-of-type(1){background:hsl(30,100%,88%);}
tr:nth-child(5)td:nth-of-type(2){background:hsl(30,75%,88%);}
tr:nth-child(5)td:nth-of-type(3){background:hsl(30,50%,88%);}
tr:nth-child(5)td:nth-of-type(4){background:hsl(30,25%,88%);}
tr:nth-child(5)td:nth-of-type(5){background:hsl(30,0%,88%);}
/*第3行*/
tr:nth-child(6)td:nth-of-type(1){background:hsl(30,100%,75%);}
tr:nth-child(6)td:nth-of-type(2){background:hsl(30,75%,75%);}
tr:nth-child(6)td:nth-of-type(3){background:hsl(30,50%,75%);}
tr:nth-child(6)td:nth-of-type(4){background:hsl(30,25%,75%);}
tr:nth-child(6)td:nth-of-type(5){background:hsl(30,0%,75%);}
/*第4行*/
tr:nth-child(7)td:nth-of-type(1){background:hsl(30,100%,63%);}
tr:nth-child(7)td:nth-of-type(2){background:hsl(30,75%,63%);}
tr:nth-child(7)td:nth-of-type(3){background:hsl(30,50%,63%);}
tr:nth-child(7)td:nth-of-type(4){background:hsl(30,25%,63%);}
tr:nth-child(7)td:nth-of-type(5){background:hsl(30,0%,63%);}
/*第5行*/
tr:nth-child(8)td:nth-of-type(1){background:hsl(30,100%,50%);}
tr:nth-child(8)td:nth-of-type(2){background:hsl(30,75%,50%);}
tr:nth-child(8)td:nth-of-type(3){background:hsl(30,50%,50%);}
tr:nth-child(8)td:nth-of-type(4){background:hsl(30,25%,50%);}
tr:nth-child(8)td:nth-of-type(5){background:hsl(30,0%,50%);}
/*第6行*/
tr:nth-child(9)td:nth-of-type(1){background:hsl(30,100%,38%);}
tr:nth-child(9)td:nth-of-type(2){background:hsl(30,75%,38%);}
tr:nth-child(9)td:nth-of-type(3){background:hsl(30,50%,38%);}
tr:nth-child(9)td:nth-of-type(4){background:hsl(30,25%,38%);}
tr:nth-child(9)td:nth-of-type(5){background:hsl(30,0%,38%);}
/*第7行*/
tr:nth-child(10)td:nth-of-type(1){background:hsl(30,100%,25%);}
tr:nth-child(10)td:nth-of-type(2){background:hsl(30,75%,25%);}
tr:nth-child(10)td:nth-of-type(3){background:hsl(30,50%,25%);}
tr:nth-child(10)td:nth-of-type(4){background:hsl(30,25%,25%);}
tr:nth-child(10)td:nth-of-type(5){background:hsl(30,0%,25%);}
/*第8行*/
tr:nth-child(11)td:nth-of-type(1){background:hsl(30,100%,13%);}
tr:nth-child(11)td:nth-of-type(2){background:hsl(30,75%,13%);}
tr:nth-child(11)td:nth-of-type(3){background:hsl(30,50%,13%);}
tr:nth-child(11)td:nth-of-type(4){background:hsl(30,25%,13%);}
tr:nth-child(11)td:nth-of-type(5){background:hsl(30,0%,13%);}
/*第9行*/
tr:nth-child(12)td:nth-of-type(1){background:hsl(30,100%,0%);}
tr:nth-child(12)td:nth-of-type(2){background:hsl(30,75%,0%);}
tr:nth-child(12)td:nth-of-type(3){background:hsl(30,50%,0%);}
tr:nth-child(12)td:nth-of-type(4){background:hsl(30,25%,0%);}
tr:nth-child(12)td:nth-of-type(5){background:hsl(30,0%,0%);}
</style>
</head>
<body>
<tableclass="hslexample">
<tbody>
<tr>
<th></th>
<thcolspan="5">色相：H=30Red-Yellow(=Orange)</th>
</tr>
<tr>
<th></th>
<thcolspan="5">饱和度(→)</th>
</tr>
<tr>
<th>亮度(↓)</th>
<th>100%</th>
<th>75%</th>
<th>50%</th>
<th>25%</th>
<th>0%</th>
</tr>
<tr>
<th>100</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>88</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>75</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>63</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>50</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>38</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>25</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>13</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>0</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>