2.2 網(wǎng)頁配色

色彩是網(wǎng)頁形象中的一個重要方面，決定了網(wǎng)頁給瀏覽者的第一印象。頁面的整體色調(diào)有活潑或嚴(yán)肅、熱烈或莊重之分，不同風(fēng)格、不同主題的網(wǎng)站在色彩的運(yùn)用上都有所不同。了解和掌握色彩知識及色彩搭配方法，對于網(wǎng)站設(shè)計很重要。

2.2.1 色彩的基礎(chǔ)概念

色彩分無彩色和有彩色兩大范疇，前者如黑、白、灰，后者如紅、黃、藍(lán)等。有彩色的色彩主要由色相、明度和飽和度3個要素組成。色相是指色彩本身的相貌，由波長決定，是色彩最基本的特征。明度是指色彩的明暗程度，也稱亮度。飽和度也稱純度，是指顏色的純粹程度，即與中性灰的摻雜程度。

在設(shè)計過程中，色彩的選擇和運(yùn)用并不單單與色彩的物理性質(zhì)有關(guān)，影響更多的是色彩帶給人的視覺感受和心理感受。色彩的視錯覺和色彩的情感是色彩的重要特性，了解這些特性對設(shè)計出精彩的作品會有很大的幫助。

色彩的視錯覺

色彩的視錯覺主要表現(xiàn)在色彩的冷與暖、興奮與沉靜、膨脹與收縮、前進(jìn)與后退、輕與重等感覺方面。

色彩的冷暖視錯覺是視覺和生理、心理上相互關(guān)聯(lián)產(chǎn)生的一種視錯覺效果。橙紅色是火焰的顏色，因而引起的暖感最強(qiáng)；藍(lán)色使人聯(lián)想到冰和水，所以它引起的冷感最強(qiáng)。這兩種顏色被稱為“暖極”和“冷極”。其他顏色的冷暖感根據(jù)其在色相環(huán)上距離冷暖兩極的位置而定，靠近暖極的稱為暖色，靠近冷極的稱為冷色，部分顏色和兩端的距離差不多，則稱為中性色。無彩色的黑、白、灰也被視為中性色。

色彩的興奮與沉靜的錯覺主要是由不同顏色對人的視網(wǎng)膜及腦神經(jīng)的刺激不同而形成的。暖色的、波長較長、明度純度高的色彩，對人的視網(wǎng)膜及腦神經(jīng)刺激較強(qiáng)，會促使血液循環(huán)加快，進(jìn)而產(chǎn)生興奮的情緒反應(yīng)，所以稱這部分色彩為興奮色。冷色的、波長較短、明度純度低的色彩，對人的視網(wǎng)膜及腦神經(jīng)刺激較弱，眼睛注視這部分顏色時，會產(chǎn)生沉靜的情緒，所以稱這部分顏色為沉靜色。

色彩有膨脹和收縮的視覺錯覺，造成這種錯覺的原因有多種，一方面是色光本身，波長長的暖色光和光度強(qiáng)的色光對眼睛成像作用比較強(qiáng)，視網(wǎng)膜接受這類光時會產(chǎn)生擴(kuò)散性，造成成像的邊緣有一條模糊帶，產(chǎn)生膨脹感。反之波長短的冷色光和光度弱的色光成像清晰，對比之下就有收縮感。另一方面，色彩的脹縮感不僅和色相有關(guān)，還與明度有關(guān)。明度高的有擴(kuò)張和膨脹感，明度低的有收縮感。如圖2-16所示，兩個圓大小相同，但給人的視覺感受是白色的圓要比黑色的圓看上去大一些。

圖2-16 色彩的膨脹與收縮

色彩的進(jìn)退錯覺由色彩的冷暖、明度、純度和面積等多種對比造成。通常暖色、亮度高、純度高的色彩有前進(jìn)感，冷色、亮度低、純度低的顏色有后退感。如圖2-17所示，在藍(lán)底色上畫一個黃色的圓，會感覺圓在上底在下，但在黃底上畫藍(lán)色的圓，卻會感覺是在黃色畫紙上開了個洞，下面襯了張藍(lán)色的紙。

圖2-17 色彩的前進(jìn)與后退

色彩產(chǎn)生輕重的視錯覺有直覺的因素，也有聯(lián)想的因素。接近黑的顏色會聯(lián)想到鐵、煤等具有重量感的物質(zhì)，而白色則會讓人聯(lián)想到白云、棉花等質(zhì)感輕的物質(zhì)。通常情況下，如果色相相同，明度高的色彩會感覺輕。而不同的色相輕重感也不同，按白、黃、橙、紅、灰、綠、紫、藍(lán)、黑的依次順序視覺感由輕到重。

色彩的情感

色彩只是一種物理現(xiàn)象，它本身是沒有感情的，但色彩卻能表達(dá)感情，因為色彩能讓人們通過視覺產(chǎn)生聯(lián)想，從而引起心理作用。色彩的聯(lián)想是通過經(jīng)驗、記憶或相關(guān)知識而吸取的，這些色彩經(jīng)過長久的反復(fù)比較，逐漸固定了它們專有的表情，不同色彩也逐漸形成了不同的象征，分別介紹如下。

白色象征雅致、干凈、純潔，出污泥而不染。圖2-18所示為以白色為主色調(diào)的網(wǎng)頁。

黑色給人的心理影響有兩類，一是消極感，使人產(chǎn)生恐懼憂傷的印象，同時又有骯臟、黑暗之感。二是黑色顯得嚴(yán)肅、莊重，象征著權(quán)利與威儀。圖2-19所示為以黑色為主色調(diào)的網(wǎng)頁。

圖2-18 以白色為主色調(diào)的網(wǎng)頁

圖2-19 以黑色為主色調(diào)的網(wǎng)頁

紅色是一種刺激性較強(qiáng)的色彩，在革命的年代常被認(rèn)為是斗爭、光明和力量的象征。在中國民間，紅色常與吉慶、幸福聯(lián)系在一起。由于紅色富有刺激性，同時它又象征著危險，例如交通信號的停止色和消防車的色調(diào)都采用紅色。圖2-20所示為以紅色為主色調(diào)的網(wǎng)頁。

黃色象征日光，同時也象征著神圣和至高無上。黃色是一種溫和的暖色，顯得輕快、明亮，不同的黃色會產(chǎn)生不同的感受，嫩黃色給人以天真、稚嫩的美感，而成熟的谷物及秋天樹葉的金黃色則意味著收獲和歡樂。圖2-21所示為以黃色為主色調(diào)的網(wǎng)頁。

圖2-20 以紅色為主色調(diào)的網(wǎng)頁

圖2-21 以黃色為主色調(diào)的網(wǎng)頁

藍(lán)色是色彩中最含蓄、最內(nèi)向的顏色，給人以純潔、透明的感覺，也給人以理性的感覺，但藍(lán)色也是悲哀的表現(xiàn)色。圖2-22所示為以藍(lán)色為主色調(diào)的網(wǎng)頁。

圖2-22 以藍(lán)色為主色調(diào)的網(wǎng)頁

綠色與大自然中草木同色，因此綠色象征著自然、生命、生長、青春和活潑等，同時象征著和平與環(huán)保，在交通信號中又象征著前進(jìn)與安全。圖2-23所示為以綠色為主色調(diào)的網(wǎng)頁。

圖2-23 以綠色為主色調(diào)的網(wǎng)頁

紫色是優(yōu)雅、高貴的色彩，另外紫色容易與夜空和陰影相聯(lián)系，所以富有神秘感，容易引起心理上的憂郁和不安。圖2-24所示為以紫色為主色調(diào)的網(wǎng)頁。

圖2-24 以紫色為主色調(diào)的網(wǎng)頁

色彩有著豐富的感情內(nèi)涵，因為它包含著無窮無盡的色相和深淺濃淡的關(guān)系，通過這些關(guān)系相互搭配和組合，可以形成各種各樣的色彩氛圍。

2.2.2 網(wǎng)頁色彩的特性

色彩在計算機(jī)中的表達(dá)

計算機(jī)采用的是二進(jìn)制計數(shù)方式，在對顏色的描述上也采用這種方法。如果是1位二進(jìn)制，那么可以描述兩種顏色，2位二進(jìn)制就可以描述4種顏色，以此類推，8位二進(jìn)制可以描述256種顏色。因為用二進(jìn)制計數(shù)比較麻煩，在HTML中使用十六進(jìn)制的數(shù)值來表示某個具體顏色。十六進(jìn)制值描述的顏色方式是#號加上一個十六進(jìn)制數(shù)值。例如，某種顏色由20% 的紅色、80% 的綠色和40% 的藍(lán)色混合而成，其十六進(jìn)制表述就是#33CC66。常用顏色的代碼列表如下。

白色 #FFFFFF。
黑色 #000000。
藍(lán)色 #0000FF。
綠色 #008000。
紅色 #FF0000。
黃色 #FFFF00。

在計算機(jī)的圖形處理軟件中，一種顏色的數(shù)值通常用RGB值來表示。RGB值是指該顏色中紅（Red）、綠（Green）、藍(lán)（Blue）的成分，通常情況下RGB每個顏色各有256級，用數(shù)字表示為0～255。按照計算，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256=16777 216，也稱為24位色（2的24次方）。從理論上講，紅、綠、藍(lán)3種基色按照不同的比例混合可以調(diào)配出任何一種顏色來。白色的十六進(jìn)制表述為#FFFFFF，它的RGB值為R：255，G：255，B：255，可以寫為RGB（255，255，255）。

網(wǎng)頁安全色

網(wǎng)頁安全色是早期網(wǎng)頁設(shè)計中經(jīng)常提到的概念，是指在不同硬件環(huán)境、不同操作系統(tǒng)及不同瀏覽器中都能夠正常顯示的顏色集合。網(wǎng)頁中的顯示效果與所處的平臺及不同的瀏覽用戶所使用的顯示設(shè)備有很大關(guān)系，選擇使用網(wǎng)頁安全色可以避免原有的顏色失真問題，從而保證這些顏色在任何終端瀏覽用戶顯示設(shè)備上的顯示效果都是相同的。網(wǎng)頁安全色的具體范圍是指當(dāng)紅色（Red）、綠色（Green）、藍(lán)色（Blue）的顏色數(shù)字信號值為0、51、102、153、204、255時構(gòu)成的顏色組合，它一共有6×6×6=216種顏色，其中彩色為210種，非彩色為6種。

因為網(wǎng)頁安全色的色彩范圍有限，很難表達(dá)漸變或者真彩圖像等內(nèi)容，所以在實際設(shè)計過程中并不是一定只使用網(wǎng)頁安全色。而且如今，絕大多數(shù)顯卡和顯示器都使用24位真彩色，網(wǎng)頁設(shè)計師已經(jīng)不再嚴(yán)格堅持只使用網(wǎng)頁安全色，但如果希望網(wǎng)頁能在計算機(jī)以外的設(shè)備（如手機(jī)）上保持足夠出色的顯示品質(zhì)，那么設(shè)計師還是應(yīng)該注意從這216種顏色中尋找配色方案。

2.2.3 網(wǎng)頁色彩搭配的原則和方法

色彩在網(wǎng)頁設(shè)計中主要有劃分頁面區(qū)域、強(qiáng)調(diào)重要信息和增添頁面吸引力的作用。根據(jù)網(wǎng)頁中色彩使用的部位不同，可以分為背景色、基本色、輔助色和強(qiáng)調(diào)色，在網(wǎng)頁設(shè)計過程中注意這幾種色彩彼此之間的平衡、主次和比例，可以得到一個精彩的配色方案，從而實現(xiàn)頁面形式的統(tǒng)一和美觀。目前，常用的配色方案有以下幾種。

有彩色和無彩色的搭配

有彩色和無彩色的搭配能給人帶來較強(qiáng)的視覺沖擊，這種方案能在強(qiáng)調(diào)網(wǎng)站主題的基礎(chǔ)上控制畫面平衡，給瀏覽者留下深刻印象，如圖2-25和圖2-26所示。

圖2-25 有彩色和無彩色的搭配1

圖2-26 有彩色和無彩色的搭配2

相近色的搭配

相近色是指在色相環(huán)上位置比較接近的兩個或幾個顏色，使用相近色的搭配可以給瀏覽者以既協(xié)調(diào)又富于變化的視覺感受，如圖2-27和圖2-28所示。

圖2-27 相近色的搭配1

圖2-28 相近色的搭配2

對比色的搭配

對比色是指色相環(huán)中位置相對的兩種色彩，通常也是兩種可以明顯區(qū)分的色彩。由于對比色有強(qiáng)烈的分離性，在網(wǎng)頁設(shè)計中可以營造出強(qiáng)烈的對比和平衡效果。這是目前網(wǎng)頁設(shè)計中時比較常用的一種配色方案，如圖2-29和圖2-30所示。

除了不同色相對比的這種配色方案外，同一色相不同純度和明度對比的配色方案在網(wǎng)頁設(shè)計中的使用也比較普通。這類配色方案的頁面協(xié)調(diào)一致，通常帶給瀏覽者非常強(qiáng)烈的整體感。圖2-31和圖2-32所示的網(wǎng)頁是選取同一色相但不同明度、不同純度的色彩進(jìn)行搭配的。

圖2-29 對比色的搭配1

圖2-30 對比色的搭配2

圖2-31 同一色相1

圖2-32 同一色相2