web前端入門到實戰：css中顏色

顏色

若是咱們相給頁面設置顏色能夠採用多種方法進行設置：

1、命名顏色

假設在設置頁面的顏色時以爲一部分很小的顏色集中就足夠了，就能夠直接給定顏色的名稱。CSS稱這些有名稱的顏色爲命名顏色。

命名顏色的關鍵字有限，css定義了17個標準色：淺綠色，黑色，藍色，紫紅色，灰色，橙色，綠色，石灰，栗色，海軍，橄欖，紫，紅，銀，藍綠色，白色和黃色。

有的時候也許使用其餘顏色值，並不在標準顏色以內的顏色也可使用，它之因此能起做用，緣由是大多數的web瀏覽器能識別多達140個顏色，包括前面說的17種顏色。

（二）、RGB指定顏色

計算機經過組合不一樣的紅色、藍色、綠色份量來創造顏色。這種組合一般被稱爲RGB顏色。能夠直接訪問這些顏色，經過調整紅、綠、藍份量來最大限度的控制顏色。全部瀏覽器都支持 RGB 顏色值。

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

百分數記法：分別指定白色和黑色，值將指定爲：

rgb(100%,100%,100%)
rgb(0%,0%,0%)

整數三元組記法，相同的顏色表示以下

rgb(255,255,255)
rgb(0,0,0)
專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學習方法和須要注意的小細節，不停更新最新的教程和學習技巧（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

在百分數記法中也可使用分數，假設若是向指定某一顏色的紅色份量爲25.5%，綠色份量爲40%，藍色份量爲98.2%，若是用戶代理忽略小數點，就會把這些值取整爲與之最接近的整數。固然整數取值法只能使用整數。以下所示：

h2{color:rgb(25.5%，40%，98.2%)} 轉換爲 h2{color:rgb(26%，40%，98%)}

不管哪一種記法，若是值落在可取範圍以外，都會變更到最接近的範圍邊界。當一個值大於100%或是小於0%都會默認的調整到100%或0%（這是可取的最大和最小值）

h2{color:rgb(200%，-40%，0%)} 轉換爲 h2{color:rgb(100%，0%，0%)}

h2{color:rgb(42，500，-20)} 轉換爲h2{color:rgb(42，255,0)}

假設有一個顏色爲rgb（25%，37.5%，60%），將其轉換爲整數記法，百分數乘以255，就會獲得63.7五、95.62五、153。再將這些值取整爲最接近的整數，記獲得了rgb（64,96,153）。

（三）、十六進制RGB顏色

全部瀏覽器都支持十六進制顏色值。

十六進制顏色是這樣規定的：#RRGGBB，其中的 RR（紅色）、GG（綠色）、BB（藍色）十六進制整數規定了顏色的成分。全部值必須介於 0 與 FF 之間。大寫小寫均可以。

若是組成十六進制的三組數各自都是成對的，還容許一種簡寫方法，這種寫法通常都是#RGB

如 h2{color:#FFF}=h2{color:#FFFFFF}

瀏覽器會取一位，並將其複製成兩位。所以#FF0000等價於#F00。

（四）、RGBA顏色值

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

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

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

（五）、HSL 顏色

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

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

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

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

（六）、HSLA 顏色

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

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

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

（七）、web安全顏色

web安全顏色是指，在256色計算機系統上能夠避免抖動的顏色，保證網頁顏色能夠正確顯示。web安全顏色能夠表示爲RGB值20%和51（相應的十六進制值爲33）的倍數。另外，0%或0也是一個安全值。

• 若是使用RGB百分數，要讓全部這三個份量要麼是0%，要麼是能被20整除的數值，例如rgb（40%，100%，80%）或rgb（60%，0%，0%）。
• 若是使用0~255範圍的RGB值，則份量要麼是0，要麼是能被51整除的數，如rgb（0,204,153）或rgb（255,0,102）
• 採用十六進制記法，使用值爲00、3三、6六、9九、CC和FF的三元組都認爲是Web安全的。這種例子還有#66993三、#00CC66和#FF00FF。這說明，web安全顏色的簡寫十六進制值是0、三、六、九、C和F。所以#69三、#0C六、#F0F都是web安全顏色的例子。