设置页面颜色，我经常用到的有颜色名、#RRGGBB(#RBG)、RGB，今天才知道还有HSL方法。下面是颜色设置的不同方法：
1、颜色名(如 red)
W3C定义了16种颜色关键字: aqua(浅绿色)、black(黑色)、blue(蓝色)、fuchsia(紫红色)、gray(灰色)、green、lime(黄绿色)、maroon(褐红色)、navy(深蓝色)、olive（茶青色）、purple、red、silver、teal(青色)、white、yellow。(参考网址)，对应RGB:
多数浏览器支持140X11颜色名（参考网址）。
2、十六进制颜色(#RRGGBB 或 #RGB)
这6位十六进制数字（0~f），前两位定义红色，中间两位定义绿色，后两位定义蓝色。没中颜色有256（16*16）种可能的值，结果就有（256x256x256）中组合，即有这么多颜色。如果每对的两个数字相同可简写为#rgb。
纯红色：#ff0000 / #f00，纯绿色：#00ff00 / #0f0 ，纯蓝色：#0000ff / #00f 。
3、RGB颜色（R , G , B）
每种颜色取值为：0~255之间的一个值，格式：rgb(100,50,255);
与十六进制一样，每种颜色有256种可能，只是使用十进制取值。
4、RGB颜色（R% , G% , B%）
每种颜色取值：0%~100%，有一百万（100*100*100）种颜色。足够我们使用。
5、HSL颜色（色相,饱和度%,亮度%）
格式：HSL(0,0%,0%)
HSL比RGB更容易写出和看懂颜色。
第一个值表示色相，也就是一个实际的颜色值。所有颜色围绕色相环(色轮)一周，色相值以圆周上的度数表示。
色轮
红：0|360，橙：35，黄：60，绿：125，蓝：230，靛：280，紫：305
饱和度：灰色饱和度低，亮色饱和度高。
亮度：是设定颜色明暗，0%是黑色，100%是白色。中间值是实际看到的色相。
<style> #color{ width:600px; height:320px; border:1px solid #333; } #color p{height:20px;width:600px;} .p1{background:hsla(0,50%,50%,1);} .p2{background:hsla(35,50%,50%,1);;} .p3{background:hsla(60,50%,50%,1);;} .p4{background:hsla(125,50%,50%,1);;} .p5{background:hsla(230,50%,50%,1);;} .p6{background:hsla(280,50%,50%,1);;} .p6{background:hsla(305,50%,50%,1);;} </style> <div id="color"> <p class="p1"></p> <p class="p2"></p> <p class="p3"></p> <p class="p4"></p> <p class="p5"></p> <p class="p6"></p> <p class="p7"></p> </div>
5、Alpha通道
RGB和HSL都支持Alpha通道，设置颜色的不透明度。对应格式为RGBA和HSLA。
1：完全不透明；0：完全透明