css裡顏色的那些事兒(合法顏色值)

css中主要有六種方法指定顏色：

1.十六進位顏色

2.RGB顏色

3.RGBA顏色

4.HSL色彩

5.HSLA顏色

6.預定義/跨瀏覽器的顏色名稱

前三種是我們最常見的，也是用的最多的，而後三種對於初學者來說簡直就是“什麼鬼？”。但是！不用怕，今天我們就來好好聊聊css中的這六位小成員的事兒。

一、十六進位顏色

十六進位顏色是個比較溫和惹人愛的成員，深受所有瀏覽器的喜愛，它的組成部分是“#RRGGBB”，其中RR(red紅色)，GG(green綠色)，BB(blue藍色)。但是它也是有限制的，它的所有值必須介於0~9、A~F(a~f)，不區分大小寫。

p{    background-color:#8e236b;}

下面炒幾個特殊顏色的小栗子：

• #ff0000值呈現的是紅色，因為紅色的組成設定為最高(ff)，而其他設定為0

(同理#00ff00為綠色，#0000ff為藍色)

• #000000值為黑色

• #ffffff值為白色

二、RGB顏色

RGB顏色也是個被所有瀏覽器寵愛的成員，區別於十六進位顏色的是，RGB顏色值更具體一點，由於值的範圍擴大，展現出的顏色也更加豐富一點。它的指定是RGB(紅，綠，藍)。每個參數定義顏色的亮度，取值範圍為0~255之間的整數，或者一個從0%~100%之間的整數百分比值。

跟上一位成員一樣，當它三個參數中的某個參數達到最高值的時候，它將表現為該參數的純色。

#word{    color:rgb(255,255,153);}

下面一個百度爸爸給的附帶RGB的十六進位顏色碼

三、RGBA顏色

這個成員就比較挑剔了，是個“不尊愛老人”的主兒，專挑青壯年以下的下手，只有IE9, Firefox3+, Chrome, Safari,和Opera10+能被寵幸。它和上面那個唯一的區別就是它的參數多了一個A：alpha通道的延伸，指定對象的透明度，讓原本就多的顏色更多了一個區分通道，自然顏色也多了。

alpha參數是一個只取小數點後一位，介於0.0(完全透明)和1.0(完全不透明)之間的參數。

下面上一組RGB參數相同，A參數不同的對比圖(多餘樣式我就不寫了，主要看效果)

p{    background: rgba(223,106,95,.3);}

p{    background: rgba(223,106,95,.9);}

注意：當寫alpha參數時，小數點前面的0可直接省去。

四、HSL顏色

說到這個成員就厲害了，作為工業街的一種顏色標準，它的色彩幾乎包括了人類實力所能感知的所有顏色，是目前運用最廣的顏色系統之一。這麼厲害的角色，自然也是有所挑剔的，只有IE9, Firefox, Chrome, Safari,和Opera 10+能支援。

HSL是css3才出現的表現格式，代表色相、飽和度和亮度，使用色彩圓柱座標表示。下面來看百度爸爸的解釋。

1.H(hue)色相：

代表的是人眼所能感知的色彩範圍，這些顏色分布在一個平面的色相環上，取值範圍是0°到360°的圓心角，每個角度可以代表一種顏色。色相值的意義在於，我們可以在不改變光感的情況下，通過旋轉色相環來改變顏色。在實際應用中，我們需要記住色相環上的六大主色，用作基本參照：360°/0°紅、60°黃、120°綠、180°青、240°藍、300°洋紅，它們在色相環上按照60°圓心角的間隔排列。大致按照紅橙黃綠青藍紫的順序，定好大致顏色後再根據所在角度選取就好啦！

是不是不懂？你就明白了

當六種主色排列融合後，我們就能隨便寫角度選顏色啦~

2.S(saturation)分量

指的是色彩的飽和度，它用0%至100%的值描述了相同色相、明度下色彩純度的變化。數值越大，顏色中的灰色越少，顏色越鮮豔，呈現一種從理性(灰階)到感性(純色)的變化。

3.L(lightness)分量

指的是色彩的明度，作用是控制色彩的明暗變化。它同樣使用了0%至100%的取值範圍。數值越小，色彩越暗，越接近於黑色；數值越大，色彩越亮，越接近於白色。

p{    background-color:hsl(120,65%,75%);}

這裡要注意的是S和L，S控制的是顏色的鮮豔度，值越大顏色越鮮豔；而L控制的是顏色的亮度，當值為50%的時候是正常亮度。只看最大最小值就能很明顯的區分出二者的不同。

據張鑫旭大神所說，在色彩選擇工具中，HSL顏色非常管用，有助於迅速選取我們想要的顏色值。或者根據現有顏色得到近似色。比方說我們要實現一個hover效果，hover一個色塊，然後顏色加深，怎麼搞？使用RGB很頭疼，而使用hsl則很簡單，我們只要把l也就是亮度微調低一點就可以。

十六進位顏色、RGB和HSL之間可以相互轉化，過程比較複雜，在這我就不說了，有興趣的可以查一下。

五、HSLA顏色

RGB有兄弟RGBA，那麼HSL有姐妹HSLA自然也不奇怪。功能也跟前一對兄弟一樣，A控制透明度，屬性一切參照RGBA中的。這就不多說了。

p{    background-color:hsl(120,65%,75%,.5);}

六、預定義/跨瀏覽器的顏色名稱

147是在HTML和css顏色規範預定義的顏色名稱，是所有瀏覽器都支援的。147包括17種標準色(淺綠色，黑色，藍色，紫紅色，灰色，灰色，綠色，石灰，栗色，海軍，橄欖，紫，紅，銀，藍綠色，白色和黃色) 和130多個其他。

結束語：

關於顏色的主要分類就是以上幾種了，平時用的話沒有什麼太大區別，主要是表達形式的不同，其實也沒有多難，結合圖片看幾遍就明白了。還有一些關於顏色的小知識暫時我還沒有涉及到，所以就先寫到這吧，如果有什麼不好的請多包涵。

更多css裡顏色的那些事兒(合法顏色值) 相關文章請關注topic.alibabacloud.com！

