2.2 網(wǎng)頁(yè)配色

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

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

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

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

色彩的視錯(cuò)覺(jué)

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

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

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

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

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

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

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

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

色彩的情感

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

色彩有著豐富的感情內(nèi)涵，因?yàn)樗鵁o(wú)窮無(wú)盡的色相和深淺濃淡的關(guān)系，通過(guò)這些關(guān)系相互搭配和組合，可以形成各種各樣的色彩氛圍。

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

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

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

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

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

網(wǎng)頁(yè)安全色

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

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

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

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

有彩色和無(wú)彩色的搭配

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

圖2-25 有彩色和無(wú)彩色的搭配1

圖2-26 有彩色和無(wú)彩色的搭配2

相近色的搭配

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

圖2-27 相近色的搭配1

圖2-28 相近色的搭配2

對(duì)比色的搭配

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

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

圖2-29 對(duì)比色的搭配1

圖2-30 對(duì)比色的搭配2

圖2-31 同一色相1

圖2-32 同一色相2