WEB颜色值得设定

设置页面颜色，我经常用到的有颜色名、#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：完全透明