顏色的小糾結

前言：以前老是被各類顏色表示方法弄的頭暈暈，如今就來小總結一下，若有錯誤請不吝賜教，三克油 ！

1、十六進制色（簡稱HEX）

全部瀏覽器都支持十六進制顏色值。十六進制顏色是這樣規定的：#RRGGBB，其中的 RR（紅色）、GG（綠色）、BB（藍色）十六進制整數規定了顏色的成分。全部值必須介於 0 與 FF 之間。

例如：#0000ff 值顯示爲藍色，這是由於藍色成分被設置爲最高值（ff），而其餘成分被設置爲 0；

      #00ff00 值顯示爲綠色。緣由同上；

      #ff0000 值顯示爲紅色。緣由同上。

實例：p { background-color: #00ff00; }

 

2、RGB 顏色

全部瀏覽器都支持 RGB 顏色值。能夠理解爲大天然的顏色都是由紅、綠、藍三種光學顏色混合而成的。

RGB 顏色值是這樣規定的：rgb(red, green, blue)。每一個參數 (red、green 以及 blue) 定義顏色的強度，能夠是介於 0 與 255 之間的整數，或者是百分比值（從 0% 到 100%）。

例如：#0000ff 值顯示爲藍色，這是由於 blue 參數被設置爲最高值（255），而其餘被設置爲 0，也能夠表示爲rgb(0%,0%,100%)；

      #00ff00 值顯示爲綠色。緣由同上；

      #ff0000 值顯示爲紅色。緣由同上。

實例：p { background-color: #00ff00; } 

 

3、RGBA 顏色

RGBA 顏色值獲得如下瀏覽器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。IE8如下是不支持的，對於顏色有透明度的，可使用RGBA，選擇對IE8優雅降級，使用RGB不支持透明度等。可是也有一些方法可以使RGBA在IE跨瀏覽器支持:

      一、使用支持透明度通道的圖片PNG;

      二、還有一種辦法就是使用IE filter:

好比想要一個50%透明度紅色的背景代碼以下：

p{

background:transparent;

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);

zoom: 1;  } 

這個就是利用IE filter:填充了背景,咱們使用透明度設置的是7F,也就是FF的一半表明透明。若是要設置10%透明度，

就要把startColorstr=#19FF0000,endColorstr=#19FF0000.後面的六位表明顏色，前面的表明的是明度，並且是16進制的,按照透明度百分比計算出FF的的百分比。由於這種手段來迫使用戶得到更好的用戶體驗,並且咱們發現IE filter渲染的顏色並不標準。在IE Filter中 要採用16進制的計算方式，50%的透明度是7F，也就是255的一半，127.在當前狀況下，推薦使用RGBA，在不影響功能的前提下，能夠對IE8如下瀏覽器不使用完美兼容的方案，對於影響功能時，可使用 IE filter 和png圖片。

RGBA 顏色值是這樣規定的：rgba(red, green, blue, alpha)。alpha 參數是介於 0.0（徹底透明）與 1.0（徹底不透明）的數字。

實例：p { background-color: rgba(0, 255, 0 , 0.5); }於下面寫法等同

      p { background-color: rgba(0%, 100%, 0% , 0.5); } 

 

4、HSL 顏色

HSL 顏色值獲得如下瀏覽器的支持：IE9+、Firefox、Chrome、Safari 以及 Opera 10+。IE8如下是不支持的。

HSL 指的是 hue（色調）、saturation（飽和度）、lightness（亮度） - 表示顏色柱面座標表示法。

HSL 顏色值是這樣規定的：hsl(hue, saturation, lightness)。

Hue 是色盤上的度數（從 0 到 360） - 0 (或 360) 是紅色，120 是綠色，240 是藍色。Saturation 是百分比值；0% 意味着灰色，而 100% 是全綵。Lightness 一樣是百分比值；0% 是黑色，100% 是白色。

HSL便是表明色調，飽和度，亮度三個通道的顏色，這個標準幾乎包括了人類視力所能感知的全部顏色，是目前運用最廣的顏色系統之一。

HSL 和 HSV（也叫HSB）是對RGB色彩空間中點的兩種有關係的表示，它們嘗試描述比 RGB 更準確的感知顏色聯繫H指hue（色相）、S指saturation（飽和度）、L指lightness（亮度）、V指value（色調）、B指brightness（明度）。

詳細關於HSL 和 HSV請見下面連接的文章：

http://www.360doc.com/content/13/1105/14/10724725_326803150.shtml

 

實例：p { background-color: hsl(120, 65%, 96%); }

 

5、HSLA 顏色

HSLA 顏色值獲得如下瀏覽器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

HSLA 顏色值是 HSL 顏色值的擴展，帶有一個 alpha 通道 - 它規定了對象的不透明度。

HSLA 顏色值是這樣規定的：hsla(hue, saturation, lightness, alpha)，其中的 alpha 參數定義不透明度。alpha 參數是介於 0.0（徹底透明）與 1.0（徹底不透明）的數字。

實例：p { background-color: hsl(120, 65%, 96%, 0.6); }

 

HSLA模式和RGBA模式與Opacity的區別：

    HSLA模式和RGBA模式與Opacity的區別就是前二者不回影響子類的透明度；而Opacity會影響子類的透明度，從而致使子類元素的顏色產生色差，因此爲了不出現這種狀況，咱們避免在設置Opacity值的div下包含子類。

 

6、預約義/跨瀏覽器顏色名

全部瀏覽器都支持的顏色名。

HTML 和 CSS 顏色規範中定義了 147 中顏色名（17 種標準顏色加 130 種其餘顏色）。下面的表格中列出了全部這些顏色，以及它們的十六進制值。

提示：17 種標準色是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。

CSS3下的147個顏色名稱實例頁面（可參考張鑫旭總結頁面）：

http://www.zhangxinxu.com/study/201008/css3-color-names.php

http://www.zhangxinxu.com/wordpress/2015/07/know-css1-css3-color/