3.2 網頁色彩的搭配

打開一個網站，給用戶留下第一印象的既不是網站的內容，也不是網站的版面布局，而是網站的色彩。色彩對人的視覺效果非常明顯。一個網站設計得成功與否，在某種程度上取決于設計者對色彩的運用和搭配。因為網頁設計屬于一種平面效果設計，在平面圖上，色彩的沖擊力是最強的，它最容易給客戶留下深刻印象。

3.2.1 如何處理色彩

色彩是人的視覺最敏感的要素。網頁的色彩處理得好，可以錦上添花，達到事半功倍的效果。

1．色彩的感覺

（1）色彩的冷暖感

紅、橙、黃代表太陽、火焰；藍、青、紫代表大海、晴空；綠、紫代表不冷不暖的中性色；無色系中的黑代表冷，白代表暖。

（2）色彩的軟硬感

高明度、高純度的色彩能給人以軟的感覺，反之則感覺硬。

（3）色彩的強弱感

亮度高的明亮、鮮艷的色彩感覺強，反之則感覺弱。

（4）色彩的興奮與沉靜

紅、橙、黃，偏暖色系，高明度，高純度，對比強的色彩感覺興奮；青、藍、紫，偏冷色系，低明度，低純度，對比弱的色彩感覺沉靜。例如，下圖為橙色大氣漂亮的果農蔬菜基地公司網站

（5）色彩的華麗與樸素

紅、黃等暖色和鮮艷而明亮的色彩能給人以華麗感；青、藍等冷色和渾濁而灰暗的色彩能給人以樸素感。

（6）色彩的進退感

對比強、暖色、明快、高純度的色彩代表前進，反之代表后退。

對色彩的這種認識10多年前就已被國外眾多企業所接受，并由此產生了色彩營銷戰略。許多企業將此作為市場競爭的有利手段和再現企業形象特征的方式，通過設計色彩抓住商機，像綠色的“鱷魚”、紅色的“可口可樂”、紅黃色的“麥當勞”以及黃色的“柯達”等。在歐美和日本等發達國家，設計色彩早就成了一種市場競爭力，并被廣泛使用。

2．色彩的季節性

春季處處一片生機，通常會流行一些活潑跳躍的色彩；夏季氣候炎熱，人們希望涼爽，通常流行以白色和淺色調為主的清爽亮麗的色彩；秋季秋高氣爽，流行的是沉重的暖色調；冬季氣候寒冷，深顏色有吸光、傳熱的作用，人們希望能暖和一點，喜愛穿深色衣服。這就很明顯地形成了四季的色彩流行趨勢，春夏以淺色、明艷色調為主；秋冬以深色、穩重色調為主。每年色彩的流行趨勢都會因此而分成春夏和秋冬兩大色彩趨向。

3．顏色的心理感覺

不同的顏色會給瀏覽者不同的心理感受。

（1）紅色

紅色是一種激奮的色彩，代表熱情、活潑、溫暖、幸福和吉祥。紅色容易引起人們注意，容易使人興奮、激動、熱情、緊張和沖動，也是一種容易造成人視覺疲勞的顏色。

（2）綠色

綠色代表新鮮、充滿希望、和平、柔和、安逸和青春，顯得和睦、寧靜、健康。綠色具有黃色和藍色兩種顏色成分。在綠色中，將黃色的擴張感和藍色的收縮感中和，并將黃色的溫暖感與藍色的寒冷感相抵消。綠色和金黃、淡白搭配，可產生優雅、舒適的氣氛。

（3）藍色

藍色代表深遠、永恒、沉靜、理智、誠實、公正、權威，是最具涼爽、清新特點的色彩。藍色和白色混合，能體現柔順、淡雅、浪漫的氣氛（像天空的色彩）。

（4）黃色

黃色具有快樂、希望、智慧和輕快的個性。它的明度最高，代表明朗、愉快、高貴，是色彩中最為嬌氣的一種色。只要在純黃色中混入少量的其他色，其色相感和色性格均會發生較大程度的變化。

（5）紫色

紫色代表優雅、高貴、魅力、自傲和神秘。在紫色中加入白色，可使其變得優雅、嬌氣，并充滿女性的魅力。

（6）橙色

橙色也是一種激奮的色彩，具有輕快、歡欣、熱烈、溫馨、時尚的效果。

（7）白色

白色代表純潔、純真、樸素、神圣和明快，具有潔白、明快、純真、清潔的感覺。如果在白色中加入其他任何色，都會影響其純潔性，使其性格變得含蓄。

（8）黑色

黑色具有深沉、神秘、寂靜、悲哀、壓抑的感受。

（9）灰色

在商業設計中，灰色具有柔和、平凡、溫和、謙讓、高雅的感覺，具有永遠流行性。在許多的高科技產品中，尤其是和金屬材料有關的，幾乎都采用灰色來傳達高級、科技的形象。使用灰色時，大多利用不同的參差變化組合和其他色彩相配，才不會過于平淡、沉悶、呆板和僵硬。

色彩在飽和度、亮度上略微變化，都會產生不同的感覺。以綠色為例，黃綠色有青春、旺盛的視覺意境，而藍綠色則顯得幽靜、深沉。

3.2.2 網頁色彩搭配原理

色彩搭配既是一項技術性工作，也是一項藝術性很強的工作。因此在設計網頁時，除了要考慮網站本身的特點外，還要遵循一定的藝術規律，從而設計出色彩鮮明、性格獨特的網站。

網頁的色彩是樹立網站形象的關鍵要素之一，色彩搭配卻是網頁設計初學者感到頭疼的問題。網頁的背景、文字、圖標、邊框、鏈接等應該采用什么樣的色彩，搭配什么樣的色彩才能最好地表達出網站的內涵和主題呢？下面介紹網頁色彩搭配的一些原理。

1．色彩的鮮明性

網頁的色彩要鮮明，這樣容易引人注目。一個網站的用色必須要有自己獨特的風格，這樣才能顯得個性鮮明，給瀏覽者留下深刻的印象。

2．色彩的獨特性

要有與眾不同的色彩，使得瀏覽者對網站的印象強烈。

3．色彩的藝術性

網站設計也是一種藝術活動，因此必須遵循藝術規律。在考慮到網站本身特點的同時，應當按照內容決定形式的原則，大膽地進行藝術創新，設計出既符合網站要求，又有一定藝術特色的網站。不同的色彩會產生不同的聯想：藍色想到天空、黑色想到黑夜、紅色想到喜事等，選擇色彩要和網頁的內涵相關聯。例如，下圖為藍色大氣的APP應用產品網站。

4．色彩搭配的合理性

網頁設計雖然屬于平面設計的范疇，但又與其他的平面設計不同。它在遵循藝術規律的同時，還應當考慮人的生理特點。色彩搭配一定要合理，色彩和表達的內容氣氛相適合，能給人一種和諧、愉快的感覺，要避免采用純度很高的單一色彩，這樣容易造成視覺疲勞。

3.2.3 網頁中色彩的搭配

色彩在人們的生活中都是有豐富的感情和含義的。在特定的場合，同一種色彩可以代表不同的含義。色彩總的應用原則應該是“總體協調，局部對比”，就是主頁的整體色彩效果是和諧的，局部、小范圍的地方可以有一些強烈色彩的對比。在色彩的運用上，可以根據主頁內容的需要，分別采用不同的主色調。色彩具有象征性，例如，嫩綠色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬；其次還有職業的標志色，例如，軍警的橄欖綠、醫療衛生的白色，等等。色彩還具有明顯的心理感覺，例如，冷、暖的感覺，進、退的效果，等等。另外，色彩還有民族性，各個民族由于環境、文化、傳統等因素的影響，對于色彩的喜好也存在較大的差異。充分地運用色彩的這些特性，可以使網頁具有深刻的藝術內涵，從而提升網頁的文化品位。

1．色彩的搭配

（1）相近色

色環中相鄰的3種顏色。相近色的搭配給人的視覺效果很舒適、很自然，所以相近色在網站設計中極為常用。

（2）互補色

色環中相對的兩種色彩。對互補色調整一下補色的亮度，有的時候是一種很好的搭配。

（3）暖色

暖色跟黑色調和可以達到很好的效果。暖色一般應用于購物類網站、電子商務網站、兒童類網站等，用以體現商品的琳瑯滿目，兒童類網站的活潑、溫馨等效果。

（4）冷色

冷色一般跟白色調和可以達到很好的效果。冷色一般應用于一些高科技、游戲類網站，主要表達嚴肅、穩重等效果，綠色、藍色、藍紫色等都屬于冷色系列。

（5）色彩均衡

網站讓人看上去舒適、協調，除了文字、圖片等內容的合理排版外，色彩均衡也是相當重要的一個部分，比如一個網站不可能單一地運用一種顏色，所以色彩的均衡是設計者必須要考慮的問題。

|提示|

色彩的均衡包括色彩的位置，每一種色彩所占的比例、面積等。比如，鮮艷明亮的色彩面積應當小一點，讓人感覺舒適、不刺眼，這就是一種均衡的色彩搭配。

下圖所示的網站，雖然使用了多種顏色，但是各個顏色之間的合理搭配，讓網站整體看起來很協調。

2．非彩色的搭配

黑白是最基本和最簡單的搭配，白字黑底、黑底白字都非常清晰明了。灰色是萬能色，可以和任何色彩搭配，也可以幫助兩種對立的色彩和諧過渡。如果實在找不出合適的色彩，那么用灰色試試，效果絕對不會太差。

3.2.4 網頁元素的色彩搭配

為了讓網頁設計得更靚麗、更舒適，增強頁面的可閱讀性，必須合理、恰當地運用與搭配頁面各元素間的色彩。

1．網頁導航條

網頁導航條是網站的指路方向標，瀏覽者要在網頁間跳轉、要了解網站的結構、要查看網站的內容，都必須使用導航條。可以使用稍微具有跳躍性的色彩吸引瀏覽者的視線，使其感覺網站清晰明了、層次分明。

2．網頁鏈接

一個網站不可能只有一頁，所以文字與圖片的鏈接是網站中不可缺少的部分。尤其是文字鏈接，因為鏈接要區別于文字，所以鏈接的顏色不能跟文字的顏色一樣。要讓瀏覽者快速地找到網站鏈接，設置獨特的鏈接顏色是一種引導瀏覽者點擊鏈接的好辦法。

3．網頁文字

如果網站中使用了背景顏色，就必須要考慮到背景顏色的用色與前景文字的搭配問題。一般網站側重的是文字，所以背景可以選擇純度或者明度較低的色彩，文字用較為突出的亮色，讓人一目了然。

4．網頁標志

網頁標志是宣傳網站最重要的部分之一，所以這部分一定要在頁面上突出、醒目。可以將Logo和Banner做得鮮亮一些，也就是說，在色彩方面要與網頁的主題色分離開來。有時為了更突出，也可以使用與主題色相反的顏色。

3.2.5 網頁色彩搭配的技巧

色彩的搭配是一門藝術，靈活運用它能讓網頁更具親和力。要想制作出漂亮的網頁，需要靈活地運用色彩加上自己的創意和技巧。下面是網頁色彩搭配的一些常用技巧。

1．使用單色

盡管網站設計要避免采用單一色彩，以免產生單調的感覺，但通過調整色彩的飽和度和透明度，也可以產生變化，使網站避免單調，做到色彩統一有層次感。

2．使用鄰近色

所謂鄰近色，就是在色帶上相鄰近的顏色，如綠色和藍色、紅色和黃色就互為鄰近色。采用鄰近色設計網頁可以使網頁避免色彩雜亂，易于達到頁面的色彩豐富、和諧統一。

3．使用對比色

對比色可以突出重點，產生強烈的視覺效果。通過合理使用對比色，能夠使網站特色鮮明、重點突出。在設計時，一般以一種顏色為主色調，對比色作為點綴，這樣可以起到畫龍點睛的作用。

4．黑色的使用

黑色是一種特殊的顏色，如果使用恰當、設計合理，往往能產生很強的藝術效果。黑色一般用來作為背景色，與其他純度的色彩搭配使用。

5．背景色的使用

背景的顏色不要太深，否則會顯得過于厚重，這樣會影響整個頁面的顯示效果。一般可采用素淡清雅的色彩，要避免采用花紋復雜的圖片和純度很高的色彩作為背景色。同時，背景色要與文字的色彩對比強烈一些。但也有例外，如黑色的背景襯托亮麗的文本和圖像，會給人一種另類的感覺。

6．色彩的數量

一般初學者在設計網頁時往往會使用多種顏色，使網頁變得很“花”，缺乏統一和協調，缺乏內在的美感，給人一種繁雜的感覺。事實上，網站用色并不是越多越好，一般應控制在4種色彩以內，然后可以通過調整色彩的各種屬性來產生顏色的變化，保持整個網頁的色調統一。

7．要和網站內容匹配

應當了解網站所要傳達的信息和品牌，進而選擇可以加強這些信息的顏色。如在設計一個強調穩健的金融機構時，就要選擇冷色系、柔和的顏色，像藍、灰或綠，如果使用暖色系或活潑的顏色，可能會破壞該網站的品牌。

8．圍繞網頁主題

色彩要能烘托出主題。根據主題確定網站顏色，同時還要考慮網站的訪問對象，文化的差異也會使色彩產生非預期的反應。還有，不同地區與不同年齡層對顏色的反應亦會有所不同。年輕族一般比較喜歡飽和色，但這樣的顏色卻引不起高年齡層人群的興趣。

此外，白色是網站用得最普遍的一種顏色。很多網站甚至會留出大塊的白色空間作為網站的一個組成部分，這就是留白藝術。很多設計性網站較多地運用留白藝術，給人一個遐想的空間，讓人感覺心情舒適、暢快。恰當的留白對于協調頁面的均衡會起到相當大的作用。

總之，色彩的使用并沒有一定的法則，如果一定要用某個法則去套，效果只會適得其反。色彩的運用還與每個人的審美觀、喜好、知識層次等密切相關。一般應先確定一種能體現主題的主體色，然后根據具體的需要應用顏色的近似和對比來完成整個頁面的配色方案。整個頁面在視覺上應該是一個整體，以達到和諧、悅目的視覺效果。