CSS3顏色特性

 CSS3顏色特性

“佛靠金裝，人靠衣裝”，網頁也是如此。隨著互聯網的迅速發展，一個網頁給人們留下的第一印象，既不是它的內容，也不是它的設計， 而是整體顏色。為了能夠達到人們的需求，Web設計師除了需要掌握網站制作的技術之外，還必須能夠很好地應用 Web顏色。換句話說，網站顏色的使用好壞， 直接影響網站的生存力。

網頁色彩的表現原理：

我們知道有256種Web安全顏色，其實這256種顏色是指8位顏色的表現能力，隨著科技的發展，現在顏色不局限于8位，16位色彩的總數是65536色，也就是2的16次方，而新增了24位元色彩，也就是2的24次方，即16777216種顏色。32位色就是2的32次方的發色數，即16777216種顏色，不過它增加了256階顏色的灰度。 32位色和16位色肉眼分辨不出來嗎？ 如果用兩臺品牌型號都一樣 的顯示器， 分別調不同的顏色， 就能看出區別。 而在Web頁面的設計中， 顏色主要運用16 進制數值的表示方法， 為了用HTML表現RGB顏色， 使用十六進制數 0 ～ 255， 改為十六進制就是 00 ～ FF， 用RGB的順序羅列就成為HTML顏色編碼。 例如， 在 HTML 編碼中“ 000000” 就是指紅色（ R）、綠色（ G） 和藍色（ B） 都沒有，就是0狀態，也就是黑色。相反“ FFFFFF” 就是就是 紅色（ R）、 綠色（ G） 和藍色（ B）都是 255，也就是白色。顯示器是由一個個像素構成，利用電子束來表現色彩。像素把光的三原色： 紅色（ R）、綠色（ G）、藍色（ B） 組合成的色彩 按照科學原理表現出來。 一 像素包含 8 位元色彩的信息量， 有 從 0 ～ 255 的256個單元， 其中 0 是 完全 無光 狀態， 255 是最 亮 狀態。

http:/ /www.iis7.com/b/wzjk/

1. RGB色彩模式，RGB色彩模式是光的三原色 紅、 綠、 藍 混合產生的。 Web頁面中使用的圖片在大多數是在RGB色彩模式中制作的。 RGB色彩是顏色相加混合產生的， 這樣的混合稱為加色混合。加色混合中， 補色是指相關的兩個顏色混合時， 成為白色的情況。

2.CMYK色彩模式，CMYK色彩模式是指顏料的三原色青色、洋紅、黃色加上黑色，這四種顏色減色混合表現出的色彩是主要用于出版印刷時制作圖像的一種模式。 減色混合是指是指顏色混合后出現 的色彩比原來的顏色暗淡， 這樣與補色相關的兩種顏色混合就會出現彩色的情況。

3. 索引色彩模式，索引色彩模式是已經被限定在256種顏色以內的模式， 主要用于Web頁面安全色彩和制作透明GIF圖片。在Photoshop中制作透明GIF圖片時， 一定要使用索引色彩模式。

4. 灰度模式，灰度模式是無色彩模式， 在制作黑白圖片時使用， 主要用于處理 黑、白、灰色 圖片。

5.雙色調模式，雙色調模式是在黑白圖片中加入顏色，使色調更加豐富的模式。RGB、CMYK等顏色模式都不可以直接轉換為雙色調模式，必須將色彩模式先轉換為灰度模式后， 才能夠轉換為雙色調 模式。 用雙色調模式可以用很小的空間制作出漂亮的圖片。

6.位圖模式，位圖模式是用白色和黑色共同處理圖片的模式。與雙色調一樣，除雙色調模式和灰度模式外，其他色彩模式都需要轉換為灰度模式后，再轉換為位圖模式。 位圖模式可以選定5種圖片 處理 方法：

-50% 閾值， 是在 256 種 顏色 中， 當 顏色 值 大于 129 就 處理 為 白色， 反之則處理為黑色。 

-圖案仿色， 是按一定的模式處理圖片。 

-擴散仿色為最常用的選項， 是按黑色和白色的陰影使其分布。 

-半調網屏與自定圖案， 是利用盲點的各種形態和密度與用戶自己設置樣式的處理方式。

CSS3 顏色模式在 CSS2.  的基礎 CSS3上 新增了 RGBA、 HSL 和 HSLA：

1. RGBA在RGB基礎上增加了控制alpha透明度的參數，其中RGB顏色模式（ 也稱為三原色） 是工業界的一種顏色標準，通過對紅（ R）、綠（ G）、藍（ B） 三個顏色通道的變化以及它們相互之間的疊加得到各種顏色，RGB幾乎包括人類視力所能感知的所有顏色，是目前運用最廣的顏色系統之一。 而RGBA僅在 RGB 的基礎上增加了alpha通道， 用來設置顏色的透明度。

RGBA的屬性參數很簡單， 分別代表紅，綠，藍以及透明度的值。

-R： 紅色值， 其取值可以是正整數或者百分值。 

-G： 綠色值， 其取值可以是正整數或者百分值。 

-B： 藍色值， 其取值可以是正整數或者百分值。 

-A： alpha透明值， 其取值在0～1范圍之間。

這幾個參數值都不可以取負值。

2. HSL顏色模式HSL和RGB一樣，同屬于工業界的一種顏色標準，通過對色調（ H）、飽和度（ S）、亮度（ L）三個顏色通道的變化以及它們相互之間的疊加 得到各式各樣的顏色的。 HSL標準幾乎包括人類視力所能感知的所有顏色， 是目前運用最廣的顏色系統之一。使用HSL模型為圖像中每一個像素的HSL分量分配 一個0～255范圍內的強度值。HSL圖像只用三種通道按照不同的比例混合，在屏幕上呈現16777216種顏色。前面也說過，色調（ H）是在色盤上的顏色，顏色 的選擇是使用飽和度（ S），0度是紅色，120度為綠色，240度為藍色。同時可以使用不同的亮度（ L）來控制這個顏色，其中0表示的是一個灰度，不使用任何 的色彩，而100%是指在充分使用一個顏色。

-H： 色調（ Hue）取整數值（< length>），可以為任意整數，其中0（ 或360或-360） 表示紅色， 60表示黃色， 120表示綠色， 180表示青色，240表示 藍色， 300表示洋紅。 當它們的值大于360時，實際的值等于該值除360之后的余數。例如，如果色調的值是480，則實際的顏色值為480除以360之后得到的 余數120。 

-S： 飽和度（ Saturation）。就是顏色的深淺度和鮮艷程序， 取百分數（< percentage>）， 可以取值0～100%之間的任意值，其中0表示灰度（ 沒有該 顏色）， 100%表示飽和度最高（ 該顏色最鮮艷）。 

-L： 亮度（ Lightness）。取值和飽和度（ S） 一樣，可以取值0～100%之間的任意值，其中0最暗（ 黑色），100%最亮（白色）。

3. HSLA顏色模式HSLA是HSL的擴展模式， 在HSL的基礎上增加一個透明通道alpha來設置不透明參數。