鄧晨

摘要：該文簡要介紹了色彩的基本知識(shí)，提出了網(wǎng)頁色彩搭配的基本原理、技巧及內(nèi)涵，最后明確了網(wǎng)頁色彩配色的基本方法。

關(guān)鍵詞：色彩；網(wǎng)頁配色；網(wǎng)站；色彩搭配

中圖分類號(hào)：TP311文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1009-3044(2012)02-0445-03

On the Method of Web Page Color Schemes

DENG Chen

(School of Agriculture Guangxi Yulin, Yulin 537000, China)

Abstract: This paper briefly introduces the basic knowledge of color, presents a webpage with color matching principle, technique and connotation, finally clear the web color basic method.

Key words: color; page of color; Website; color matching

我們的世界是五彩斑斕、多姿多彩的。在當(dāng)今信息時(shí)代的飛速發(fā)展時(shí)期，網(wǎng)絡(luò)對(duì)于人們生活的影響越來越大。人們不再局限于簡單的文字與圖片，在要求網(wǎng)頁信息量豐富的同時(shí)，還要看上去漂亮、舒適。所以如今的設(shè)計(jì)者不僅要掌握基本的網(wǎng)站制作技術(shù)，還需要掌握網(wǎng)站的風(fēng)格，配色等設(shè)計(jì)藝術(shù)。其中色彩在網(wǎng)站設(shè)計(jì)中占據(jù)相當(dāng)重要的地位。

1色彩的基礎(chǔ)知識(shí)

1.1色彩的一些基本概念

自然界色彩是多種多樣的，比如玫瑰是紅色的，大海是藍(lán)色的，桔子是橙色的……但是最基本的有三種（紅，黃，藍(lán)），其它的色彩都可以由這三種色彩調(diào)和而成。我們稱這三種色彩為“三原色”。

現(xiàn)實(shí)生活中的色彩可以分為彩色和非彩色。其中黑白灰屬于非彩色系列。其它的色彩都屬于彩色。任何一種彩色具備三個(gè)特征：色相，明度和純度。其中非彩色只有明度屬性。

色相，指的是色彩的名稱。這是色彩最基本的特征，是一種色彩區(qū)別于另一種色彩的最主要的因素。比如說紫色，綠色，黃色等等都代表了不同的色相。同一色相的色彩，調(diào)整一下亮度，或者純度很容易搭配，比如，深綠，暗綠，草綠，亮綠。

明度，也叫亮度，指的是色彩的明暗程度，明度越大，色彩越亮。比如一些購物，兒童類網(wǎng)站。用的是一些鮮亮的顏色，讓人感覺絢麗多姿，生氣勃勃。明度越低，顏色越暗。主要用于一些游戲類網(wǎng)站，充滿神秘感；一些個(gè)人站長為了體現(xiàn)自身的個(gè)性，也可以運(yùn)用一些暗色調(diào)來表達(dá)個(gè)人的一些孤僻，或者憂郁等性格。有明度差的色彩更容易調(diào)和。如紫色（#993399）跟黃色（#ffff00），暗紅（#cc3300）跟草綠（#99cc00），暗藍(lán)（#0066cc）跟橙色（#ff9933）等。圖1中的（1）就是明度由高到低變化的例子。

純度，指色彩的鮮艷程度，純度高的色彩純，鮮亮。純度底的色彩暗淡，含灰色。如圖1中的（2）是純度從低到高的變化。

相近色，色環(huán)中相鄰的三種顏色。如圖2中的黃綠色，黃色和桔黃色。相近色的搭配給人的視覺效果很舒適，很自然。所以相近色在網(wǎng)站設(shè)計(jì)中極為常用。

互補(bǔ)色，色環(huán)中相對(duì)的兩種色彩。如圖3中的亮綠色跟紫色，另外如紅色跟綠色，藍(lán)色和橙色等。對(duì)互補(bǔ)色，調(diào)整一下補(bǔ)色的亮度，有時(shí)候是一種很好的搭配。就拿藍(lán)色跟橙色來打個(gè)比方吧，看圖4，調(diào)整了藍(lán)色的亮度以后其搭配效果是不是更好呢？補(bǔ)色在網(wǎng)站設(shè)計(jì)中用得也極為普遍。

（1）明度變化（2）純度變化

圖1

圖2相近色

圖3互補(bǔ)色

圖4補(bǔ)色亮度調(diào)節(jié)

暖色，如圖5中的橙色，紅色，紫色等都屬于暖色系列。暖色跟黑色調(diào)和可以達(dá)到很好的效果。暖色一般應(yīng)用于購物類網(wǎng)站，電子商務(wù)網(wǎng)站，兒童類網(wǎng)站等等，用以體現(xiàn)商品的琳瑯滿目，兒童類網(wǎng)站的活潑，溫馨等等效果。

冷色，如圖6中的綠色，藍(lán)色，藍(lán)紫色等等都屬于冷色系列。冷色一般跟白色調(diào)和可以達(dá)到一種很好的效果。冷色一般應(yīng)用于一些高科技，游戲類網(wǎng)站，主要表達(dá)嚴(yán)肅，穩(wěn)重等效果。

圖5暖色

圖6冷色

色彩均衡，網(wǎng)站讓人看上去舒適、協(xié)調(diào)，除了文字、圖片等內(nèi)容的合理排版，色彩的均衡也是相當(dāng)重要的一個(gè)部分。比如一個(gè)網(wǎng)站不可能單一的運(yùn)用一種顏色，所以色彩的均衡問題是設(shè)計(jì)者必須要考慮的問題。色彩的均衡，包括色彩的位置，每種色彩所占的比例，面積等等。比如鮮艷明亮的色彩面積應(yīng)小一點(diǎn)，讓人感覺舒適，不刺眼；這就是一種均衡的色彩搭配。

1.2色彩的聯(lián)想

色彩在人們的生活中都是有豐富的感情和含義的。比如紅色讓人聯(lián)想到玫瑰，聯(lián)想到喜慶，聯(lián)想到興奮。白色讓人聯(lián)想到純潔，干凈，簡潔；紫色象征著女性化，高雅，浪漫；藍(lán)色象征高科技，穩(wěn)重，理智；橙色代表了歡快，甜美，收獲；綠色代表了充滿青春的活力，舒適，希望等等。當(dāng)然不是說某種色彩一定代表了什么含義。在特定的場合下，同種色彩可以代表不同的含義。

1.3黑白灰的運(yùn)用

黑白灰是萬能色，可以跟任意一種色彩搭配。當(dāng)你為某種色彩的搭配苦惱的時(shí)候，不防試試用黑白灰。當(dāng)你覺得兩種色彩的搭配不協(xié)調(diào)，試試加入黑色，或者灰色，或許會(huì)收到意想不到的效果。

對(duì)一些明度較高的網(wǎng)站，配以黑色，可以適當(dāng)?shù)亟档推涿鞫取?/p>

白色是網(wǎng)站使用最普遍的一種顏色，很多網(wǎng)站甚至留出大塊的白色空間，作為網(wǎng)站的一個(gè)組成部分，這就是留白藝術(shù)。很多設(shè)計(jì)類網(wǎng)站較多運(yùn)用留白藝術(shù)。留白，給人一個(gè)遐想的空間，讓人感覺心情舒適，暢快；恰當(dāng)?shù)牧舭讓?duì)于協(xié)調(diào)頁面的均衡起到相當(dāng)大的作用。

2網(wǎng)頁配色的基本知識(shí)

2.1網(wǎng)頁色彩搭配的原理

1)色彩的鮮明性。網(wǎng)頁的色彩要鮮艷，容易引人注目。

2)色彩的獨(dú)特性。要有與眾不同的色彩，使得大家對(duì)你的印象強(qiáng)烈。

3)色彩的合適性。就是說色彩和你表達(dá)的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點(diǎn)的柔性。

4)色彩的聯(lián)想性。不同色彩會(huì)產(chǎn)生不同的聯(lián)想，藍(lán)色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和你網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。

5)網(wǎng)頁色彩掌握的過程。隨著網(wǎng)頁制作經(jīng)驗(yàn)的積累，我們用色有這樣的一個(gè)趨勢：單色→五彩繽紛→標(biāo)準(zhǔn)色→單色。一開始因?yàn)榧夹g(shù)和知識(shí)缺乏，只能制作出簡單的網(wǎng)頁，色彩單一；在有一定基礎(chǔ)和材料后，希望制作一個(gè)漂亮的網(wǎng)頁，將自己收集的最好的圖片，最滿意的色彩堆砌在頁面上；但是時(shí)間一長，卻發(fā)現(xiàn)色彩雜亂，沒有個(gè)性和風(fēng)格；第三次重新定位自己的網(wǎng)站，選擇好切合自己的色彩，推出的站點(diǎn)往往比較成功；當(dāng)最后設(shè)計(jì)理念和技術(shù)達(dá)到頂峰時(shí)，則又返樸歸真，用單一色彩甚至非彩色就可以設(shè)計(jì)出簡潔精美的網(wǎng)站。

2.2網(wǎng)頁色彩搭配的技巧

1)用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，(也就是將色彩變淡或則加深)，產(chǎn)生新的色彩，用于網(wǎng)頁，這樣的頁面看起來色彩統(tǒng)一，有層次感。

2)用兩種色彩。先選定一種色彩，然后選擇它的對(duì)比色(在photoshop里按ctrl+shift+I)。這樣制作出來的整個(gè)頁面色彩豐富但不花稍。

3)用一個(gè)色系。簡單的說就是用一個(gè)感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)；確定色彩的方法因人而異。

4)用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺很“跳”。在網(wǎng)頁配色中，忌諱的是：（1）不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)。（2）背景和前文的對(duì)比盡量要大，(絕對(duì)不要用花紋繁復(fù)的圖案作背景)，以便突出主要文字內(nèi)容。

2.3網(wǎng)頁色彩搭配的內(nèi)涵

1)紅色的色感溫暖，性格剛烈而外向，是一種對(duì)人刺激性很強(qiáng)的色。紅色容易引起人的注意，也容易使人興奮、激動(dòng)、緊張、沖動(dòng)、還是一種容易造成視覺疲勞的色。

（1）在紅色中加入少量的黃，會(huì)使其熱力強(qiáng)盛，趨于躁動(dòng)、不安。

（2）在紅色中加入少量的藍(lán)，會(huì)使其熱力減弱，趨于文雅、柔和。

（3）在紅色中加入少量的黑，會(huì)使其性格變的沉穩(wěn)，趨于厚重、樸實(shí)。

（4）在紅中加入少量的白，會(huì)使其性格變的溫柔，趨于含蓄、羞澀、嬌嫩。

2)黃色的性格冷漠、高傲、敏感、具有擴(kuò)張和不安寧的視覺印象。黃色是各種色彩中，最為嬌氣的一種色。只要在純黃色中混入少量的其它色，其色相感和性格均會(huì)發(fā)生較大程度的變化。

（1）在黃色中加入少量的藍(lán)，會(huì)使其轉(zhuǎn)化為一種鮮嫩的綠色。其高傲的性格也隨之消失，趨于一種平和、潮潤的感覺。

（2）在黃色中加入少量的紅，則具有明顯的橙色感覺，其性格也會(huì)從冷漠、高傲轉(zhuǎn)化為一種有分寸感的熱情、溫暖。

（3）在黃色中加入少量的黑，其色感和性格變化最大，成為一種具有明顯橄欖綠的復(fù)色印象。其性格也變得成熟、隨和。

（4）在黃色中加入少量的白，其色感變的柔和，其性格中的冷漠、高傲被淡化，趨于含蓄，易于接近。

3)藍(lán)色的色感冷嘲熱諷，性格樸實(shí)而內(nèi)向，是一種有助于人頭腦冷嘲熱諷靜的色。藍(lán)色的樸實(shí)、內(nèi)向性格，常為那些性格活躍、具有較強(qiáng)擴(kuò)張力的色彩，提供一個(gè)深遠(yuǎn)、廣埔、平靜的空間，成為襯托活躍色彩的友善而謙虛的朋友。藍(lán)色還是一種在淡化后仍然似能保持較強(qiáng)個(gè)性的色。如果在藍(lán)色中分別加入少量的紅、黃、黑、橙、白等色，均不會(huì)對(duì)藍(lán)色的性格構(gòu)成較明顯的影響力。

（1）如果在橙色中黃的成份較多，其性格趨于甜美、亮麗、芳香。

（2）在橙色中混入小量的白，可使橙色的知覺趨于焦躁、無力。

4)綠色是具有黃色和藍(lán)色兩種成份的色。在綠色中，將黃色的擴(kuò)張感和藍(lán)色的收縮感相中庸，將黃色的溫暖感與藍(lán)色的寒冷感相抵消。這樣使得綠色的性格最為平和、安穩(wěn)。是一種柔順、恬靜、潢足、優(yōu)美的色。

（1）在綠色中黃的成份較多時(shí)，其性格就趨于活潑、友善，具有幼稚性。

（2）在綠色中加入少量的黑，其性格就趨于莊重、老練、成熟。

（3）在綠色中加入少量的白，其性格就趨于潔凈、清爽、鮮嫩。

5)紫色的明度在有彩色的色料中是最低的。紫色的低明度給人一種沉悶、神秘的感覺。

（1）在紫色中紅的成份較多時(shí)，其知覺具有壓抑感、威脅感。

（2）在紫色中加入少量的黑，其感覺就趨于沉悶、傷感、恐怖。

（3）在紫色中加入白，可使紫色沉悶的性格消失，變得優(yōu)雅、嬌氣，并充滿女性的魅力。

6)白色的色感光明，性格樸實(shí)、純潔、快樂。白色具有圣潔的不容侵犯性。如果在白色中加入其它任何色，都會(huì)影響其純潔性，使其性格變的含蓄。

（1）在白色中混入少量的紅，就成為淡淡的粉色，鮮嫩而充滿誘惑。

（2）在白色中混入少量的黃，則成為一種乳黃色，給人一種香膩的印象。

（3）在白色中混入少量的藍(lán)，給人感覺清冷、潔凈。

（4）在白色中混入少量的橙，有一種干燥的氣氛。

（5）在白色中混入少量的綠，給人一種稚嫩、柔和的感覺

（6）在白色中混入少量的紫，可誘導(dǎo)人聯(lián)想到淡淡的芳香

3網(wǎng)頁色彩配色的基本方法

3.1確定網(wǎng)站的主題色

一個(gè)網(wǎng)站不可能單一的運(yùn)用一種顏色，讓人感覺單調(diào)，乏味；但是也不可能將所有的顏色都運(yùn)用到網(wǎng)站中，讓人感覺輕浮，花俏。一個(gè)網(wǎng)站必須有一種或兩種主題色，不至于讓客戶迷失方向，也不至于單調(diào)，乏味。所以確定網(wǎng)站的主題色也是設(shè)計(jì)者必須考慮的問題之一。

一個(gè)頁面盡量不要超過4種色彩，用太多的色彩讓人沒有方向，沒有側(cè)重。當(dāng)主題色確定好以后，考慮其它配色時(shí)，一定要考慮其它配色與主題色的關(guān)系，要體現(xiàn)什么樣的效果。另外哪種因素占主要地位，是明度，純度還是色相。

3.2頁面各要素

在了解了顏色的一些基本概念及顏色的一些搭配方法后，在具體運(yùn)用到網(wǎng)頁中，各要素的色彩搭配主要體現(xiàn)在以下方面：

3.2.1背景與文字

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

當(dāng)然，有些網(wǎng)站為了讓瀏覽者對(duì)網(wǎng)站留有深刻的印象，他在背景上作文章。比如一個(gè)空白頁的某一個(gè)部分用了很亮的一個(gè)大色塊，是不是讓你豁然開朗呢！此時(shí)他為了吸引瀏覽者的視線，突出的是背景，所以文字就要顯得暗一些，這樣文字才能跟背景分離開來，便于瀏覽者閱讀文字。

3.2.2 LOGO和BANNER

LOGO和BANNER是宣傳網(wǎng)站最重要的部分之一，所以這兩個(gè)部分一定要在頁面上突迎而出。怎樣做到這一點(diǎn)呢？我們將LOGO和BANNER做的鮮亮一些，也就是色彩方面跟網(wǎng)頁的主題色分離開來。有時(shí)候?yàn)榱烁怀觯部梢允褂门c主題色相反的顏色。

3.2.3導(dǎo)航，小標(biāo)題

導(dǎo)航，小標(biāo)題是網(wǎng)站的指路燈。瀏覽者要在網(wǎng)頁間跳轉(zhuǎn)，要了解網(wǎng)站的結(jié)構(gòu)，網(wǎng)站的內(nèi)容，都必須通過導(dǎo)航或者頁面中的一些小標(biāo)題。所以我們可以使用稍微具有跳躍性的色彩，吸引瀏覽者的視線，讓他們感覺網(wǎng)站清晰，明了，層次分明。想往哪里走都不會(huì)迷失方向。

3.2.4鏈接顏色設(shè)置

一個(gè)網(wǎng)站不可能只是單一的一頁，所以文字與圖片的鏈接是網(wǎng)站中不可缺少的一部分。這里特別指出文字的鏈接，因?yàn)殒溄訁^(qū)別于文字，所以鏈接的顏色不能跟文字的顏色一樣。現(xiàn)代人的生活節(jié)奏相當(dāng)快，不可能浪費(fèi)太多的時(shí)間在尋找你網(wǎng)站的鏈接上。設(shè)置了獨(dú)特的鏈接顏色，讓人感覺他的獨(dú)特性，自然而然好奇心必然趨使他移動(dòng)鼠標(biāo)，點(diǎn)擊鼠標(biāo)。

總之，為了你的頁面更美觀，更舒適，為了增強(qiáng)你的頁面的可閱讀性，必須合理，恰當(dāng)?shù)剡\(yùn)用與搭配頁面各要素間的色彩。

參考文獻(xiàn):

[1]呂永杰,張蕓.任我虛擬——精美網(wǎng)頁設(shè)計(jì)與產(chǎn)品全景設(shè)計(jì)[M].北京:希望電子出版社,2002.

[2]董黎明.Internet網(wǎng)頁設(shè)計(jì)實(shí)用手冊(cè)[M].上海:上?？茖W(xué)技術(shù)文獻(xiàn)出版社,1999.

[3]權(quán)智殷，設(shè)計(jì)師談網(wǎng)頁色彩與風(fēng)格[M].北京:電子工業(yè)出版社, 2005.

[4]曹金明，程超，王駿網(wǎng)頁設(shè)計(jì)與配色[M].北京:紅旗出版社,2005.

[5]李強(qiáng)華[譯].Web Color Design:設(shè)計(jì)師談網(wǎng)頁配色（全彩）[J].I.R.I色彩研究所.