HSL色彩模式
CSS3中，HSL色彩模式的表示语法：
hsl(<length>,<percentage>,<percnetage>)参数值说明：
- 一下是以主色调为红色的配色方案事例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>配色方案表title>
<style type="text/css">
.hsl{
height:20px;
border:1px soild #0000cc;
padding:10px;
height:170px;
background-color:hsl(0,0%,90%);
color:hsl(0,100%,50%);
font-size:12px;
text-align:center;
line-height:25px;
width:320px;
}
ul{
width:320px;
margin:0;
padding:10px 0;
border-top:1px solid #66ff99;
}
li{
float:left;
margin:1px 0 0 1px;
width:50px;
height:15px;
list-style:none;
font-size:12px;
line-height:15px;
}
/*第一行*/
li:nth-child(8) {background-color:hsl(0,100%,100%);}
li:nth-child(9) {background-color:hsl(0,75%,100%);}
li:nth-child(10) {background-color:hsl(0,50%,100%);}
li:nth-child(11) {background-color:hsl(0,25%,100%);}
li:nth-child(12) {background-color:hsl(0,0%,100%);}
/*第二行*/
li:nth-child(14) {background-color:hsl(0,100%,75%);}
li:nth-child(15) {background-color:hsl(0,75%,75%);}
li:nth-child(16) {background-color:hsl(0,50%,75%);}
li:nth-child(17) {background-color:hsl(0,25%,75%);}
li:nth-child(18) {background-color:hsl(0,0%,75%);}
/*第三行*/
li:nth-child(20) {background-color:hsl(0,100%,50%);}
li:nth-child(21) {background-color:hsl(0,75%,50%);}
li:nth-child(22) {background-color:hsl(0,50%,50%);}
li:nth-child(23) {background-color:hsl(0,25%,50%);}
li:nth-child(24) {background-color:hsl(0,0%,50%);}
/*第四行*/
li:nth-child(26) {background-color:hsl(0,100%,25%);}
li:nth-child(27) {background-color:hsl(0,75%,25%);}
li:nth-child(28) {background-color:hsl(0,50%,25%);}
li:nth-child(29) {background-color:hsl(0,25%,25%);}
li:nth-child(30) {background-color:hsl(0,0%,25%);}
/*第五行*/
li:nth-child(32) {background-color:hsl(0,100%,0%);}
li:nth-child(33) {background-color:hsl(0,75%,0%);}
li:nth-child(34) {background-color:hsl(0,50%,0%);}
li:nth-child(35) {background-color:hsl(0,25%,0%);}
li:nth-child(36) {background-color:hsl(0,0%,0%);}
style>
head>
<body>
<div class="hsl">
<div>色调：0 红色div>
<div>竖向：亮度：横向：饱和度div>
<ul>
<li>li><li>100%li><li>75%li><li>50%li><li>25%li><li>0%li>
<li>100%li><li>li><li>li><li>li><li>li><li>li>
<li>75%li><li>li><li>li><li>li><li>li><li>li>
<li>50%li><li>li><li>li><li>li><li>li><li>li>
<li>25%li><li>li><li>li><li>li><li>li><li>li>
<li>0%li><li>li><li>li><li>li><li>li><li>li>
ul>
div>
body>
html>
5.结果示意图：
