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

1、網(wǎng)站配色方案實例顏色的使用在網(wǎng)頁制作中起著非常關鍵的作用，有很多網(wǎng)站以其成功的色彩搭配令人過目不忘。但是對于剛開始學習制作網(wǎng)頁的人來說，往往不容易駕馭好網(wǎng)頁的顏色搭配。除了學習各種色彩理論和方法之外，筆者認為多學習一些著名網(wǎng)站的用色方法，對于我們制作美麗的網(wǎng)頁可以起到事半功倍的作用。所以，筆者總結了一些著名網(wǎng)站的顏色搭配方法，這些方法可以讓我們的學習少走彎路，快速提高我們的網(wǎng)頁制作水平。一、網(wǎng)頁顏色原理和象征意義我們所有網(wǎng)頁上顏色，在HTML下看到的是以顏色英文單詞或者十六進制的表示方法（如#000000表示為黑色）。不同的顏色有著不同的含義，給人各種豐富的感覺和聯(lián)想。紅色：熱情、奔放、喜悅、

2、莊嚴黃色：高貴、富有、燦爛、活潑黑色：嚴肅、夜晚、沉著白色：純潔、簡單、潔凈藍色：天空、清爽、科技綠色：植物、生命、生機灰色：莊重、沉穩(wěn)紫色：浪漫、富貴棕色：大地、厚樸二、網(wǎng)頁顏色的使用風格不同的網(wǎng)站有著自己不同的風格，也有著自己不同的顏色。網(wǎng)站使用顏色大概分為幾種類型：1、 公司色在現(xiàn)在企業(yè)中，公司的CI形象顯得尤其重要，每一個公司的CI設計必然要有標準的顏色。比如新浪網(wǎng)的主色調是一種介于淺黃和深黃之間的顏色，同時形象宣傳、海報、廣告使用的顏色都和網(wǎng)站的顏色一致。再比如國富投資公司的主色調是C：100%，M：60%，Y：0%，K：0%。這樣的顏色使用到網(wǎng)站上顯得色調自然、底蘊深厚。2、 風格

3、色許多網(wǎng)站使用顏色秉承的是公司的風格。比如海爾使用的顏色是一種中性的綠色，即充滿朝氣有不失自己的創(chuàng)新精神。女性網(wǎng)站使用粉紅色的較多，大公司使用藍色的較多這些都是在突出自己的風格。3、 習慣色這些網(wǎng)站的顏色使用很大一部分是憑自己的個人愛好，以個人網(wǎng)站較多使用，比如自己喜歡紅色、紫色、黑色等，在做網(wǎng)站的時候就傾向于這種顏色。每一個人都有自己喜歡的顏色，因此這種類型稱為習慣色。三、設計用色十例以下我將分別介紹十個配色較好的網(wǎng)站，大家可以學習和借鑒一下，培養(yǎng)對色彩的敏感以及獨到的審美能力。1）這是個大型的NBA網(wǎng)站。通常我們經(jīng)?？吹降拇祟惥W(wǎng)站以白色為背景，但是這個網(wǎng)站卻用灰黑色RGB為（48，48，4

4、8/#333333）（以下顏色都用RGB表示），文章標題用色為RGB為（203，201，153/#CCCC99），菜單使用的RGB為（112，119，112/#707770）。這樣的配色可以顯示獨特的個性，又不失大型網(wǎng)站的風采。如圖1圖1 2）下面是一個娛樂類的綜合性網(wǎng)站UGO，他的配色方案是背景色為黑色RGB為（0，0，0）中嵌套RGB（0，0，82），字體白色RGB（255,255,255）,菜單為RGB（77,114,159）。這樣的雖以黑藍為主色調，但是配以漂亮的圖片，給人的感覺是生機盎然，充滿了互動色彩和青春氣息。如圖2。圖23）下面的這個網(wǎng)站是大名鼎鼎的微軟公司網(wǎng)站，微軟不僅軟件做

5、的好，連網(wǎng)頁制作也是世界一流。他的每一個網(wǎng)頁都是制作的樣板。從網(wǎ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)在我們來看一看，整體上使用的是白色RGB（255，255，255），輔助色為RGB（79，88，95），菜單色為RGB（48，64，64）和RGB（0，81，111）字體使用的是RGB（83，86，91）。雖然簡單，但顏色搭配非常的科學合理。如圖4圖45）

6、下面的網(wǎng)站采用黃色調為主，很體現(xiàn)公司的個性，現(xiàn)在我們就來看一看她的顏色搭配。主色調為黃色RGB為（255，199，48/#FFC730），輔助色調為RGB（49，102，46）字體為棕色RGB（153，103，0），中間再配以抽象的圖片，顯得個性十足但又不單調。如圖5圖56）橘紅色如果運用得當?shù)脑捠且环N非常使用于網(wǎng)頁上的顏色。下面的這個網(wǎng)站就是一個非常著名的例子。他的主色調為RGB（255，151，0）輔助色調為RGB（255，103，4），菜單RGB為（252，200，0）。字體使用黑色RGB為（0，0，0）。此種配色顯得主人較為前衛(wèi)，色彩熱烈，給人的震懾力較強。如圖6圖6 7）鮮紅色也是一

7、種震撼感很強的顏色，如果搭配不當，也可能使網(wǎng)站沒有風格和特點。下面的這個網(wǎng)站就是使用紅色比較好的網(wǎng)站。我們來看看他的顏色搭配。他使用的主色調是RGB（200，9，0），配以抽象的圖形，文字使用的是RGB（213，229，167）顯得美觀而不失獨特，大氣而不逼人。如圖7圖7 8）下面介紹的這種色調是我們制作網(wǎng)頁的時候不會經(jīng)常用到的顏色，如果使用到你的網(wǎng)頁中，肯定會給人耳目一新的感覺。他的主色調為RGB（144，151，97）輔助色調為RGB（173，168，112）邊飾為黑色RGB（0，0，0）字體為黑色RGB（0，0，0）。這樣的搭配顯得風格獨特，顏色和諧而莊重。如圖8圖8 9）下面的設計更加

8、的簡單化，但是顏色的使用使網(wǎng)頁并不呆板，反而讓人感覺到一股濃濃的生活和家庭氣氛，使人置身于美麗和愛中。他的主體是由兩種顏色構成，分別是RGB（239，200，161）和RGB（201，254，200）。如此簡單，但是卻栩栩如生，躍然網(wǎng)上。如圖9圖9 10）下面舉出這個例子是想證明一個道理只要你有足夠的想象力，你就能夠設計出漂亮的網(wǎng)頁。目前在網(wǎng)上非常流行一句話就是網(wǎng)頁的搭配不要超過四種主要顏色，否則就有雜亂之感。下面的這個網(wǎng)站遠遠的超過了三種顏色，但是她并不失美麗。因此重要的還是色彩的駕馭能力。下面這個例子的菜單就使用了7種顏色，但是我們看到的網(wǎng)頁并不雜亂，相反感覺作者很有創(chuàng)意。如圖10圖10

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

10、在了解了色彩對于網(wǎng)站設計的重要性之后，我們開始探尋色彩的奧秘。色彩入門首先讓我們熟悉一下色彩的一些基本概念。三原色一切顏色都來自三原色：紅、黃、藍。在這個圓環(huán)中，相鄰的兩個原色相混合可以得到另外三個比較重要的顏色（下文將其稱為二級原色）：紅+黃=橙，紅+藍=紫，藍+黃=綠讓我們再深入一步，三原色和三種二級原色可以進一步混合得到更多的顏色，分別是橙紅色、紫紅色、藍紫色、藍綠色、橘黃色和黃綠色。這六種顏色可以稱為三級原色。按照同樣的方式不斷進行下去，這個圓環(huán)中顏色之間的分隔線就會消失，得到下圖所示的“色彩圓環(huán)”，在一些繪圖程序的調色板中我們可以看到這樣的色彩圓環(huán)。但是這個圓環(huán)仍然沒有涵蓋所有的顏色

11、，對于圓環(huán)中的每一種顏色還有飽和度、亮度和灰度等的變化。也就是說，將上述圓環(huán)中的任意一種顏色和黑色、白色、灰色按照不同比例混合就可以得到更多的顏色，下面將詳細介紹。常用的色彩術語飽和度某種顏色的飽和度是指這種顏色所包含的基本顏色的多少。例如RGB值為（0，0，255）的藍色是純藍色，他的飽和度是100%。隨著飽和度的降低，顏色會越來越接近灰色。  灰度基本色彩和黑色進行不同程度的混合可以得到不同的灰度，例如亮度基本顏色和白色進行不同程度的混合可以得到不同的亮度，例如：:色調基本顏色和灰色進行不同程度的混合可以得到不同的色調，例如：  色彩方案的種類不同網(wǎng)

12、站應當使用不同的色彩方案，與站點的主題相吻合的色彩方案決不僅僅可以讓網(wǎng)站“更加好看”，更重要的是在訪問者心目中建立對這個網(wǎng)站的感性認識。所以，色彩方案的選擇決不能草率，而且色彩方案絕對是網(wǎng)站建設的第一個步驟。如果選擇色彩方案時過于草率，甚至根本不對網(wǎng)站進行色彩方案的整體規(guī)劃，你將不可能制作出一個真正優(yōu)秀的網(wǎng)站。例如，一個銷售嬰兒用品的網(wǎng)站應當使用比較活潑的色彩方案，而一個藝術網(wǎng)站則應當使用比較執(zhí)重的方案。按照色彩方案中色彩使用方式的不同，我們可以將色彩方案劃分成多種類型，單色方案、相似色方案、補色方案和三合一色方案。單色方案單色方案是指在網(wǎng)站設計中終止使用一種基本顏色，為避免單調，我們可以通過

13、調整這種基本顏色的灰度和亮度來得到更多的顏色，由于整個顏色方案中事實上只有一種基色，因此這種方案稱為單色方案。例如：在Photoshop的色彩選擇窗口中，我們可以這樣進行建立單色方案。首先調整H（也就是Hue的縮寫）后面的值來調整色調。注意，H的單位是度，也就是基本顏色在顏色環(huán)上所處位置的角度。設置好H的值之后，再調整B后面的數(shù)字調整亮度以及S后面的數(shù)字調整飽和度。注意，其中B和S的單位是百分比，也就是向基本顏色中添加白色和黑色的百分比。這樣就可以得到一個單色方案了。下面來看兩個使用單色方案的成功實例。單色方案實例之一：這是一個女性網(wǎng)站，因此其基本顏色為粉紅色，并通過調整粉紅色的飽和度得到了其

14、余幾種顏色?？傮w顏色趨于淡雅，訪問者的注意力會很自然地被吸引到幾幅展示其產(chǎn)品的圖片上。單色方案實例之二：這個色彩方案使用的基色顏色較深，并通過修改其亮度獲得其他兩種顏色，并用最淺的顏色作為主體部分的背景，使其突出出來?？偟膩碚f，單色方案是一種比較穩(wěn)重的方案，或者說比較保守的方案。單色方案給人整潔、經(jīng)典的感覺，最適合于內容比較嚴肅的網(wǎng)站，比如政府網(wǎng)站，學術網(wǎng)站，企業(yè)網(wǎng)站，高雅藝術網(wǎng)站。特別值得一提的是，商業(yè)網(wǎng)站也比較適合使用此種顏色方案，因為這種方案可以給人一種穩(wěn)定感，使訪問者容易建立對網(wǎng)站的信任感。當然，這種方案也有其靈活的一面，當使用較淺的基色時，這種顏色方案也可以用于時尚類網(wǎng)站，傳達簡約清雅的觀念。相似色方案在色彩圓環(huán)上選擇彼此相鄰的幾種顏色構成的配色方案就是相似色方案。例如橙色、橙紅色以及橙黃色就可以組成一個相似色方案。由于相似色方案中包含了多種基色，如果再加上亮度和飽和度的變化，可以構成的顏色就非常多。 下面是相似色方案的實例。 相似色方案實例一：這個網(wǎng)站使用了由橙黃色、橙紅色和橙色組成的配色方案。Bullseye是一家ISP服務商，面向普通