網頁設計配色實例網頁設計配色

顏色的使用在網頁制作中起著非常關鍵的作用，有很多網站以其成功的色彩搭配令人過目不忘。但是對于剛開始學習制作網頁的人來說，往往不容易駕馭好網頁的顏色搭配。除了學習各種色彩理論和方法之外，筆者認為多學習一些著名網站的用色方法，對于我們制作美麗的網頁可以起到事半功倍的作用。所以，筆者總結了一些著名網站的顏色搭配方法，這些方法可以讓我們的學習少走彎路，快速提高我們的網頁制作水平。網頁設計配色實例全文共81頁，當前為第1頁。一、網頁顏色原理和象征意義

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

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

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

黑色：嚴肅、夜晚、沉著

白色：純潔、簡單、潔凈

藍色：天空、清爽、科技

綠色：植物、生命、生機

灰色：莊重、沉穩

紫色：浪漫、富貴

棕色：大地、厚樸

二、網頁顏色的使用風格

不同的網站有著自己不同的風格，也有著自己不同的顏色。網站使用顏色大概分為幾種類型：

1、公司色

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

2、風格色

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

3、習慣色

這些網站的顏色使用很大一部分是憑自己的個人愛好，以個人網站較多使用，比如自己喜歡紅色、紫色、黑色等，在做網站的時候就傾向于這種顏色。每一個人都有自己喜歡的顏色，因此這種類型稱為習慣色。網頁設計配色實例全文共81頁，當前為第1頁。三、設計用色十例以下我將分別介紹十個配色較好的網站，大家可以學習和借鑒一下，培養對色彩的敏感以及獨到的審美能力。1）這是個大型的NBA網站。通常我們經?？吹降拇祟惥W站以白色為背景，但是這個網站卻用灰黑色RGB為（48，48，48/#333333）（以下顏色都用RGB表示），文章標題用色為RGB為（203，201，153/#CCCC99），菜單使用的RGB為（112，119，112/#707770）。這樣的配色可以顯示獨特的個性，又不失大型網站的風采。如圖1

圖1

網頁設計配色實例全文共81頁，當前為第2頁。2）下面是一個娛樂類的綜合性網站UGO，他的配色方案是背景色為黑色RGB為（0，0，0）中嵌套RGB（0，0，82），字體白色RGB（255,255,255）,菜單為RGB（77,114,159）。這樣的雖以黑藍為主色調，但是配以漂亮的圖片，給人的感覺是生機盎然，充滿了互動色彩和青春氣息。如圖2。網頁設計配色實例全文共81頁，當前為第2頁。

圖23）下面的這個網站是大名鼎鼎的微軟公司網站，微軟不僅軟件做的好，連網頁制作也是世界一流。他的每一個網頁都是制作的樣板。從網頁我們就可以看出微軟公司的風格、作風，以及雄厚的實力。背景顏色使用藍色RGB為（0，151，254），菜單為黑色RGB（0，0，11），菜單為灰色RGB（200，200，200），字體為黑色RGB（0，0，0），如圖3。

圖34)現在介紹的網站相對簡單，但是她的用色也別具匠心，現在我們來看一看，整體上使用的是白色RGB（255，255，255），輔助色為RGB（79，88，95），菜單色為RGB（48，64，64）和RGB（0，81，111）字體使用的是RGB（83，86，91）。雖然簡單，但顏色搭配非常的科學合理。如圖4網頁設計配色實例全文共81頁，當前為第3頁。

圖4網頁設計配色實例全文共81頁，當前為第3頁。5）下面的網站采用黃色調為主，很體現公司的個性，現在我們就來看一看她的顏色搭配。主色調為黃色RGB為（255，199，48/#FFC730），輔助色調為RGB（49，102，46）字體為棕色RGB（153，103，0），中間再配以抽象的圖片，顯得個性十足但又不單調。如圖5

圖56）橘紅色如果運用得當的話是一種非常使用于網頁上的顏色。下面的這個網站就是一個非常著名的例子。他的主色調為RGB（255，151，0）輔助色調為RGB（255，103，4），菜單RGB為（252，200，0）。字體使用黑色RGB為（0，0，0）。此種配色顯得主人較為前衛，色彩熱烈，給人的震懾力較強。如圖6

圖6網頁設計配色實例全文共81頁，當前為第4頁。7）鮮紅色也是一種震撼感很強的顏色，如果搭配不當，也可能使網站沒有風格和特點。下面的這個網站就是使用紅色比較好的網站。我們來看看他的顏色搭配。他使用的主色調是RGB（200，9，0），配以抽象的圖形，文字使用的是RGB（213，229，167）顯得美觀而不失獨特，大氣而不逼人。如圖7網頁設計配色實例全文共81頁，當前為第4頁。

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

圖8網頁設計配色實例全文共81頁，當前為第5頁。9）下面的設計更加的簡單化，但是顏色的使用使網頁并不呆板，反而讓人感覺到一股濃濃的生活和家庭氣氛，使人置身于美麗和愛中。他的主體是由兩種顏色構成，分別是RGB（239，200，161）和RGB（201，254，200）。如此簡單，但是卻栩栩如生，躍然網上。如圖9網頁設計配色實例全文共81頁，當前為第5頁。

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

圖10

網頁設計的顏色搭配需要在實踐中不斷的摸索和不斷的創新，認真學習別人的先進方法和經驗，可以快速的提高我們的制作水平?？梢哉f。網頁顏色搭配得當，成功也就走了一半。如果大家有什么好的方法，別忘了和別人交流，讓我們共同進步！紅色系網頁設計配色實例全文共81頁，當前為第6頁。紅色的色感溫暖，性格剛烈而外向，是一種對人刺激性很強的顏色。紅色容易引起人的注意，也容易使人興奮、激動、緊張、沖動、還是一種容易造成人視覺疲勞的顏色。

在眾多顏色里，紅色是最鮮明生動的、最熱烈的顏色。因此紅色也是代表熱情的情感之色。鮮明紅色極容易吸引人們的目光。

紅色在不同的明度、純度的狀態（粉紅、鮮紅、深紅）里，給人表達的情感是不一樣的。

在網頁顏色的應用機率中，根據網頁主題內容的需求，純粹使用紅色為主色調的網站相對較少，多用于輔助色、點睛色，達到陪襯、醒目的效果。通常都配以其他顏色調和。

紅色相對于其他顏色，視覺傳遞速度最快。由于以上的這些紅色傳達出的特性，因此人們喜歡用紅色作為警示符號的顏色，例如：消防、驚嘆號、錯誤提示等等。網頁設計配色實例全文共81頁，當前為第6頁。為了讓大家對紅色的理解做更好的區別，下面我們分別對紅色系根據鄰近色、同類色、對比色的搭配做不同的舉例分析。

朱紅色

→朱紅色網頁例圖：http://www.muchvibe.ca網頁設計配色實例全文共81頁，當前為第7頁。

朱紅色在紅色系里傾向黃色方向，是大紅色加入黃色而得。在色環表中，純紅色在HSB里為0度，往360度方向呈現的是冷紅色系，0度方向為黃色系。

整個頁面里，主色調朱紅色面積非常大、確定明顯，輔助色主要由黑色、深紅構成，（數值上選取的是深紅色做標示）。主色調的R呈現出255最高數值，S中100%，充分標明了紅色最高特性。輔助色的深紅R為222，B87%，顯示其充當輔助角色的這一特性。

結論：

背景色朱紅由于紅色特性明顯，飽和度、明度都非常的高，這里運用了輔助色深紅、黑色壓住并牽制朱紅色搶眼的個性，也同樣能達到突出前景主要圖片內容的目的。點睛色主要用于標志的突出上，其他導航文字、圖片的部分運用等，調和并達到了不至于使得整個頁面刺激中又透出的沉悶感。

這類顏色的組合比較容易使人提升興奮度，紅色特性明顯，這一醒目的特殊屬性，比較被廣泛的應用于食品、時尚休閑等等類型的網站。網頁設計配色實例全文共81頁，當前為第7頁。深紅色

→深紅色網頁例圖：http://

網頁設計配色實例全文共81頁，當前為第8頁。

深紅色在原有的紅色基礎上降低了明度而得，是紅色系中的明度變化。通過上圖的數值顯示看出明度較低。

這類顏色的組合隨著明度的變暗，比較容易制造深邃、幽怨的故事氣氛。傳達的是穩重、成熟、高貴、消極的心理感受。

這個頁面背景色運用了紋樣，是以目前選取的主色調顏色和明度較暗的深紅色結合而的，使得明度稍暗。

數值上看，主色調也就是背景色的飽和度較高，但是由于降低了明度，顏色變得較沉穩。輔助色RGB添加了適量的其他顏色，G和B數值區別不大，因此飽和度降低，顏色趨于柔和穩定。點睛色的加入提亮，頁面視覺效果強化。

結論：

前景色通常要較明顯的區別于背景色，達到臺前的宣傳目的。當飽和度較低的前景色與背景色變化不明顯時形成的是另外一種柔和統一的效果。網頁設計配色實例全文共81頁，當前為第8頁。玫瑰紅色

→玫瑰紅色網頁例圖：http://www.gentverwent.be網頁設計配色實例全文共81頁，當前為第9頁。

玫瑰紅色在色環上實際已經接近冷色，是紅色系中的色相的微妙變化，是紅色系里的冷色系。我們在HSB中H數值可看出，0度為紅色的最高值，越接近0度數值紅色特性越明顯，否則逐漸冷色傾斜，而該數值偏離0度稍遠。

這個頁面主要由兩種不同明度、純度的玫瑰色調組成。兩色數值顯示，我們看到RGB數值中R呈現的數值最高，紅色特性較明顯。輔助色調的玫瑰色，加入少許G，色調向冷色稍微偏移，也由于加入了G，在HSB數值里，飽和度輕微減弱，但隨著明度增加，色彩趨于艷麗，符合突出前景的目的。主色調雖然純度達到最高飽和，但由于明度降低，相對于輔色調較沉穩，適合做背景色。

數值上看，由于背景色和前景色的明度較為接近，加入白色邊框，強烈了前景色于背景色的區分，加強視覺強化效果。

結論：

背景色和前景色的明度較接近，顏色給人的視覺表象較悶，加入少量白色劃分使得色彩引導的主次塊面更分明，頁面明快許多。

這類顏色的組合多用于女性主題，例如：化妝品、服裝等，容易營造出嬌媚、誘惑、艷麗等氣氛。網頁設計配色實例全文共81頁，當前為第9頁。明度粉紅色

→明度粉紅色網頁例圖：http://.au

網頁設計配色實例全文共81頁，當前為第10頁。

粉紅色主要是紅色系中的明度的高亮度的變化。是紅色系里的冷色系。RGB數值顯示明度較高，因此HSB中S純度下降，幾乎呈最低值。

主色調和輔助色調數值對比可知：主色調混合的G的份量較多且明度較高，因此純度較低，色調柔和，在框架區域內較適合做類似背景色的輔助性崗位。輔助色R數值比主色調的R數值稍高，紅色性稍明顯，加入的G相對少，B明度稍低，因此相對純度要高，輔色位置應用在框架區域的導航位置，起到突出導航作用。點睛色突出標志及購物主體的作用。

背景白色除了突出前面粉紅色主體的作用，在前景也有出現，背景色與前景色的相互牽制，減少空間距離的效果。

結論：

RGB數值中，數值同時呈現相近的高數值時，色彩越柔和協調，純度相對降低，頁面呈高明度灰色段，視覺刺激緩慢。這里以粉紅色為主色調的頁面，女性主題內容特征傾向明顯。這組粉紅色頁面里，由于純度都較低，任何一個純度高小面積使用的顏色都能起到點睛的效果。

這類顏色的組合多用于女性主題，例如：化妝品、服裝等，鮮嫩而充滿誘惑，傳達著柔情、嬌媚、溫柔、甜蜜、純真、誘惑的心理感受。網頁設計配色實例全文共81頁，當前為第10頁。對比色：橙紅色+藍色

→對比色橙紅色應用網頁例圖：http://www.

網頁設計配色實例全文共81頁，當前為第11頁。

嚴格上來說，橙色是藍色的對比色，這組對比色中的橙紅色傾向于紅色。

該頁面的背景色使用紋理圖形由深至淺的制造空間范圍，模擬真實環境。這里的數值選取其中間色值來分析，由于背景藍色B的明度較低，又由于冷色比暖色視覺傳遞速度慢的特點，很適合作為輔助角色突出前景的應用。主色調橙紅色R的數值達到最高值255，SB都達到了最高值100%，視覺刺激非常強烈，運用大面積高純度來突出藍色產品主體物，又形成了一次頁面上的視覺對比--背景藍色與前景橙紅色，前景橙紅色與產品主體物藍色的二次對比。

點睛色白色，使這組對比色在頁面中表現得更協調，調和的作用。

結論：

顏色的深淺除了能營造空間感的效果，也能輔助性的制造主次效果。顏色除了性能對比，面積對比、位置安排也是制造主次效果的關鍵。

這組橙色藍色對比色在網頁上比其他兩組對比色紅色綠色，黃色紫色應用得多，能迅速的傳達網站主題內容、網頁主體，容易增添強烈的興奮度，多用于食品、休閑娛樂、產品等，但卻又是跨越于各行業的主題網站，適用的范圍非常大。網頁設計配色實例全文共81頁，當前為第11頁。網頁設計配色實例全文共81頁，當前為第12頁。配色：紅色+黑色

→紅色配色應用網頁例圖：http://www.pleasuredome.it

網頁設計配色實例全文共81頁，當前為第12頁。

紅色與黑色的搭配在商業設計中，被譽為商業成功色，鮮亮的紅色多用于小面積的點綴色。

從數值上看，紅色添加了G和B飽和度稍降低，因此該紅色大面積使用不會覺得刺激或不舒服，這也與背景色藍色加入了適量漸變的技法，使得頁面的節奏呈現緩和。輔助色黑色的加入，與深紅色在明度拉大，頁面色彩元素相對活躍不少。

點睛色白色，所放的位置和面積，起到平衡黑色位置面積的作用，當然也達到醒目的效果。

結論：

這里顏色位置的擺放，起到平衡頁面視覺，突出主題效果。背景色加了漸變效果、整體與前景人物黑色對比呈淺色，前景人物黑色與背景深紅色、背景深紅與前景白色文字相互之間的關系，構成空間環境的視覺效果。

這組配色中，紅色是降低了明度的深紅色，為主色調和背景色的大面積使用。紅黑搭配色，常用于較前衛時尚、娛樂休閑、電子商務等等要求個性的網頁設計配色里，也又有用于部分政治、新聞的頁面。網頁設計配色實例全文共81頁，當前為第13頁。配色：紅色+黑色+灰色

→紅色配色應用網頁例圖：http://.au

網頁設計配色實例全文共81頁，當前為第13頁。網頁設計配色實例全文共81頁，當前為第14頁。

這組配色，達到最高純度的紅色做小面積的使用。雖然這里選取了紅色做為輔助色，但從整個頁面的功能和所表達的主題來看，紅色可以作為該頁面的點睛色，強烈的突出了主題。

紅色的數值顯示，HBS中的H為0度，達到紅色特性的最高值，S為最高飽和度100%，在明度最低的黑色背景的襯托下，其特性發揮到極致，頁面醒目而響亮。

紅色與黑色本是對比強烈的配色，但由于背景灰色的作用，緩和整個頁面的視覺刺激度。背景色灰色RGB數值變化不大，因此顏色純度較低、趨于平穩柔和，輔助前景內容的呈現。

白色讓前景和背景的劃分更明顯，活躍頁面中的色彩元素。

結論：

使用面積小的純度高的顏色在非色彩的黑色和灰色上，是產生變化頁面的顏色，達到容易突出主題的目的。

本部分小節：

●紅色在RGB數值的R為255左右，HSB數值的H中為0度左右，達到紅色最高值。隨著純度的提高、亮度的適度增加，它易于迅速的傳達、醒目性的特征發揮得越明顯。和其他顏色一樣，顏色相互混合的越多，明度越低，飽和度越低，視覺沖擊力越弱。

●顏色的對比：對比色紅色綠色的搭配，紅色的特性發揮得越明顯。綠葉襯紅花的效果。另外紅與黑的搭配，也較能展現紅色的魅力。

●根據主題的需要，除了對比色的應用，還有面積上、位置上的對比應用，也能很好的配合達到突出主題產品主體物的目的。網頁設計配色實例全文共81頁，當前為第14頁。橙色系網頁設計配色實例全文共81頁，當前為第15頁。橙色具有輕快、歡欣、收獲、溫馨、時尚的效果，是快樂、喜悅、能量的色彩。

在整個色譜里，橙色具有興奮度，是最耀眼的色彩。給人以華貴而溫暖，興奮而熱烈的感覺，也是令人振奮的顏色。具有健康、富有活力、勇敢自由等象征意義，能給人有莊嚴、尊貴、神秘等感覺。橙色在空氣中的穿透力僅次于紅色，也是容易造成視覺疲勞的顏色。

在網頁顏色里，橙色適用于視覺要求較高的時尚網站，屬于注目、芳香的顏色，也常被用于味覺較高的食品網站，是容易引起食欲的顏色。

下面我們根據橙色系不同屬性鄰近色、同類色、對比色的搭配做不同的舉例分析。

橙色

→橙色網頁例圖：http://www.wastelink.co.uk

橙色系分析：

主色調橙色HSB數值的H表示色相，顯示的是30度，而30度正是橙色顯示特征最標準的顏色——正橙色。飽和度和亮度同時達到最高值，因此整個頁面的視覺刺激是極其耀眼強烈的。

這里選取了三種面積相當又是整個頁面使用得最少的顏色為點睛色，使頁面生動的同時又運用于導航位置，從而達到突出主題的效果。從HSB數值上看它們的明度純度相對較低，與明度純度較高的背景正橙色形成鮮明的對比。

通過范圍較大的背景白色、前景圖片灰白色和小細節前景白色文字制造出明快氣氛的同時，又呼應統一于整個頁面。

輔助色在這里是橙色與白色的過渡色。

結論：

飽和度與純度很高特性明顯的顏色，在達到視覺沖擊力的同時，可適當采用少許對比色調和緩和于視覺，從而削弱視覺的疲勞度。網頁設計配色實例全文共81頁，當前為第15頁。網頁設計配色實例全文共81頁，當前為第16頁。網頁設計配色實例全文共81頁，當前為第16頁。網頁設計配色實例全文共81頁，當前為第17頁。深橙紅色系

→深橙紅色網頁例圖：http://www.matisserestaurant.ca

深橙紅色系分析：

從色相度中可以知道0度為正紅色，30度為正橙色，而主色調的HSB數值H顯示22度可知，該深橙紅色是橙色基礎上加入少許鄰近色紅色，整體上降低了明度而得，因為紅色本身較橙色明度低，因此這里橙紅色的明度呈現出較低狀態。

輔助色選取了明度相對于主色調更低的三種顏色，前面兩種飽和度都較高，最后一種灰藍色由于明度較高因此飽和度降低，是主色調與前面兩種輔助色的協調色。

這個頁面背景色運用了紋樣，是以目前選取的主色調顏色和明度較暗的深紅色結合而得，使得明度稍暗。

數值上看，主色調也就是背景色的飽和度較高，但是由于降低了明度，顏色變得較沉穩。輔助色RGB數值顯示，添加了適量的其他顏色，G和B數值區別不大，因此飽和度降低，顏色趨于柔和穩定。點睛色的加入和提亮，使頁面視覺效果得到強化。

結論：

前景色通常要較明顯的區別于背景色，達到臺前的宣傳目的。當飽和度較低的前景色與背景色變化不明顯時，形成的是另外一種柔和統一的效果。網頁設計配色實例全文共81頁，當前為第17頁。網頁設計配色實例全文共81頁，當前為第18頁。淺橙色同類色

→淺橙色同類色網頁例圖：http://

淺橙色同類色分析：

從主色調和輔色調在HSB數值H顯示的數值是36可以看出，該頁面色調是在同一種橙色的基礎上只在明度上發生了變化。由于主要色調是淺橙色，明度越高飽和度越低，頁面上減弱了飽和度較高的橙色特性，整個網頁呈現出柔和自然稍有些發灰的調子。

該網頁是在橙色這一個顏色上做不同明度黑白灰色階的柔和變化，屬于單色調，配色非常的單純。色階平穩，同時存在著不夠醒目的狀態。白色在這里是起到了拉開主色調和輔色調空間距離，增強輔色調橙色的特性，使整個稍許有些發灰的頁面明快了不少。但也由于白色屬于非色彩，只在明度上呈最高數值而無彩度，不能給頁面帶來彩度所具有的鮮活靚麗的感覺，另一方面卻也呈現出質樸的感受。

結論：

前面我們提到過同類色是在同一色相中不同的明度顏色變化。因此這類顏色相對其他類別顏色來說明凈而單純，配色上較容易達到協調統一，但也容易顯得單調。

初看該頁面配色協調舒服，但看多了的確有些單調乏味的感覺，這也是同類色搭配的特性。同時由于運用了漸變色這一調和方法，該頁面同時占有了前面我們提到的4種色彩中的調和方法的2種，整個頁面呈現出調和中的調和是勿庸置疑的，但也同時顯得有些單調，沒有色彩亮點。網頁設計配色實例全文共81頁，當前為第18頁。網頁設計配色實例全文共81頁，當前為第19頁。橙色系鄰近色（黃色+橙色＋橙紅色）

→鄰近色橙色網頁例圖：http://

橙色系鄰近色（黃色+橙色＋橙紅色）分析：

雖然第一眼看上去似乎色調上變化很多，但該網頁的色彩構成主要是由黃色和橙色這兩種鄰近色構成的，通過不同的明度和純度的變化而得到更為豐富的色階，它們是淺黃色、黃色、橙色、橙紅通過不同的形狀面積，位置變化而得。從HSB數值中的H可以看出屬于暖色范疇，三個色相的傾向不是很明顯，以至于色彩呈現較規律、緩和。由于不同數值的明度表達，純度也做出了不同的數值變化。

淺色在這里主要起到更調和主色調和點睛色的色彩過渡作用。點睛色在這里起到強調整個頁面的華麗感，增強整個頁面彩度的作用。

結論：

橙色與鄰近色黃、紅暖色調的搭配組合，這是一種簡單又安全的方法，視覺韻律上處理得井然有序。整個頁面看起來艷澤華麗、新鮮充滿活力的感覺，符合Tide這一主題所要表達的目的。網頁設計配色實例全文共81頁，當前為第19頁。網頁設計配色實例全文共81頁，當前為第20頁。橙色系對比色（橙色＋藍色）

→對比色橙紅色應用網頁例圖：.ar

橙色系對比色（橙色＋藍色）分析

HSB數值中的H色相顯示主色調橙紅色為26，我們知道正紅色的H為0，正橙H為30，主色調橙紅色是往0偏移而得。正藍色是240，而該點睛色藍色為192，往綠度偏移，在RGB中的數值G160也能看出來，因此藍色的特性不是很強。但由于橙紅色的明度飽和度達到最高值，因此盡管藍色不是正藍，但它的特性得到了很大程度的發揮。

此種橙藍對比色中的藍色調配，比較少見，讓人很容易記住它。而橙紅色的飽和度明度都非常高，刺激度強，屬于讓人不可久視的顏色。

介于橙紅色和藍色之間，與藍色面積相當的白色，起到調和對比色橙紅與藍色之間關系的作用。

結論：

這組對比色通過使用的面積位置的不同來反映主次之間的關系。對比色能相互強烈的突出色彩特性。這組對比色屬于是非常能突顯個性的顏色。網頁設計配色實例全文共81頁，當前為第20頁。網頁設計配色實例全文共81頁，當前為第21頁。橙色系低對比度（橙色+綠色）

→橙色低對比應用網頁例圖：http://

橙色系低對比度（橙色+綠色）分析：

如果不看數值參數，剛一開始看會以為這是一組純度較低的顏色。HSB數值H顯示主色調為正橙色，而黃綠色的明度較低且色相傾向不夠明確，加之背景有少許的暗橙色紋樣，整個頁面沒有高亮度白色點綴襯托，使得純度的彩度不夠確切，就很容易造成了該頁面純度較低的錯覺。

整個頁面最亮的顏色除了“書本”最亮色淺黃色外，就是點睛色黃色了。我們知道黃色是所有彩度色中明度最高的顏色，不同明度純度的黃色系讓整個頁面明亮了不少，它是整個頁面明度色階的最高調。

黃綠色的出現，讓本只有鄰近色的橙色系列多了些內容，頁面配色豐富不少、視覺節奏多了些變化。

結論：

這類顏色的組合隨著不同色階明度的變暗，整個頁面沒有白色襯托，制造出另外一種古典的環境氛圍，有如娓娓道來的故事場景，也是一種不錯的主題配色方法。

本頁面的配色設計亮點是——無白色設計。網頁設計配色實例全文共81頁，當前為第21頁。網頁設計配色實例全文共81頁，當前為第22頁。橙色系高純度高對比度（橙紅色+綠色）

→橙色高純度對比應用網頁例圖：

橙色系高純度高對比度（橙紅色+綠色）分析：

與上組的橙色綠色相比，這組顏色強烈而刺激，色彩傾向無疑明確了很多。主色調橙紅色往紅色傾向，而紅色的對比色是綠色，因此整組顏色有強烈的對比效果。從HSB數值H上看，除了藍色外，其余幾種顏色純度都非常高，加上又是近于紅綠對比色。頁面的刺激強度是可想而知的強烈。

黃色是中間色，起到過渡對比色作用，在這組色里屬于調和色。藍色出現在產品圖案上，引導主次關系，增強視覺的注目點。

結論：

橙色是注目容易引起食欲的顏色，在這里得到了較充分的應用。

非色彩的白色和黑色在這里起到了非常重要的作用，拉大了色彩色階空間的距離。白色讓整個色調組合更加明快，而黑色增添色彩的厚重質感——強烈中的強烈，增強對產品的視覺刺激。網頁設計配色實例全文共81頁，當前為第22頁。

本部分小節：

●橙色在HSB數值的H中為30度，是正橙色。橙色是一個非常響亮注目的顏色。橙色的對比色是藍色，當這兩種顏色彩度傾向越明確，對比強度就越大。但我們也看到，除了正宗的對比色橙藍色外，橙色和綠色隨著純度的升高，達到的對比效果也很強烈。

在今后的配色設計中可以多些不同明度純度冷暖對比的嘗試，會有意想不到的收獲。

●白色是所有網頁設計中屬于較通用的顏色，它容易突出彩度的特性，明快于整個頁面，當一個頁面設計沒有使用白色時，空間感覺減弱，容易造成彩度不夠明確、頁面有些沉悶等反應，然而又相對來說增添頁面的厚重感覺，制造另外一種環境氣氛。黑色在色調組合的輔助角色里容易制造出厚重的色彩效果。

從這里我們又一次感受到色彩的相對性，即沒有絕對的配色組合，它們總是根據搭配不同的色彩組合或強或弱的表現出什么樣的特性。

●同類色、鄰近色的組合，是非常調和的色彩組合，即使減少了色相的數量，一樣也可以調配出很多不同的調和色彩。對于初學者來說，這是一個非常實用的配色方法黃色系網頁設計配色實例全文共81頁，當前為第23頁。黃色是陽光的色彩，具有活潑與輕快的特點，給人十分年輕的感覺。象征光明、希望、高貴、愉快。淺黃色表示柔弱，灰黃色表示病態。它的亮度最高，和其他顏色配合很活潑，有溫曖感，具有快樂、希望、智慧和輕快的個性，有希望與功名等象征意義。黃色也代表著土地、象征著權力，并且還具有神秘的宗教色彩。

黃色的性格冷漠、高傲、敏感、具有擴張和不安寧的視覺印象。

淺黃色系明朗、愉快、希望、發展，它的雅致，清爽屬性，較適合用于女性及化妝品類網站。

中黃色有崇高，尊貴，輝煌、注意、擴張的心理感受。

深黃色給人高貴、溫和、內斂、穩重的心理感受。

下面我們根據黃色系不同屬性鄰近色、同類色的高純度低純度色彩搭配做不同的舉例分析。網頁設計配色實例全文共81頁，當前為第23頁。網頁設計配色實例全文共81頁，當前為第24頁?！S色系網頁例圖：

黃色系分析：

黃色是所有彩色中明度最高的顏色。上圖看到HSB模式的H數值是60度，正是正黃色，但RGB數值中加入了B藍色數值為51，因此降低了HSB的飽和度S為80％，但是大面積的黃色仍使得該頁面色彩明亮顯眼。

輔助色是純黑色，非色彩明度最低的顏色。

大面積顯眼的正黃色有黑色的線條壓制，黃色頓時顯得沉穩，頁面增添內容感。

白色雖然是點睛色，但由于非色彩的白色與黃色的明度最高，因此這里似乎沒有起到"點睛"的作用。

結論：

當鮮度、明度高的背景色與前景輔助色暗度低的黑色在明度形成較強烈的對比時，艷度降低，較能協調視覺。

整個頁面配色單純，卻也不簡單，形成另一種設計風格。網頁設計配色實例全文共81頁，當前為第24頁。網頁設計配色實例全文共81頁，當前為第25頁?！S色同類色網頁例圖：www.paralotna.pl

黃色同類色分析

該頁面的配色很單純，是同類色的黃色不同明度顏色，頁面看起來干凈、單純。

點睛色白色淡黃色在深色黃色背景下比較顯眼，且在最中間位置，是整個頁面中的高調部分。

這三種黃色，明度都很高，只有背景輔助色明度稍低，點睛黃色H色相是三種顏色中黃色傾向最高的為57度，而60度是正黃色，因此明度也是最高的，充分的發揮其點睛色的作用。

背景色和前景色只在色相上明度上有非常微妙的變化，卻也很巧妙，形成了變化較明顯的空間層次感，削弱了同類色易產生的單調感。點睛色白色讓層次感更明顯。

結論：

同類色的屬性使得整個頁面非常和諧，可以根據不同的主題來設計配色。

可以通過明度、飽和度的不同變化來加強頁面配色的層次感。網頁設計配色實例全文共81頁，當前為第25頁?！悬S色應用網頁例圖：

中黃色系分析：

背景中黃色上點綴多種艷度較高的顏色，都是屬于跳躍的顏色，渲染整個網站的熱鬧環境氣氛，符合該網站的設計主題。

從HSB數值上看，該中黃色的明度和飽和度呈最高值，屬于明亮耀眼的顏色。輔助色是黃綠色和紅色，黃綠色在中黃背景下呈冷色調，輕快單薄的亮色；紅色的HSB數值H色相上看是正紅色，明度稍低，這里屬于厚重沉穩的顏色，在中黃色背景下呈現暖色調；背景中黃色在黃綠色和紅色兩者中這時呈中間色，是很好的整體頁面視覺過渡色。

加之商品圖片多種亮艷的色澤混合在同一頁面上，點睛色白色在這里起到了調和多種顏色的作用，減少、透氣于整個頁面的多種配色噪音。

結論：

當背景色起到中間色的作用時，頁面少量冷暖色彩搭配較容易調和。

通常商品網站志在渲染熱鬧氣氛，比較適合活潑跳躍、色彩絢麗的配色方案，但色彩的調和難度較大。網頁設計配色實例全文共81頁，當前為第26頁。黃綠色調網頁例圖：.ar

黃綠色調分析：

主色調為黃綠色，單純而看，黃綠色是通常的暖色的起始色、色彩中亮度最高的黃色與冷色的起始色、綠色相結合而得，因此該顏色看起來非常明快清新。

處于輔助色的非色彩黑色，中間的點綴色是主色調黃綠色，很容易讓人一時以為該顏色就是點睛色。實際主色調黃綠色的明度非常高，飽和度這時也很高，在明度最低的黑色襯映下就異常顯眼。

背景色使用略有些漸變的效果，正是黃綠和黑（灰）顏色的柔和過渡，頁面調和。

點睛色在這里混色較多，RGB、HSB數值差距都不大，因此顏色偏灰色階，仔細分析是黃綠色與少許黑色混合而得，起到了調和背景色與輔助色明度差異過大的作用。

結論：

點睛色可以是少許耀眼的顏色，也可以是少許協調于視覺的混合灰色，無論是耀眼的顏色還是謙遜沉穩的灰色，都是不可缺少的角色，有著不可替代的作用。

整個頁面配色較單純，只有三種色，非色彩來說分別起到黑（輔助黑）白（主色黃綠）灰（點睛混合色）的作用，所以頁面配色較有層次感，并不顯得單調。網頁設計配色實例全文共81頁，當前為第26頁。網頁設計配色實例全文共81頁，當前為第27頁?！S色鄰近色網頁例圖：www.leerbanen.nl

黃色鄰近色配色（黃色+紅色）分析：

選取的上圖三組色里HSB數值的B明度雖然都有些變化，但S飽和度分毫沒有受到影響，仍都呈最高值100％，因此頁面配色異常耀眼。好在其間有少量不同明度飽和度的紅色系色塊做壓制，頁面顯得沉穩許多，頁面色彩層次也豐富了許多，塊面交織設計富有節奏韻律美，卻也有雀躍的感覺。

頁面照片人物也經過了雙色調處理，與頁面色彩風格一致。

整個頁面屬于明暗反差較大的色調，所以頁面響亮明快，極賦視覺沖擊力、感染力。

結論：

耀眼的顏色有深色塊壓制，也是很好的調和方法。

該頁面里的不少小色塊混合了暗灰色，因此頁面飽和度刺激程度得到少許降低并調和。

網頁設計配色實例全文共81頁，當前為第28頁。同類色系、類似色系不同純度明度的深淺變化搭配，增添現代美感。網頁設計配色實例全文共81頁，當前為第27頁。網頁設計配色實例全文共81頁，當前為第28頁。網頁設計配色實例全文共81頁，當前為第29頁?！呒兌赛S色鄰近色應用網頁例圖：

高純度黃色鄰近色配色（黃色+紅色）分析：

全頁選取的幾個色彩組合是高純度高明度的鄰近色正黃、淡黃（這里的淡黃色不是指淺黃色，而是色彩顏料色里的稱呼。）、中黃及正紅色。

我們知道，黃色是色彩系里明度最高的耀眼色，HSB數值H色相60度是正黃色，特性越高明度越高。H色相度往60度前是接近紅色，而紅色明度相較于黃色低，背景色HSB數值H色相為48度，往紅色靠近，因此色度較深，呈現為中黃色。使用中黃背景正是烘托突出前景的淡黃色。淡黃色的前景上設計少許中黃色帶進入，頁面的色彩層次感生動了不少。

另一個輔助色紅色HSB數值的H色相是0度，顯示正紅色且高純度高亮度，放在最顯眼的標志廣告區域，實現視覺引導作用，主次感增強了。

白色也是輔助色三色之一，在頂部面積較大的使用，使整個頁面的純度緩和了許多，起到提亮并拉開空間的作用。

點睛色用于導航欄，提示導航區域的醒目與重要性。

結論：

高純度高明度的顏色調子耀眼響亮，通常對視覺的刺激程度較大。

鄰近色由正黃到最后的正紅色是色輪表的協調過渡色，因此頁面調和。

鄰近色與同類色一樣，是調和色，但較同類色更生動更多變化。網頁設計配色實例全文共81頁，當前為第29頁。網頁設計配色實例全文共81頁，當前為第30頁?！S色低純度配色應用網頁例圖：

低純度黃色配色（黃色+藍色）分析：

該頁面是屬于純度較低的多組配色頁面，配色難度似乎較大，但是按主色調、輔助色、點睛色來細細分析就會發現容易多了。

主色調的中黃色，從RGB數值B明度48來看，提高了明度，RGB數值的變化HSB也相應變化，該色調純度降低，黃色的耀眼特性相應緩和。

該頁面輔助色比較多，這里選了主要的三種淺黃、淺藍、棕紅色，明度純度不同的變化來分析。淺黃色的RGB三個數值接近，因此呈現偏灰的柔和狀態。正藍色的RGB數值R為0，G為255，B為255，該藍色RGB數值上看，混合了R紅色11，G的綠色數值較低，B藍色的數值較高，因此飽和度降低，顏色呈淺色調。棕紅色的RGB的三數值上看，R的數值最高為124，加入了對比色G綠色67，因此顏色變暗發烏，調入了適量B藍色24，因此該顏色飽和度亮度降低，也是該頁面沉穩的主要色調，牽制艷度較高的幾種顏色。

點睛色的HSB數值H色相為356度，幾乎呈正紅色，只是調入了少許B藍色18，因此顏色在明度上稍偏暗。另一點睛白色的作用除了提亮整個頁面，同時也突出標志圖像。

標志是紅色，下面的綠色是紅色的對比色，目的是突出標志的作用，同時也是黃色與藍色的中間視覺過渡色。

結論：

多種輔助色份量相當冷暖搭配時，有飽和度稍低的主色調牢牢把握住，整個頁面容易調和。

由于頁面顏色較豐富，點睛色在這里起到拉開各個色彩層次的作用，明確主次角色。

本部分小節：

●黃色是色彩系里明度最高的耀眼顏色，尤其是HSB數值H色相為60度正黃色時，它的特性越明顯。由于黃色的特性，在頁面配色的時候可適當添加明度較深的顏色，色階層拉開，并起到協調刺眼的艷度作用。黃色飽和度、明度的不同變化傳達不同的意義和作用。

●無論是高純度低純度還是多色彩的頁面配色，白色起到關鍵的作用。

●點睛色不一定就是非常顯眼的顏色，也有起到調和整體頁面配色的作用。

●中間色通常被大面積的使用為主色調、輔助色，是調和輔助色（有可能是同時幾種）與點睛色（有可能是幾種）的色彩，是調和色、調和方法的關鍵。網頁設計配色實例全文共81頁，當前為第30頁。綠色系綠色在黃色和藍色（冷暖）之間，屬于較中庸的顏色，這樣使得綠色的性格最為平和、安穩、大度、寬容。是一種柔順、恬靜、滿足、優美、受歡迎之色。也是網頁中使用最為廣泛的顏色之一。綠色與人類息息相關，是永恒的欣欣向榮是的自然之色，代表了生命與希望，也充滿了青春活力，綠色象征著和平與安全、發展與生機、舒適與安寧、松弛與休息，有緩解眼部疲勞的作用。它本身具有一定的與自然、健康相關的感覺，所以也經常用于與自然、健康相關的站點。綠色還經常用于一些公司的公關站點或教育站點。綠色能使我們的心情變得格外明朗。黃綠色代表清新、平靜、安逸、和平、柔和、春天、青春、升級的心理感受。下面我們根據綠色系不同屬性鄰近色、同類色的高純度低純度、對比色等色彩搭配做不同的舉例分析。綠色網頁例圖：綠色系分析：從上圖的主色調、輔色調HSB模式的數值可看出，這兩中顏色只是在明度上有區別，其顯示的色相與飽和度是一樣的。正綠色是120度，這兩種顏色從RGB數值上看，都不同程度的混合了其他少許顏色，因此離正綠色稍有些偏差。由于綠色本身的特性，所以整個網頁看起來很安穩舒適。

輔助色只在明度上降低，讓頁面多了些層次感、空間感。

白色塊面使得綠色的特性發揮到最好的狀態并增強了視覺節奏感。

點睛色恰到好處的體現出了”點睛”這一妙筆，極盡誘惑力，整個頁面頓時生動提神起來，增強了頁面主題的表達力。結論：主、輔色調是屬于同類色綠色系，通過不同明度的變化，能較遞增緩和變化同時卻也較明顯的體現出頁面的色彩層次感來。如果不是通過數值來分析判斷，可能會有些朋友憑經驗判斷，容易誤認為這兩種顏色除了明度外有可能純度會有所不同，這時候適當的使用數值模式會很容易得到正確的結論的。網頁設計配色實例全文共81頁，當前為第31頁。整個頁面配色很少：最大色塊的翠綠，第二面積的白色，第三面積的深綠色，但得到的效果卻是強烈的、顯眼的，達到充分展現產品主題的目的。網頁設計配色實例全文共81頁，當前為第31頁。深綠色給人茂盛、健康、成熟、穩重、生命、開闊的心理感受。綠色高純度網頁例圖：綠色系分析：(高純度配色：綠色+對比色組合)HSB數值H顯示60度為正黃色，該主、輔色調只向綠色傾斜了一丁點–H為75度。大面積明度稍低的黃綠色為主要色調，飽和度卻非常高，達到了100%，輔助色使用了提高明度的嫩綠色和白色，這兩種輔色除了增加頁面的層次感的同時，還能讓整個頁面配色有透亮的感覺，增強了綠色的特性。背景深褐色無疑把前景的所有純色烘托得都耀眼于舞臺上。該頁面有兩組小小的對比色，一組是黃綠與橙紅色，一組是橙黃色與天藍色，這兩組配色嚴格的來說不算對比色，因為色彩多少有些偏差。雖然它們的飽和度降低，但在這個頁面中足以構成了最響亮的色調，把整個頁面烘托得非?；钴S、鮮明。結論：主、輔色調黃綠色大面積使用并不刺目，反而使得頁面看起來很有朝氣、活力。網頁設計配色實例全文共81頁，當前為第32頁。適當運用不同純度的不是相當嚴格意義上的對比色系組合時，通常能起到的主要作用是主次關系明確。不”標準”的對比色系對比特性雖然減弱，頁面色彩看起來容易協調、柔和，但一樣能突出主題?！惿珳\綠色網頁例圖：網頁設計配色實例全文共81頁，當前為第32頁。綠色系分析：(同類色淺綠色)主色調綠色屬性是明度很高的淺綠色，前面提到過，通常情況下明度高飽和度就降低，飽和度低頁面色彩度就降低，除非顏色本身有自己的特性，加上大面積的輔助色白色，整個頁面看起來很清淡、柔和、寧靜，甚至有溫馨的感覺。頁面中使用了漸變的淺綠色，使得整個頁面視覺上更加柔和舒適。盡管點睛色只在主要標志上出現，按鈕也只有少許一點，但也給整個頁面的色彩帶來些亮筆。尤其是紅色的HSB模式的H數值顯示顏色接近于正紅色，飽和度達到最高值。另一個點睛色中黃色，在頁面視覺上呈綠色與紅色這一組對比色起到緩和視覺的作用。因為在色輪表上，黃色正是在綠色和紅色之間的過渡色。結論：淺綠色系有優雅、休息、安全、和睦、寧靜、柔和的感覺。漸變的效果更能加深這種印象。但頁面配色上淺色過多時，整個頁面容易呈現發”灰”的感受，這就需要適量的添加純度稍高的顏色例如左下角的輔助色綠色塊，適當的鮮艷的點睛都能很好的解決這一問題。網頁設計配色實例全文共81頁，當前為第33頁。綠色在黃色和藍色（冷暖）之間，屬于較中庸的顏色，這樣使得綠色的性格最為平和、安穩、大度、寬容。是一種柔順、恬靜、滿足、優美、受歡迎之色。也是網頁中使用最為廣泛的顏色之一。網頁設計配色實例全文共81頁，當前為第33頁。綠色與人類息息相關，是永恒的欣欣向榮是的自然之色，代表了生命與希望，也充滿了青春活力，綠色象征著和平與安全、發展與生機、舒適與安寧、松弛與休息，有緩解眼部疲勞的作用。它本身具有一定的與自然、健康相關的感覺，所以也經常用于與自然、健康相關的站點。綠色還經常用于一些公司的公關站點或教育站點。綠色能使我們的心情變得格外明朗。黃綠色代表清新、平靜、安逸、和平、柔和、春天、青春、升級的心理感受。下面我們根據綠色系不同屬性鄰近色、同類色的高純度低純度、對比色等色彩搭配做不同的舉例分析?！G色網頁例圖：http://www.網頁設計配色實例全文共81頁，當前為第34頁。綠色系分析：網頁設計配色實例全文共81頁，當前為第34頁。從上圖的主色調、輔色調HSB模式的數值可看出，這兩中顏色只是在明度上有區別，其顯示的色相與飽和度是一樣的。正綠色是120度，這兩種顏色從RGB數值上看，都不同程度的混合了其他少許顏色，因此離正綠色稍有些偏差。由于綠色本身的特性，所以整個網頁看起來很安穩舒適。輔助色只在明度上降低，讓頁面多了些層次感、空間感。白色塊面使得綠色的特性發揮到最好的狀態并增強了視覺節奏感。點睛色恰到好處的體現出了"點睛"這一妙筆，極盡誘惑力，整個頁面頓時生動提神起來，增強了頁面主題的表達力。結論：主、輔色調是屬于同類色綠色系，通過不同明度的變化，能較遞增緩和變化同時卻也較明顯的體現出頁面的色彩層次感來。如果不是通過數值來分析判斷，可能會有些朋友憑經驗判斷，容易誤認為這兩種顏色除了明度外有可能純度會有所不同，這時候適當的使用數值模式會很容易得到正確的結論的。整個頁面配色很少：最大色塊的翠綠，第二面積的白色，第三面積的深綠色，但得到的效果卻是強烈的、顯眼的，達到充分展現產品主題的目的。深綠色給人茂盛、健康、成熟、穩重、生命、開闊的心理感受。網頁設計配色實例全文共81頁，當前為第35頁。→綠色弱對比網頁例圖：http://www.網頁設計配色實例全文共81頁，當前為第35頁。綠色系分析：(黃綠色+弱對比)從HSB模式的數值上看，主色調是接近于黃色的基礎上加入了少許綠色在里面，飽和度和明度降低，色彩看起來較柔和。輔色調墨綠色的綠色的傾向稍高，飽和度也較高，只是明度降低，該色看起來踏實沉穩。點睛色紅色H數值為零度，呈正紅色，但是該顏色飽和度和明度降低，而紅色本身的色度比黃綠色要暗不少，因此顏色穩重。另一點睛色藍綠色，明度飽和度都很低，在頁面配色里似乎沒有點睛感覺，更多的是呈輔助狀態。結論：主色調是相對比較鮮亮的顏色，而輔助色和點睛色是屬于比較沉穩的顏色，頁面通過大小色塊的對比提高視覺的反差力度，增強頁面的感染力。網頁設計配色實例全文共81頁，當前為第36頁。由于整個頁面的飽和度整體稍微降低，因此該頁面配色較協調、緩和。網頁設計配色實例全文共81頁，當前為第36頁。→同類綠色+多種點睛色例圖：http://www.綠色系分析：(綠色配色：同類綠色+多種點睛色)主要色調HSB模式H數值顯示75度，依舊是色輪表里傾向于黃色區域方位邊緣的綠色，呈現出的黃綠色調。輔色調在明度上有些提亮，與主色調形成較強的對比。點睛色里所使用的對比色組合有兩組，紅色與綠色，藍色與橙黃色，其中黃色是介于暖色(橙黃、紅色)和冷色(綠色、藍色)的過渡色也是調和色。結論：網頁設計配色實例全文共81頁，當前為第37頁。通過上面的分析大家可以看到，該網頁的配色不少，而且還有兩組對比色在內，但是頁面配色也很協調。原因之一，從下面抽取的色塊可以看出來，是一個過渡柔和的色輪表：以黃色為中界一邊是較淺的黃綠到綠色再到藍色，另一邊是橙黃再到紅色。原因之二，點睛色畢竟是扮演著點睛色的角色，有主色調和輔色調大面積的控制，即便再多些點睛色也不至于很快干擾到頁面的整體配色。網頁設計配色實例全文共81頁，當前為第37頁。整個頁面保證了協調、不凌亂的步調，但是又能把商業網站的熱鬧氛圍體現得很好的渲染。此種配色方法值得我們學習借鑒?！G色鄰近色應用網頁例圖：http://www..uk綠色系分析：(鄰近色配色：綠色+藍色)全頁使用的主要色調基本上是屬于明度較高飽和度較低的顏色，其中還使用了漸變色緩和的過渡，因此頁面看起來舒服協調。網頁設計配色實例全文共81頁，當前為第38頁。主色調是飽和度較高的翠綠色運用于背景色，幾乎是調節于整個頁面的關鍵色。如果沒有這一背景色塊，整個頁面容易發灰。還有右邊的粉綠大塊面積稍多，有些灰的感覺，好在前景的文章使用了色度明度稍深的藍色壓住，稍顯好些，關鍵還是有白色的箭頭很好的把粉綠和藍色文字的色階拉開了距離。左邊的照片清晰且純度較高也對整個頁面配色起到一定的調節作用。網頁設計配色實例全文共81頁，當前為第38頁。點睛色主要是標志的顏色，如果可以忽略不計，頁面配色更趨于平淡。結論：明度較高飽和度較低的顏色，如果沒有明度較深飽和度較高的顏色進行勾勒或者點綴，這個頁面配色看起來容易發灰。→綠色對比色網頁例圖：http://www..br綠色系分析：(對比色配色：綠色+紅色)網頁設計配色實例全文共81頁，當前為第39頁。主色調是有點黃色傾向的綠色，從HSB數值上可以看到H為98度，綠色特性較明顯了。網頁設計配色實例全文共81頁，當前為第39頁。輔助色則是三個淺色系，起到調和整個頁面色彩的作用。粉紅和粉綠色分別取的是頁面綠色紅色通過提高明度而得，因此整個頁面色彩前后呼應、配色調和。點睛色紅色的HBS模式H數值351度，在色輪表上偏向于紫色方位，因此傾向于冷紅色，色度上稍有些刺目和艷麗。主色調綠色和點睛色紅色所放置的位置，讓頁面導航區域和內容區域視覺引導較為分明：主色調綠色的設計亮點既用于導航又很流暢自然的融合到背景，渾然一體;這里尤其是點睛色紅色放置于背景的處理很獨到，烘托突出于前景內容，在眾多網頁設計中并不多見。結論：整個頁面的配色取色于標志色，量身定做的感覺。適當的運用對比色有強調的感覺，但頁面配色處理上并不強烈、耀眼，因為使用了白色及其相應的提高明度的粉色做視覺的緩和處理。本部分小節：●綠色是緩和健康的顏色，HSB數值H色相為120度時是正綠色。大家通過以上的網頁實例可以看到，偏向于黃色方位的綠色運用得最多，也就更受到大眾的歡迎。純正的正綠色在視覺感受上可能稍微顯得有些色度較低的生硬，配色難度稍大。不同的黃綠色飽和度、明度的不同變化可以表達不同主題的頁面效果?！顸c睛色可以是幾種，也可以是不同對比色的組合，有的起到豐富并活躍頁面配色的視覺節奏，有的起到調和整體頁面配色的作用。網頁設計配色實例全文共81頁，當前為第40頁。輔助色通常是同類色系或者鄰近色系，起到輔助并烘托主色調的作用。輔色調和主色調分別在不同的頁面做為唯一高純度色的時候，能夠起到挽救于整個頁面發灰的作用。網頁設計配色實例全文共81頁，當前為第40頁?！癞斦麄€頁面配色明度太高色度降低時候，頁面容易呈現發灰的感覺，可以適當的使用少許純度較高或者明度較低的色系來加以改善。藍色系藍色是色彩中比較沉靜的顏色。象征著永恒與深邃、高遠與博大、壯闊與浩渺，是令人心境暢快的顏色。藍色的樸實、穩重、內向性格，襯托那些性格活躍、具有較強擴張力的色彩，運用對比手法，同時也活躍頁面。另一方面又有消極、冷淡、保守等意味。藍色與紅、黃等色運用得當，能構成和諧的對比調和關系。藍色是冷色調最典型的代表色，是網站設計中運用得最多的顏色，也是許多人鐘愛的顏色。

藍色表達著深遠、永恒、沉靜、無限、理智、誠實、寒冷的多種感覺。藍色會給人很強烈的安穩感，同時藍色還能夠表現出和平、淡雅、潔凈、可靠等。下面我們根據藍色系不同屬性的同類色、鄰近色、高純度對比、相對對比色等色彩搭配做不同的舉例分析。網頁設計配色實例全文共81頁，當前為第41頁?！{色高純度對比網頁例圖：網頁設計配色實例全文共81頁，當前為第41頁。藍色系分析：(高純度對比：藍色+玫瑰色)

藍色的HSB數值H色相為240度時是正藍色。上圖的HSB模式S數值顯示，所有主要配色的飽和度都是100%。從主色調、輔色調HSB模式的數值可看出，這兩種顏色在明度上有較大的區別，色相上稍有輕度變化，飽和度相同。RGB模式上看，主色調與輔色調R數值都為0，G綠色的數值和B藍色數值分量的變化，得到了不同藍色的兩結果。點睛色僅是R紅色與B藍色兩色調和而得沒有摻雜其他顏色，因此飽和度呈最高值100%。整個頁面配色的飽和度都為100%，頁面整體配色看起來視覺沖擊力異常強烈。

輔助色白色讓頁面上的顏色的特性發揮到極致，是不可缺少的輔助配色。結論：響亮、強烈刺激的詞語似乎都適用于上圖頁面，源于高純度烘托、微妙的冷暖變化配色上，體現出現代都市張揚時尚的氣息。白色塊面的線型使得這種高純度高強度的配色變得響亮卻也緩和。

輔色調藍色的運用透露出設計師的大膽與魄力，玫瑰色在色輪表里算是冷色系，但是與藍色廣義上的對比來說是暖色，在這里與藍色搭配算是絕配了。整個頁面無不體現出特色和個性。網頁設計配色實例全文共81頁，當前為第42頁?！{色淺藍色網頁例圖：/start.html網頁設計配色實例全文共81頁，當前為第42頁。藍色系分析：(同類色：淺藍色)

主色調HSB數值H顯示200度，色輪度稍向綠色方位傾斜，但是由于從180度到270度基本上給人的視覺呈現還是藍色范疇，因此與視覺上廣義的藍色差別不大。

該頁面中間色較多，主要是在藍色范疇內做明度的變化，所以色度差非常緩和，以致于頁面的色彩呈現非常柔和，甚至稍有些發灰的感覺，好在該頁面還有些較大色塊的淺藍色及白色，拉大了頁面的色階，使得這種灰的感覺減弱不少。

點睛色的HSB數值是258，色輪趨勢是向暖色紫色(相對冷暖色)傾向，變化微妙，是本頁面最溫暖的顏色。藍紫色在色相環中位于藍色和紫色之間，所以它也蘊含著紫色的一些神秘感，加上淺藍色的雅致，所以亮度較高的藍紫色顯得非常高雅。在網頁中，藍紫色通常與藍色一起搭配使用。網頁設計配色實例全文共81頁，當前為第43頁。結論：

淺藍色給人一種很寧靜安靜的心理感受。淺藍色系有淡雅、清新、浪漫、高級的特質，常用于化妝品、女性、服裝網站。它是最具涼爽，清新特征的色彩。和白色混合時，能體現柔順，淡雅，浪漫的氣氛。

主色調選擇明亮的藍色，配以白色的背景和灰亮的輔助色，可以使站點干凈而整潔，給人莊重、充實的印象。

該頁面基本上屬于同類色系，也是最保守穩妥且調和的配色方案。但該種配色看久了容易呈現出平淡乏味的感受。網頁設計配色實例全文共81頁，當前為第43頁?！{色深藍色網頁例圖：藍色系分析：(深藍色)

HSB數值顯示主色調和輔色調的H色相接近，飽和度為最高，都為100%，兩者只在明度上有區別，分別是35%和65%。三維厚重的設計風格，用調和法之一的漸變手法，把主色調和輔色調進行了緩緩的過渡，增強了層次感，體現個性魅力，符合該頁面視音頻風格網站的主題。

雖然是被譽為點睛色，但從整個頁面來看由于面積關系，點睛色在這里所起的作用不大，僅僅就蜻蜓點水而已。相反的輔助色在這里卻起到了較為突顯的作用——讓整個沉悶的本只起烘托作用的深藍色得到充分的展示。另一輔色調灰色令白色與深藍色反差不易過大，起到調和的目的。白色增強了整個頁面的視覺感，使之更醒目。網頁設計配色實例全文共81頁，當前為第44頁。結論：

深藍色是沉穩的且較常用的色調。能給人穩重、冷靜、嚴謹、冷漠、深沉、成熟的心理感受。它主要用于營造安穩、可靠、略帶有神秘色彩的氛圍。

深藍色明度偏暗，基于上面對深藍色的特質描述，在常規網站的設計里，可能不適合做太大面積的使用。但根據不同網站主題的設計需要可以做些不同的嘗試。網頁設計配色實例全文共81頁，當前為第44頁?！{色純度對比網頁例圖：.uk藍色系分析：(純度對比)

從HSB模式上的數值顯示情況進行分析，全頁基本上是屬于高純度配色，各顏色特性相互輝映、相互交融，把整個頁面環境渲染得異常鮮亮和熱鬧。

冷暖色系之間跨度很大：藍色、綠色、黃色、橙黃色、朱紅色、土橙黃色、墨綠色，幾乎按照色輪表上的軌跡進行。也由于面積有多有少的原因，因此頁面看起來較明快調和。其中土橙黃色和墨綠色是頁面明度最重的顏色，從RGB色值上可看出，都分別的混合了其他顏色，因此飽和度相對較低，略呈灰色狀態，另一種意義上來說這種灰色狀態是調和色的一種很好的方式。

由于有大面積的主色調和背景色做掌控，加之以上因素綜合分析，無論頁面再多再細再耀眼的顏色都能很好的統一在同一個頁面之中。結論：

非常明快活潑、跳躍的富有趣味性的配色。使人勾起了無限愉悅的童趣。

高純度的藍色主色調配合的其他高純度冷暖色調對比，會營造出一種整潔輕快的印象。

根據色輪表的緩和過渡及使用面積多少，判斷分析出頁面調和程度。網頁設計配色實例全文共81頁，當前為第45頁?！{色鄰近色網頁例圖：網頁設計配色實例全文共81頁，當前為第45頁。藍色系分析：(藍色鄰近配色：藍色+綠色)

從HBS模式的S飽和度數值100%上看，不少朋友會有疑惑的感覺，認為看起來較為柔和的顏色，飽和度或許會低，刺眼的顏色通常飽和度較高，其實不然，每個顏色有每個顏色的不同屬性特性。高純度的色彩，明度的降低是協調視覺的一個因素，容易給人造成低純度的錯覺。

不同塊面的鄰近色交錯排列，增強本頁面視覺動感。

輔色調淺藍色是背景色白色和主色調藍色的中間色，它形成了頁面配色的中間色階，色彩層次感增強以外，還使整個頁面的顏色更為和諧。

另一輔色調青色，是藍色和綠色的結合體，包括在標志文字、文字標題上的運用，無疑活躍了整個頁面的配色環境。

兩個點睛色都略調高了明度，另一意義上是該頁面配色的中間色階。兩點睛色都是在主色調藍色、輔色調青色的基礎上衍生出來的顏色，這里“點睛”的作用不大，都屬于和諧色系。網頁設計配色實例全文共81頁，當前為第46頁。結論：

很多站點都在使用藍色與青綠色的搭配效果。藍色、青綠色、白色的搭配可以使頁面看起來非常干凈清澈，在我們的現實生活中運用的范圍很廣，可以說是隨處可見的。

主顏色選擇明亮的藍色，配以白色的背景和灰亮的輔助色，加上中間色階的運用，可以使頁面有干凈整潔，給人莊重、充實的印象。

這是一組非常愉悅和諧的鄰近色系配色。中間色適度面積的運用及背景白色讓這組顏色特征發揮到了極致。網頁設計配色實例全文共81頁，當前為第46頁。→藍色強對比網頁例圖：網頁設計配色實例全文共81頁，當前為第47頁。藍色系強對比：藍色+紅色

藍色是冷色系的最典型的代表了，而紅色是暖色系里最典型的代表，兩冷暖色系對比下讓全頁的色彩對比異常強烈且興奮，很容易感染帶動瀏覽者的激昂情緒。紅色把文字圖片框起來，在藍色背景對比下，很好的突出主題，又好似模仿投影熒屏的感覺，讓人迅速的聚焦于視頻中心，達到網站背后的最終目的。

輔色調是紅色，從數值上看接近于正紅色，紅色對視覺傳遞的信息是很快的，屬于高昂響亮的顏色。

點睛色分別是黃色、黃綠色。大家知道，黃色是明度最高的顏色，也較響亮、刺目，在這里的運用能強烈的突現標題。從大的來看，點睛色黃綠色與輔助色紅色是對比色，雖然面積不太大，只小范圍的對比，但是已經足以達到了迅速傳遞信息的效果，讓人印象深刻，促成再訪點擊。網頁設計配色實例全文共81頁，當前為第47頁。結論：

冷暖色系的對比碰撞，充滿激情，能傳遞熾熱情感、強烈刺激主題的目的。

該頁面運用了冷暖、紅綠兩種比較鮮明的對比色，配色積極大膽，視覺沖擊力很強。→藍色對比網頁例圖：網頁設計配色實例全文共81頁，當前為第48頁。藍色同類色對比：藍色+暖色

這是一個配色難度較大的頁面。如何使這些配色和諧又能達到帶動對比的目的，就要求要有一定的配色經驗了。難度一，在于主色調輔色調及點睛色的這三種藍色所充當的角色運用。難度二，高純度高亮度的正黃色在這個頁面的使用。難度三，黑色的運用。

運用排除法細分得到：主色調輔色調的藍色飽和度一樣都是最高值，色相H上稍微有些微妙區別，亮度上有些變化。點睛色藍色飽和度和明度都較低，介于兩種藍色之間。三者面積如果用得不好頁面容易呈混沌的灰色狀態。拿出輔色調藍色，再回到整個頁面的配色來看，頁面色彩偏重，亮度不夠，缺少中間色階，冷暖主次傾向不夠明顯，這時把輔色調藍色添加進去正好彌補了這種缺憾。

HSB模式顯示H是60度，S飽和度與B明度都是100%，正是正黃色。正黃色只適合做小面積的點睛色使用，大面積使用頁面配色較難協調，當然正黃色做為主色調能好配色些。

在這樣的頁面色彩組合里，黑色是很難運用進去的，面積使用多了，頁面有可能會破壞所營造的氛圍、產生不協調的感覺。只在輔助性的勾勒于邊框是很好的使用辦法。

圖片里的產品顏色，有降低純度的棕黃色、土黃色、米黃色等同類黃色系，對該頁面色彩組合調配具有一定的協調能力。網頁設計配色實例全文共81頁，當前為第48頁。結論：

通常矢量頁面的配色相對于圖片配色來說，難度較大，色彩的組織搭配，是根據設計師們自己以往的豐富配色經驗，反復調配、反復加減而得。

該頁面設計師選取了頁面的產品圖片中的兩三種顏色，例如點睛色里的紅色、藍色和黃色，再大膽的發揮出主色調藍色、較淺的輔色調藍色和點睛色正黃色，點睛色黃色運用于最能突出產品特色的文字上，這些和諧的元素生動趣味，讓整個頁面充滿了故事情節。本部分小節：●HSB數值H色相為240度時是正藍色，它的特性這個時候也就揮灑得越明顯。從以上不同屬性的藍色頁面色調上能看到，不同色相、飽和度、明度的藍色本身色彩特性表現得不是非常特殊，這也是低調沉穩的藍色所具備的特征之一。關鍵在于該種藍色都與哪種哪幾種顏色襯托、對比的。●冷色系以藍色為最典型的代表，因此就產生了廣義的相對暖色，例如當與玫瑰紫色做對比時，玫瑰紫就呈現出微妙的暖色，當與綠色做對比色，綠色就呈出了相對的暖色，但是此種特性呈現得非常的微弱，應根據不同的主題頁面做具體分析?！癞斣谒{色色相、明度上暗色亮色非常明朗的情況下，可以考慮添加中間色，減弱可能造成的單調感，豐富兩極色階的過渡，調和頁面的視覺感受?！裢环NRGB、HSB數值的藍色與不同的顏色搭配時，所反映出的特性與主題是不一樣的。例如與同類色(根據色相明度純度面積等同類色里得到很多種不同的藍色)，與鄰近色(根據色相明度純度面積等衍生出更多顏色)，與對比色(根據色相明度純度面積等產生出的廣義對比狹義對比)……應多多思考、多做嘗試。紫色系網頁設計配色實例全文共81頁，當前為第49頁。紫色是一種在自然界中比較少見的顏色。象征著女性化，代表著高貴和奢華、優雅與魅力，也象征著神秘與莊重、神圣和浪漫。另一方面又有孤獨等意味。紫色在西方宗教世界中是一種代表尊貴的顏色，大主教身穿的教袍便采用了紫色。

紫色的明度在有彩色的色度中是最低的。紫色的低明度給人一種沉悶、神秘的感覺。在紫色中紅的成份較多時，顯得華麗和諧。紫色中加入少量的黑，沉重、傷感、恐怖、莊嚴的感覺。紫色中加入白，變得優雅、嬌氣，并充滿女性的魅力。

紫色通常用于以女性為對象或以藝術作品介紹為主的站點，但很多大公司的站點中也喜歡使用包含神秘色彩的紫色，但都很少做大面積使用。

不同色調的紫色可以營造非常濃郁的女性化氣息，在白色的背景色和灰色的突出顏色的襯托下，紫色可以顯示出更大的魅力。

下面我們根據紫色系不同屬性的鄰近色、高純度低純度配色、相對對比色等色彩搭配做不同的舉例分析。

→紫色高純度網頁例圖：http://

紫色系分析：（高純度對比：同類紫色+同類對比色）

紫色的HSB數值H色相為300度時是正紫色。上圖的HSB模式S數值顯示，上組顏色飽和度基本都比較高，加上部分較高的明度組合，使該頁面異常奢華艷麗。

輔色調之一的黃色是紫色強度最高的對比色，主、輔色面積的大小不同是形成視覺沖擊網頁設計配色實例全文共81頁，當前為第50頁。力最大的主要原因。值得一提的是右下腳的淺藍色的運用，它在整個頁面配色上是很謙遜的角色，但卻既突出上面的文字內容，又不張揚的壓抑住其他顏色的配色，屬于豐富于頁面的輔助作用。如果把它試換成別的顏色似乎還是沒有這個淺藍色效果好。

另一輔助色淺紫紅色又稱粉紅色，粉紅色主要用于包含少女在內的女性站點。因為從明亮到淺白色調的粉紅色能夠表現出可愛、乖巧的感覺，這里只做少量運用。

其他點睛色使用得雖多但面積很小，主要是主色調紫色附近的過渡色，例如群青、青蓮、玫瑰、紅色等點綴，閃亮耀眼，增強頁面的視覺感染力，有渲染出華麗凸顯現代氣息的作用。

結論：

紫色結合紅色的紫紅色是非常女性化的顏色，它給人的感覺通常都是浪漫、柔和、華麗、高貴優雅，特別是粉紅色可以說是女性化的代表顏色。高彩度的紫紅色可以表現出超凡的華麗，而低彩度的粉紅色可以表現出高雅的氣質。

紫紅色并不能隨意在所有的站點中使用，但使用恰當的紫紅色會給人留下深刻的印象。高彩度的紫色和粉紅色之間的搭配通常都能得到較好的效果。

該頁面具有非常強烈的現代奢華感。時尚張揚的配色組合，符合該頁面主題所要表達的環境，讓人容易記住它。網頁設計配色實例全文共81頁，當前為第49頁。網頁設計配色實例全文共81頁，當前為第50頁。網頁設計配色實例全文共81頁，當前為第51頁?！仙珳\紫色網頁例圖：

紫色系分析：（淺紫色）

該頁面使用特性最高的紫色提亮為100％高明度的主色調，很容易抓住人們的視線成為聚焦點，是非常大膽又時尚的配色。

輔色調則是使用冷色系代表的深藍色，明度較低。主要是為了烘托左邊導航菜單，凸顯上面的內容信息，由于人們對網頁已然形成了視覺慣性，也起到了很好的視覺引導作用。

主、輔色的搭配運用構成了較強烈的視覺對比效果。

另一輔色調淺藍色，在主色調淺紫色的烘托下呈現稚嫩的感受，里面的白色塊起到淺紫的背景和淺藍色調和、明快的作用。

點睛色的使用實際有不少，這里只選幾種起到主要作用的顏色做舉例分析。中黃色運用得很珍貴，只在左上區域出現，旨在突出主題文字的效果。其他配色主要是根據左下文字字母而來，紅和綠色出現在頁面的淺紫色較為寬敞的位置，小范圍的做色彩對比效果。其他點睛色則極少的零星分布，既調和呼應又起到活躍于頁面的角色作用，以上這些都是點綴和渲染頁面氣氛不可缺少的配色元素。

結論：

在紫色中加入白色，可使紫色略顯沉悶的特征消失，變得清秀、優雅、嬌氣，并充滿女性的魅力。

白色、粉紫色、天藍色的顏色搭配，是比較稚嫩的配色，同時也是最受少女歡迎的配色方案，這里運用也較得體。

使用高明度高飽和的主色調非常個性，讓人很容易記住它，但是色彩都有兩面性，此種顏色略顯驕躁感過于刺激視覺，不易于長時間的注目瀏覽。網頁設計配色實例全文共81頁，當前為第51頁。網頁設計配色實例全文共81頁，當前為第52頁。→紫色深紫色網頁例