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：完全透明