網(wǎng)站配色方案實例顏色的使用在網(wǎng)頁制作中起著非常關(guān)鍵的作用，有很多網(wǎng)站以其成功的色彩搭配令人過目不忘。但是對于剛開始學(xué)習(xí)制作網(wǎng)頁的人來說，往往不容易駕馭好網(wǎng)頁的顏色搭配。除了學(xué)習(xí)各種色彩理論和方法之外，

網(wǎng)站配色方案實例

顏色的使用在網(wǎng)頁制作中起著非常關(guān)鍵的作用，有很多網(wǎng)站以其成功的色彩搭配令人過目不忘。但是對于剛開始學(xué)習(xí)制作網(wǎng)頁的人來說，往往不容易駕馭好網(wǎng)頁的顏色搭配。除了學(xué)習(xí)各種色彩理論和方法之外，筆者認為多學(xué)習(xí)一些著名網(wǎng)站的用色方法，對于我們制作美麗的網(wǎng)頁可以起到事半功倍的作用。所以，筆者總結(jié)了一些著名網(wǎng)站的顏色搭配方法，這些方法可以讓我們的學(xué)習(xí)少走彎路，快速提高我們的網(wǎng)頁制作水平。

一、網(wǎng)頁顏色原理和象征意義

我們所有網(wǎng)頁上顏色，在HTML 下看到的是以顏色英文單詞或者十六進制的表示方法（如#000000表示為黑色）。不同的顏色有著不同的含義，給人各種豐富的感覺和聯(lián)想。

紅色：熱情、奔放、喜悅、莊嚴

黃色：高貴、富有、燦爛、活潑

黑色：嚴肅、夜晚、沉著

白色：純潔、簡單、潔凈

藍色：天空、清爽、科技

綠色：植物、生命、生機

灰色：莊重、沉穩(wěn)

紫色：浪漫、富貴

棕色：大地、厚樸

二、網(wǎng)頁顏色的使用風(fēng)格

不同的網(wǎng)站有著自己不同的風(fēng)格，也有著自己不同的顏色。網(wǎng)站使用顏色大概分為幾種類型：

1、 公司色

在現(xiàn)在企業(yè)中，公司的CI 形象顯得尤其重要，每一個公司的CI 設(shè)計必然要有標準的顏色。比如新浪網(wǎng)的主色調(diào)是一種介于淺黃和深黃之間的顏色，同時形象宣傳、海報、廣告使用的顏色都和網(wǎng)站的顏色一致。再比如國富投資公司的主色調(diào)是C ：100，M ：60，Y ：0，K ：0。這樣的顏色使用到網(wǎng)站上顯得色調(diào)自然、底蘊深厚。

2、 風(fēng)格色

許多網(wǎng)站使用顏色秉承的是公司的風(fēng)格。比如海爾使用的顏色是一種中性的綠色，即充滿朝氣有不失自己的創(chuàng)新精神。女性網(wǎng)站使用粉紅色的較多，大公司使用藍色的較多??這些都是在突出自己的風(fēng)格。

3、 習(xí)慣色

這些網(wǎng)站的顏色使用很大一部分是憑自己的個人愛好，以個人網(wǎng)站較多使用，比如自己喜歡紅色、紫色、黑色等，在做網(wǎng)站的時候就傾向于這種顏色。每一個人都有自己喜歡的顏色，因此這種類型稱為習(xí)慣色。

三、設(shè)計用色十例

以下我將分別介紹十個配色較好的網(wǎng)站，大家可以學(xué)習(xí)和借鑒一下，培養(yǎng)對色彩的敏感以及獨到的審美能力。

1）這是個大型的NBA 網(wǎng)站。通常我們經(jīng)?？吹降拇祟惥W(wǎng)站以白色為背景，但是這個網(wǎng)站卻用灰黑色RGB 為（48，48，48/#333333）（以下顏色都用RGB 表示），文章標題用色為RGB 為（203，201，153/#CCCC99），菜單使用的RGB 為（112，119，112/#707770）。這樣的配色可以顯示獨特的個性，又不失大型網(wǎng)站的風(fēng)采。如圖

1

圖1

2）下面是一個娛樂類的綜合性網(wǎng)站UGO ，他的配色方案是背景色為黑色RGB 為（0，0，0）中嵌套R GB （0，0，82），字體白色RGB （255,255,255）, 菜單為RGB （77,114,159）。這樣的雖以黑藍為主色調(diào)，但是配以漂亮的圖片，給人的感覺是生機盎然，充滿了互動色彩和青春氣息。如圖2。

圖2

3）下面的這個網(wǎng)站是大名鼎鼎的微軟公司網(wǎng)站，微軟不僅軟件做的好，連網(wǎng)頁制作也是世界一流。他的每一個網(wǎng)頁都是制作的樣板。從網(wǎng)頁我們就可以看出微軟公司的風(fēng)格、作風(fēng)，以及雄厚的實力。背景

顏色使用藍色RGB 為（0，151，254），菜單為黑色RGB （0，0，11），菜單為灰色RGB （200，200，200），字體為黑色RGB （0，0，0），如圖3。

圖3

4) 現(xiàn)在介紹的網(wǎng)站相對簡單，但是她的用色也別具匠心，現(xiàn)在我們來看一看，整體上使用的是白色R GB （255，255，255），輔助色為RGB （79，88，95），菜單色為RGB （48，64，64）和RGB （0，81，111）字體使用的是RGB （83，86，91）。雖然簡單，但顏色搭配非常的科學(xué)合理。如圖

4

圖4

5）下面的網(wǎng)站采用黃色調(diào)為主，很體現(xiàn)公司的個性，現(xiàn)在我們就來看一看她的顏色搭配。主色調(diào)為黃色RGB 為（255，199，48/#FFC730），輔助色調(diào)為RGB （49，102，46）字體為棕色RGB （153，103，0），中間再配以抽象的圖片，顯得個性十足但又不單調(diào)。如圖

5

圖5

6）橘紅色如果運用得當(dāng)?shù)脑捠且环N非常使用于網(wǎng)頁上的顏色。下面的這個網(wǎng)站就是一個非常著名的例子。他的主色調(diào)為RGB （255，151，0）輔助色調(diào)為RGB （255，103，4），菜單RGB 為（252，200，0）。字體使用黑色RGB 為（0，0，0）。此種配色顯得主人較為前衛(wèi)，色彩熱烈，給人的震懾力較強。如圖6

圖6

7）鮮紅色也是一種震撼感很強的顏色，如果搭配不當(dāng)，也可能使網(wǎng)站沒有風(fēng)格和特點。下面的這個網(wǎng)站就是使用紅色比較好的網(wǎng)站。我們來看看他的顏色搭配。他使用的主色調(diào)是RGB （200，9，0），配以抽象的圖形，文字使用的是RGB （213，229，167）顯得美觀而不失獨特，大氣而不逼人。如圖

7

圖7

8）下面介紹的這種色調(diào)是我們制作網(wǎng)頁的時候不會經(jīng)常用到的顏色，如果使用到你的網(wǎng)頁中，肯定會給人耳目一新的感覺。他的主色調(diào)為RGB （144，151，97）輔助色調(diào)為RGB （173，168，112）邊飾為黑色RGB （0，0，0）字體為黑色RGB （0，0，0）。這樣的搭配顯得風(fēng)格獨特，顏色和諧而莊重。如圖

8

圖8

9）下面的設(shè)計更加的簡單化，但是顏色的使用使網(wǎng)頁并不呆板，反而讓人感覺到一股濃濃的生活和家庭氣氛，使人置身于美麗和愛中。他的主體是由兩種顏色構(gòu)成，分別是RGB （239，200，161）和RGB （201，254，200）。如此簡單，但是卻栩栩如生，躍然網(wǎng)上。如圖9

圖9

10）下面舉出這個例子是想證明一個道理——只要你有足夠的想象力，你就能夠設(shè)計出漂亮的網(wǎng)頁。目前在網(wǎng)上非常流行一句話就是網(wǎng)頁的搭配不要超過四種主要顏色，否則就有雜亂之感。下面的這個網(wǎng)站遠遠的超過了三種顏色，但是她并不失美麗。因此重要的還是色彩的駕馭能力。下面這個例子的菜單就使用了7種顏色，但是我們看到的網(wǎng)頁并不雜亂，相反感覺作者很有創(chuàng)意。如圖

10

圖10

網(wǎng)站設(shè)計中配色方案的使用

不論你做什么樣的設(shè)計，色彩都是一個不容忽視的問題。色彩以一種“隱蔽”的方式傳達的各種信息，這些信息會影響觀看者的心理和感受，左右他們的判斷和選擇，色彩對于設(shè)計而言實在太重要。這篇文章就要比較系統(tǒng)地介紹一些在網(wǎng)頁設(shè)計中如何使用色彩的入門知識。 色彩是設(shè)計者的得力助手，前提是應(yīng)用得當(dāng)。對于網(wǎng)站設(shè)計而言，色彩的重要性尤其突出，不過經(jīng)常被粗心的站長忽視。我們經(jīng)常說“第一映像最重要”，于是設(shè)計網(wǎng)站時，設(shè)計者經(jīng)常會花很多精力制作一個“富于沖擊力”的LOGO 或者BANNER ，當(dāng)然，它們很重要。但是，訪問者訪問網(wǎng)站時的第一映像實際上并不來自這些LOGO 或者BANNER ，而是——色彩！ 好了，在了解了色彩對于網(wǎng)站設(shè)計的重要性之后，我們開始探尋色彩的奧秘。 色彩入門

首先讓我們熟悉一下色彩的一些基本概念。

三原色

一切顏色都來自三原色：紅、黃、藍。

在這個圓環(huán)中，相鄰的兩個原色相混合可以得到另外三個比較重要的顏色（下文將其稱為二級原色）：紅 黃=橙，紅 藍=紫，藍 黃=綠

讓我們再深入一步，三原色和三種二級原色可以進一步混合得到更多的顏色，分別是橙紅色、紫紅色、藍紫色、藍綠色、橘黃色和黃綠色。這六種顏色可以稱為三級原色。

按照同樣的方式不斷進行下去，這個圓環(huán)中顏色之間的分隔線就會消失，得到下圖所示的“色彩圓環(huán)”，在一些繪圖程序的調(diào)色板中我們可以看到這樣的色彩圓環(huán)。

但是這個圓環(huán)仍然沒有涵蓋所有的顏色，對于圓環(huán)中的每一種顏色還有飽和度、亮度和灰度等的變化。也就是說，將上述圓環(huán)中的任意一種顏色和黑色、白色、灰色按照不同比例混合就可以得到更多的顏色，下面將詳細介紹。

常用的色彩術(shù)語

飽和度

某種顏色的飽和度是指這種顏色所包含的基本顏色的多少。例如RGB 值為（0，0，255）的藍色是純藍色，他的飽和度是100。隨著飽和度的降低，顏色會越來越接近灰色。

灰度

基本色彩和黑色進行不同程度的混合可以得到不同的灰度，例如

亮度

基本顏色和白色進行不同程度的混合可以得到不同的亮度，例如：:

色調(diào)

基本顏色和灰色進行不同程度的混合可以得到不同的色調(diào)，例如：

色彩方案的種類

不同網(wǎng)站應(yīng)當(dāng)使用不同的色彩方案，與站點的主題相吻合的色彩方案決不僅僅可以讓網(wǎng)站“更加好看”，更重要的是在訪問者心目中建立對這個網(wǎng)站的感性認識。所以，色彩方案的選擇決不能草率，而且色彩方案絕對是網(wǎng)站建設(shè)的第一個步驟。如果選擇色彩方案時過于草率，甚至根本不對網(wǎng)站進行色彩方案的整體規(guī)劃，你將不可能制作出一個真正優(yōu)秀的網(wǎng)站。 例如，一個銷售嬰兒用品的網(wǎng)站應(yīng)當(dāng)使用比較活潑的色彩方案，而一個藝術(shù)網(wǎng)站則應(yīng)當(dāng)使用比較執(zhí)重的方案。

按照色彩方案中色彩使用方式的不同，我們可以將色彩方案劃分成多種類型，單色方案、相似色方案、補色方案和三合一色方案。

單色方案

單色方案是指在網(wǎng)站設(shè)計中終止使用一種基本顏色，為避免單調(diào)，我們可以通過調(diào)整這種基本顏色的灰度和亮度來得到更多的顏色，由于整個顏色方案中事實上只有一種基色，因此這種方案稱為單色方案。例如：

在Photoshop 的色彩選擇窗口中，我們可以這樣進行建立單色方案。首先調(diào)整H （也就是Hue 的縮寫）后面的值來調(diào)整色調(diào)。注意，H 的單位是度，也就是基本顏色在顏色環(huán)上所處位置的角度。

設(shè)置好H 的值之后，再調(diào)整B 后面的數(shù)字調(diào)整亮度以及S 后面的數(shù)字調(diào)整飽和度。注意，其中B 和S 的單位是百分比，也就是向基本顏色中添加白色和黑色的百分比。這樣就可以得到一個單色方案了。

下面來看兩個使用單色方案的成功實例。

單色方案實例之一：

這是一個女性網(wǎng)站，因此其基本顏色為粉紅色，并通過調(diào)整粉紅色的飽和度得到了其余幾種顏色。總體顏色趨于淡雅，訪問者的注意力會很自然地被吸引到幾幅展示其產(chǎn)品的圖片上。

單色方案實例之二：

這個色彩方案使用的基色顏色較深，并通過修改其亮度獲得其他兩種顏色，并用最淺的顏色作為主體部分的背景，使其突出出來。

總的來說，單色方案是一種比較穩(wěn)重的方案，或者說比較保守的方案。單色方案給人整潔、經(jīng)典的感覺，最適合于內(nèi)容比較嚴肅的網(wǎng)站，比如政府網(wǎng)站，學(xué)術(shù)網(wǎng)站，企業(yè)網(wǎng)站，高雅藝術(shù)網(wǎng)站。

特別值得一提的是，商業(yè)網(wǎng)站也比較適合使用此種顏色方案，因為這種方案可以給人一種穩(wěn)定感，使訪問者容易建立對網(wǎng)站的信任感。當(dāng)然，這種方案也有其靈活的一面，當(dāng)使用較淺的基色時，這種顏色方案也可以用于時尚類網(wǎng)站，傳達簡約清雅的觀念。

相似色方案

在色彩圓環(huán)上選擇彼此相鄰的幾種顏色構(gòu)成的配色方案就是相似色方案。例如橙色、橙紅色以及橙黃色就可以組成一個相似色方案。由于相似色方案中包含了多種基色，如果再加上亮度和飽和度的變化，可以構(gòu)成的顏色就非常多。