CSS技術(shù)中，許多屬性都要用到顏色取值，例如background-color、border-color、outline-color等。本文主要為大家講解顏色的三個(gè)要素，以及各種顏色取值的格式和原理。

承接文章：頁(yè)面不受客戶(hù)字體安裝限制，CSS3的服務(wù)器端字體，使用起來(lái)很方便

技術(shù)等級(jí)：中級(jí) | 適合有一定的CSS基礎(chǔ)人士閱讀。

希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號(hào)，因?yàn)檫@些文章都是連載的，并且是經(jīng)過(guò)系統(tǒng)的歸納和總結(jié)的。塌下心來(lái)認(rèn)真閱讀，你一定會(huì)學(xué)到對(duì)你有用的知識(shí)。

一、顏色的三要素：

顏色的三要素

顏色是由波長(zhǎng)不同的電磁波產(chǎn)生的。在人們的生活中，顏色對(duì)于大多數(shù)人來(lái)說(shuō)是一個(gè)籠統(tǒng)的概念。我們經(jīng)常會(huì)說(shuō)“這件毛衣是紅色的”，或者“我今天看上了一個(gè)藍(lán)色的包包”等等。這些說(shuō)法反映了人們對(duì)于顏色最直觀(guān)的認(rèn)識(shí)。

要想讓計(jì)算機(jī)也能識(shí)別顏色，上述這些最直觀(guān)的認(rèn)識(shí)是遠(yuǎn)遠(yuǎn)不夠的。計(jì)算機(jī)之所以能夠調(diào)整出各種顏色，是因?yàn)槲覀冇萌齻€(gè)非常重要的要素明確了顏色的最終顯示。也就是說(shuō)，計(jì)算機(jī)只要確定了這三個(gè)要素，顏色也就確定了下來(lái)。

顏色的三要素是：

• 色相

• 明度

• 飽和度

色相（Hue），被定義為“色彩的相貌”。就是我們俗稱(chēng)的“什么顏色”。全色譜色相包括七種，它們分別是：紅、橙、黃、綠、青、藍(lán)、紫。要想確定顏色，首先要明確色相。色相的取值范圍是0-360，單位為度。正好構(gòu)成了一個(gè)圓形，也被人們稱(chēng)為“色相環(huán)”。

色相環(huán)

大家可以一起來(lái)看上圖的色相環(huán)，0度表示的是紅色，90度表示的是綠色，與紅色相對(duì)的180度為青色，270度表示的是藍(lán)色，最后360度又回到了紅色。這就是構(gòu)成顏色第一個(gè)像素的最基本的七種顏色。

飽和度（Saturation），被定義為“顏色的純度”，取值范圍是0%-100%。一個(gè)顏色的飽和度取值為100%，說(shuō)明該顏色沒(méi)有添加其他顏色，或者說(shuō)這時(shí)的顏色最純。一個(gè)顏色的飽和度取值為0%，就變成了灰色。

飽和度

明度（Brightness），被定義為“顏色的亮度”，取值范圍是0%-100%。一個(gè)顏色的明度取值為100%，說(shuō)明這時(shí)的顏色最亮。一個(gè)顏色的明度取值為0%，就變成了黑色。

我們看一看Photoshop中的拾色器，會(huì)對(duì)這三個(gè)要素理解得更加透徹。

Photoshop 拾色器

Photoshop的拾色器中，指示HSB的三個(gè)文本框就分別表示色相、飽和度、明度。中間的豎行就是色相環(huán)，可以看出，從下向上分別是全色譜色相中的七個(gè)顏色。最下方是紅色，最上方也是紅色。左側(cè)最大的矩形區(qū)域是用來(lái)調(diào)整飽和度和明度的。

大家可以試一試，在這個(gè)區(qū)域水平拖拽鼠標(biāo)，調(diào)整的是飽和度，也就是S項(xiàng)，最左側(cè)為灰色，最右側(cè)為最飽和的色相顏色。在這個(gè)區(qū)域垂直拖拽鼠標(biāo)，調(diào)整的是明度，也就是B項(xiàng)，最底部是黑色，最頂部是最亮的色相顏色。

二、RGB顏色代碼：

RGB是一種在電子設(shè)備上使用的顏色模式，這種顏色模式利用三種基本的顏色混合得到成千上萬(wàn)的顏色。這三種基本的顏色就是R（紅色）、G（綠色）、B（藍(lán)色）。

在這種顏色模式中，三種基本顏色中的任意一種取值范圍是0-255，十六進(jìn)制表示為0-FF。當(dāng)取值為0時(shí)，表示最終的顏色里不包含這種基本顏色。當(dāng)取值為255或者FF時(shí)，表示最終的顏色里包含最多的這種基本顏色。

RGB顏色代碼一般采用十六進(jìn)制的形式表示。要求以#開(kāi)頭，用六位十六進(jìn)制數(shù)值組成。前兩位表示紅色的成分，中間兩位表示綠色的成分，最后兩位表示藍(lán)色的成分。所以RGB顏色代碼的格式如下：

#RRGGBB

這就可以分析除下列數(shù)據(jù)：

• 紅色的RGB顏色代碼為：#ff0000

• 綠色的RGB顏色代碼為：#00ff00

• 藍(lán)色的RGB顏色代碼為：#0000ff

三、CSS中顏色的取值：

在CSS技術(shù)中，顏色可以有多種取值，大家熟悉的包括顏色的英文單詞、十六進(jìn)制顏色代碼等。除此之外，CSS3還擴(kuò)展了許多新的可選的顏色表示方式。這里總結(jié)CSS中顏色的取值如下：

• 顏色的英文單詞

• 十六進(jìn)制顏色代碼：#RRGGBB

• 十進(jìn)制顏色代碼：rgb(r,g,b)

• 帶有不透明度通道的十進(jìn)制顏色代碼：rgba(r,g,b,a)

• 三要素顏色代碼：hsb(h,s,b)

• 帶有不透明度通道的三要素顏色代碼：hsba(h,s,b,a)

這里，以純紅色為例，它的顏色代碼可以表示為：

• red

• #ff0000

• rgb(255,0,0)

• rgba(255,0,0,1)

• hsb(0,100,100)

• hsba(0,100,100,1)

其中rgba()和hsba()都帶有一個(gè)a通道，這個(gè)通道被稱(chēng)為alpha通道，是用來(lái)調(diào)整顏色的不透明度的。取值范圍為0-1，當(dāng)取值為0時(shí)表示完全透明，當(dāng)取值為1時(shí)表示完全不透明。

小海聲明

在頭條上發(fā)表的這些文章都是從前端開(kāi)發(fā)的基礎(chǔ)開(kāi)始一步一步講起的。我非常希望能有更多的前端開(kāi)發(fā)初學(xué)者通過(guò)我寫(xiě)的文章，逐步學(xué)到一定的知識(shí)，甚至慢慢有了入門(mén)的感覺(jué)。這些文章都是我這幾年教學(xué)過(guò)程中的經(jīng)驗(yàn)，每寫(xiě)一篇時(shí)我都盡量把握好措辭，用簡(jiǎn)單易懂的語(yǔ)言描述，同時(shí)精心設(shè)計(jì)版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長(zhǎng)，但是都要耗費(fèi)小海老師很久的時(shí)間。

希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號(hào)，因?yàn)檫@些文章都是連載的，并且是經(jīng)過(guò)系統(tǒng)的歸納和總結(jié)的。塌下心來(lái)認(rèn)真閱讀，你一定會(huì)學(xué)到對(duì)你有用的知識(shí)。

關(guān)注“小海前端”，我會(huì)繼續(xù)為大家奉上更加深入的前端開(kāi)發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開(kāi)發(fā)的路努力堅(jiān)持的走下去。

文章預(yù)告

在下一篇文章中，小海前端（頭條號(hào)）將為大家介紹CSS3提供的背景屬性。CSS3在原有背景屬性的基礎(chǔ)上增添了幾個(gè)屬性，使得設(shè)置背景更加的靈活，也能完成更加復(fù)雜的設(shè)計(jì)了。希望正在學(xué)習(xí)CSS技術(shù)或前端開(kāi)發(fā)的小伙伴們一定不要錯(cuò)過(guò)。