網頁設計配色基礎、應用及實戰
註：本專題部分理論節選於本文作者黎芳(Redfall)的《網頁設計與配色實例分析》一書的第二部分第五章，由希望電子出版社出版。網上購買：China-PubRGB與HSB在實用美術中，常有"遠看色彩近看花，先看顏色後看花，七分顏色三分花"的說法。這也就說明，在任何設計中，色彩對視覺的刺激起到第一信息傳達的作用。因此，對色彩的基礎知識的良好掌控，在網頁設計中才能做到遊刃有餘。為了使下面的網頁配色分析更易於理解，我們先來了解色彩的RGB模式和HSB模式。 RGBRGB是表示紅色綠色藍色又稱為三原色光，英文為R(Red)、G(Green)、B(Blue)，在電腦中，RGB的所謂"多少"就是指亮度，並使用整數來表示。通常情況下，RGB各有256級亮度，用數字表示為從0、1、2至255。雖然數字最高是255，但0也是數值之一，因此共256級。按照計算，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256＝16777216。通常也被簡稱為1600萬色或千萬色。也稱為24位色(2的24次方)。對於單獨的R或G或B而言，當數值為0時，代表這種顏色不發光；如果為255，則該顏色為最高亮度。因此當RGB三種色光都發到最強的亮度，純白的RGB值就為255,255,255。屏幕上黑的RGB值是0,0,0。R，意味著只有紅色存在，且亮度最強，G和B都不發光。因此最紅色的數值是255,0,0。同理，最綠色就是0,255,0；而最藍色就是0,0,255。黃色較特殊，是由紅色加綠色而得就是255，255，0。（詳細分析請參考趙鵬所寫的《電腦美術設計中的色彩模式詳解》）
純白色數值為R255,G255,B255純黑色數值為R0,G0,B0
紅色數值為R255,G0,B0綠色數值為R0,G255,B0
藍色數值為R0,G0,B255黃色數值為R255,G255,B0RGB模式是顯示器的物理色彩模式。這就意味著無論在軟體中使用何種色彩模式，只要是在顯示器上顯示的，圖像最終就是以RGB方式出現。 HSB是顏色分為色相、飽和度、明度三個因素。英文為H(Hue)、S（Saturation）B（Brightness)飽和度高色彩較艷麗。飽和度低色彩就接近灰色。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到純白，最低得到純黑。一般淺色的飽和度較低，亮度較高，而深色的飽和度高而亮度低。色彩三屬性與實例剖析許多初學者對色彩的屬性和原色概念模糊，容易混淆，下面我們就先從幾個概念入手。今天介紹色彩的三個屬性。顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色，而其他所有顏色均屬於彩色。從心理學和視覺的角度出發，彩色具有三個屬性：色相、明度、純度（彩度）。
基本色相環 色相（Hue）：也叫色調，指顏色的種類和名稱，是指顏色的基本特徵，是一種顏色區別於其他顏色的因素。色相和色彩的強弱及明暗沒有關係，只是純粹表示色彩相貌的差異。如紅、黃、綠、藍、紫等為不同的基本色相。 明度（Value）：也叫亮度，指顏色的深淺、明暗程度，沒有色相和飽和度的區別。不同的顏色，反射的光量強弱不一，因而會產生不同程度的明暗。非色彩的黒、灰、白較能形象的表達這一特質。
明度的遞增→ 明度網頁例圖：http://www.once-upon-a-forest.com
明度分析：從上圖網頁所選取的4個主要色塊的RGB數值來看，這4塊色彩組合顯示的RGB數值很高，接近於最高值255。RGB相互間的數值相近，由於有RG的高數值與B高數值混合，整個網頁給人的感覺非常協調，柔和雅緻，心情愉悅。結論：RGB同時呈現相近的高數值時，相近等量的色彩相互混合，頁面呈高明度灰色段，協調的柔和狀態，令人遐想，對視覺刺激是緩慢的，適合長時間觀看。但由於數值接近，因此色階平穩，同時存在著不夠醒目的狀態。 純度(Chroma）：也叫飽和度，指色彩的鮮艷程度。原色最純，顏色的混合越多則純度逐漸減低。如某一鮮亮的顏色，加入了白色或者黑色，使得它的純度低，顏色趨於柔和、沉穩。
加入黑色的純度變化和加入白色的純度變化→ 純度網頁例圖：http://www.minimalweb.de
純度分析：上圖網頁中選取了主要的兩種色係為組合。運用HBS數值模式更易於理解分析該網頁的純度情況。我們看到藍色S數值呈現99％具有相當高的飽和度，B明度為79%，玫瑰色S飽和度數值為85%，B明度為97％。當飽和度和明度同時呈最高值時，色彩對視覺的刺激強度到達最高狀態。由於藍色的明度稍低，飽和度較高，而玫瑰色的明度較高，該顏色純度隨之加強，因此玫瑰色相對藍色對人的視覺刺激更強烈。結論：HSB模式中S和B呈現的數值越高，飽和度明度越高，頁面色彩強烈艷麗，對視覺刺激是迅速的，醒目的效果，但不易於長時間的觀看。以上兩種顏色的S數值接近，是強烈的狀態。H顯示的度是代表在色輪表裡某個角度所呈現的色相狀態，相對於SB來說，意義不大。常用配色基本概念及精彩相關實例剖析1紅黃藍三原色 配色及實例剖析
點擊查看《網頁設計配色基礎、應用及實戰》完整專題在實用美術中，常有"遠看色彩近看花，先看顏色後看花，七分顏色三分花"的說法。這也就說明，在任何設計中，色彩對視覺的刺激起到第一信息傳達的作用。因此，對色彩的基礎知識的良好掌控，在網頁設計中才能做到遊刃有餘。前面我們介紹了常用的電腦色彩模式RGB、HSB，以及色彩的三大屬性，今天我們介紹常用配色的基本概念和相關實例剖析。
色環色環是色彩按紅、黃、綠、藍、紅依次過度漸變呈現出來的不同顏色，就可以得到一個色彩環。色環通常包括12種不同的顏色。
三原色 原色：也叫"三原色"。即紅、黃、藍三種基本顏色。自然界中的色彩種類繁多，變化豐富，但這三種顏色卻是最基本的原色，原色是其他顏色調配不出來的。除白色外，把三原色相互混合，可以調和出其他種顏色。根據三原色的特性做出相應的色彩搭配，有最迅速最有力最強烈的傳達視覺信息效果。→ 黃色網頁例圖：http://www.uni-leipzig.de/studienart/i_flash.htm
黃色分析：選取了主色調黃色為示例。我們看到RGB數值中RG呈現最高值255時，HSB數值中的SB也呈現最高值100%，頁面呈現最高純度亮度——純黃色。因此黃色在三原色中也是亮度最高的顏色。結論：HSB中SB呈現的數值越高，飽和度明度越高，頁面色彩強烈艷麗，由於黃色是亮度最高的顏色這一特性，也給人視覺產生強烈刺激的狀態，對視覺刺激是迅速的、警戒、醒目的效果，但不易於長時間觀看。→ 紅色網頁例圖：http://www.doritos.com
紅色分析：我們看到RGB中R的數值是227，混合了G30、B40，因此紅色的純度輕微降低，顏色稍偏深紅。HSB數值中S顯示的飽和度為87%，B為89%，因此顏色還是較為飽和明亮。結論：主色R227數值較高的時候，由於混合了G30、B40少許顏色，飽和度明度稍微降低，視覺刺激減弱，紅色特性顯得較沉穩。但由於紅色是最溫暖最有視覺衝擊力的顏色特性，該網頁整體看來仍然厚重而熱烈的表達了主題。 → 藍色網頁例圖：http://www.voxhon.com
藍色分析：RGB數值中B藍色的數值是131與 R2、G83相混合，藍色的純度降低。結合HSB中數值H色相目前顯示的是203°，而三原色的純藍為240°來看，藍色的色相偏離較大，加上B為51%的明度，顏色偏暗，因此視覺衝擊力較弱。頁面沉穩、凝重。結論：當藍色色相偏離於三原色的純藍時，視覺衝擊力削弱。頁面呈沉穩、平靜的感受。藍色在三原色里是視覺傳遞速度最慢的顏色特性，適合用於表達成熟、穩重、安靜的網頁設計主題。藍色在網頁設計里也是使用得較頻繁的顏色。2間色、複色、補色
間色 間色：又叫"二次色"。它是由三原色調配出來的顏色，是由2種原色調配出來的。紅與黃調配出橙色；黃與藍調配出綠色；紅與藍調配出紫色，橙、綠、紫三種顏色又叫"三間色"。在調配時，由於原色在份量多少上有所不同，所以能產生豐富的間色變化。→ 間色網頁例圖：http://cidadefm.clix.pt
間色分析：上網頁例圖4種間色搭配一起非常明快、鮮亮。從RGB數值顯示上看，綠色含量較高達到208，混合了R189的黃色光，因此顏色偏黃綠色，由於添加了B18，飽和度相對降低。玫瑰色中R的含量最高，與B109混合為主要組成色，添加了少量的G27黃，純度偏高。橙色中R的含量很高為255，混合了G145黃為主要組成色，添加了第三色B34，飽和度稍降低。紫色是由藍色和紅色調配而成，B為170，R為148，混色份量相當也就成為了組合紫色這一間色的主要成份，但是由於添加了G87，也是4組顏色中的間色混合第三色數值最高的，HSB中S數值相對其他三色，降低很多，因此顏色相對於其它3種較沉穩，緩和。以上4組顏色RGB數值的共同點是以兩色混合為主，都是三位數值，另外一色份量較少，為兩為數值，因此飽和度較高，色相傾向明顯。HSB數值的共同點是，除了紫色，其他三色的S飽和度相當，屬較高數值，因此視覺刺激也強。結論：間色是由三原色中的兩原色調配而成的，因此在視覺刺激的強度相對三原色來說緩和不少。屬於較易搭配之色。間色儘管是二次色，但仍有很強的視覺衝擊力，容易帶來輕鬆、明快、愉悅的氣氛。
複色 複色：也叫"複合色"。複色是由原色與間色相調或由間色與間色相調而成的"三次色"，複色是的純度最低，含灰色成份。複色包括了除原色和間色以外的所有顏色。→ 複色網頁例圖：http://www.benharper.net
複色分析：以上4種顏色中深綠色和赭石色為複色，之所以還選擇其它2顏色，為的是更好的配合說明複色的特性，如果沒有另外兩種非複色搭配，頁面配色就可能出現骯等不舒服的感覺。我們看到深綠及赭石這兩種複色的數值都以一個份量最多的三位數，另外兩者成份相當，都為兩位數組合而得。RGB之間的數值差距較接近、不明顯，色階較趨於直線平穩，呈灰階。HSB中SB顯示的數值也非常接近，成為符合複色特性的必須條件。結論：複色是由兩種間色或原色與間色混合而成，因此色相傾向較微妙、不明顯，視覺刺激度緩和，如果搭配不當，頁面便呈現易臟或易灰朦朦的效果，沉悶、壓抑之感，屬於不好搭配之色。但有時複色加深色搭配能很好的表達神秘感、縱深感空間感；明度高的多複色（參看明度的網頁例圖）多用來表示寧靜柔和、細膩的情感，易於長時間的瀏覽。
補色 補色：是廣義上的對比色。在色環上劃直徑，正好相對（即距離最遠）的兩種色彩互為補色。如：紅色是綠色的補色；橙色是藍色的補色；黃色是紫色的補色。補色的運用可以造成最強烈的對比。→ 補色網頁例圖：http://www.upsod.org
補色分析：選用了一組紅綠對比色，極賦視覺衝擊力、所表現出的性格異常鮮明。我們看到RGB中綠色的數值顯示情況符合複色的條件，因此註定了該顏色明度稍暗、純度較低的特性，而紅色R數值118構成了該色的主要成份，其他G72，B61數值接近，純度和亮度相對綠色較高，因此2色在構成色彩空間差距上拉大。HSB中2色的S數值也顯示出，它們的飽和度相差較大。結論：補色最能傳達強烈、個性的情感。純度稍低的綠色為背景的大面積使用，對比並突出了前景純度明度較高的面積較小紅色的圖形，形成了視覺中心重點突出，達到主次分明的主題效果。紅綠、橙藍、黃紫這三組補色中，前兩種使用得最頻繁。這三組補色搭配出的最終效果和目的，可以用兩個字來概括——強烈！3鄰近色、同類色
鄰近色 鄰近色：是在色環上任一顏色同其毗鄰之色。鄰近色也是類似色關係，只是範圍縮小了一點。例如紅色和黃色，綠色和藍色，互為鄰近色。→ 鄰近色網頁例圖：http://www.artoyz.com
鄰近色分析：上圖選用了紅色、黃色為鄰近色示例，主要在色相上做區別豐富了頁面色彩上的變化。RGB數值上看，以上5色R的數值都很高，僅是微妙的不同。其中淺黃色的B為138，因此在HSB數值中純度S顯示最低，為46%；5色RGB中G的數值都不同，色相、明度也產生相應的不同。從數值上分析整體看來，5色都有在同一頻率的變化。結論：由於是相鄰色系，視覺反差不大，統一、調和，形成協調的視覺韻律美，相較顯得安定、穩重的同時不失活力，是一種恰到好處的配色類型。
同類色 同類色：比鄰近色更加接近的顏色，它主要指在同一色相中不同的顏色變化。例如，紅顏色中有紫紅、深紅、玫瑰紅、大紅、朱紅、桔紅等等種類，黃顏色中又有深黃、土黃、中黃、桔黃、淡黃、檸檬黃等等區別。它起到色彩調和統一，又有微妙變化的作用。→ 同類色網頁例圖：http://www.misspato.com
同類色分析：選用紅色系4種同類色示例，主要在明度上做區別變化。由於是紅色系，4色RGB數值中的R，數值都很高，且相當。從HSB數值看出，明度越高的顏色飽和度越低。這4種同類色相來看，明度在強中弱的節奏中的緩和的進行變化。結論：第一眼看上去給人溫柔、雅緻、安寧的心理感受，便可知該組同類色系非常調和統一。只運用同類色系配色，是十分謹慎穩妥的做法，但是有時會有單調感。添加少許相鄰或對比色系，可以體現出頁面的活躍感和強度。4冷色、暖色
暖色 暖色：指的是紅、橙、黃、這類顏色。暖色系的飽和度越高，其溫暖特性越明顯。可以刺激人的興奮性，使體溫有所升高。→ 暖色網頁例圖：http://www.mrwong.de
暖色分析：由於是暖色系，以上3種顏色RGB數值中R的含量為主導，B都為0，暖度強度傾向在G的添加黃色成份變化中可以看到，較規律的數值變化、較有視覺節奏感。HSB中純度S和明度B都達到最高值，是鮮艷奪目的搭配色組合。結論：高明度高純度的色彩搭配，把頁面表達得鮮艷炫目，有非常強烈刺激的視覺表現力。充分體現了暖色系的飽和度越高，其溫暖特性越明顯的性格。
冷色 冷色：指的是綠、青、藍、紫等顏色，冷色系亮度越高，其特性越明顯。能夠使人的心情平靜，清爽，恬雅。→ 冷色網頁例圖：http://www.portaldemoda.pt
冷色分析：該網頁示例主要選用了鄰近色系藍色綠色和同類色的明度變化。其中3種藍色系的RGB數值從二位數到三位數，隨著明度的遞增的同時，由低到高在有規律有節奏的變化。HSB的數值SB也相對隨著同比變化，純度S的含量都不大，因此這幾組色彩相對含蓄柔和。綠色系RGB數值G的色相明顯，相應添加了高亮度的黃色R，使色彩較鮮艷明快。HSB數值SB也顯示出其高純度高亮度的特性。結論：冷色系的亮度越高，其特性越明顯。單純冷色系搭配視覺感比暖色系舒適，不易造成視覺疲勞。藍色、綠色是冷色系的主要系，是設計中較常用的顏色，也是大自然之色，帶來一股清新、祥和安寧的空氣。本部分小結：● 從以上例子可看出三原色視覺衝擊力最強，也最是刺目的，容易製造衝突、煩燥、不舒適的心情，所以是較難掌握的配色，大面積大範圍使用要慎重。間色是由三原色中的兩色調配二次，間於原色和複色之間，屬於中性色，視覺衝擊力次之，顏色的刺激緩和不少，給人舒適、愉悅的心情，是較容易掌握的配色，也是在設計中使用得比較多的顏色。複色是由兩種間色或原色與間色相混合而產生的顏色，呈灰色階，視覺衝擊力更弱，柔和但是使人沉悶壓抑。複色調配好了，能體現出高層次高素養的成熟特性魅力，也稱為高級灰，是很經看的顏色。由上可知，顏色相互混合的越多，飽和度越低，視覺衝擊力越弱。● 色彩運用到一定程度後，應該逐漸認識到在一個環境、區域範圍里，色彩的屬性、性能特性是相對的。例如黃色在藍色、綠色這兩個區域環境下，黃色可以說這個時候是呈暖色，而出現在桔紅、朱紅、深紅這幾個區域環境下，黃色可以說在這個時候是呈冷色。同樣的，藍色相對綠色是冷色，紫色相對藍色是暖色等等。可根據網頁設計主題的目的要求，環境協調度的需要等等做相應的搭配調整。● RGB三者的數值越接近，色階較趨於直線平穩，呈灰階，網頁對視覺的刺激性越緩慢、柔和；RGB三者的數值相互間差距越大，色階曲線波動就大，網頁對視覺的刺激性越迅速、強烈。HSB數值中SB相應數值越高，視覺刺激度越強烈。抓住以上這些規律及色彩特性，在以後的網頁設計配色中，根據不同的需要配置不同的顏色，來達到某些不同的目的和效果。通過RGB數值和HSB數值的計算，能幫助更科學理性的分析判斷，為的是更準確的研究分析網頁設計配色的協調性、合理性、掌握其規律性。有經驗的設計師通常僅僅憑目測、直覺，就能隨心所欲的掌控色彩的配置了。但如遇到困惑，不防也使用一下模式計演算法。網頁設計配色應用——色調前面我們介紹了常用的電腦色彩模式RGB、HSB，以及色彩的三大屬性，還有常用配色的基本概念和相關實例剖析。今天開始我們介紹應用部分，本節介紹調色。網頁頁面中總是由具有某種內在聯繫的各種色彩，組成一個完整統一的整體，形成畫面色彩總的趨向，稱為色調。也可以理解為色彩狀態。色彩給人的感覺與氛圍，是影響配色視覺效果的決定因素。為了使網頁的整體畫面呈現穩定協調的感覺，以便充分的掌握其規律來更好的分析學習，我們把視覺角色主次位置分為如下幾個概念，以便在網頁設計配色時更容易操縱主動權。 主色調頁面色彩的主要色調、總趨勢，其他配色不能超過該主要色調的視覺面積。（背景白色不一定根據視覺面積決定，可以根據頁面的感覺需要。） 輔色調僅次與主色調的視覺面積的輔助色，是烘托主色調、支持主色調、起到融合主色調效果的輔助色調。 點睛色在小範圍內點上強烈的顏色來突出主題效果，使頁面更加鮮明生動。 背景色襯托環抱整體的色調，協調、支配整體的作用。→ 色調網頁例圖：http://www.robinssondivision.com
本部分小節：一個頁面的色彩角色主要是根據其面積多少的來區別主次關係、達到最終目的的。當不同的顏色使用的面積相當，這個頁面容易呈現枯燥單調之感，而沒有局部細節的變化。當一個頁面使用的顏色過多、面積大小用得過於瑣碎，這個頁面容易呈現花哨、主次不分沒有整體的感覺。為頁面設計配色的時候，應根據主題內容主次需要，各顏色有其各自的功能角色--面積使用最多的、最少的、不多不少的，加上冷暖的適度安排，純度明度的合理變化，遵循這條原則，網頁配色定能得心應手。下一節我們詳細介紹各種色彩的對比方式和效果。網頁設計配色應用——色彩的對比網頁頁面中總是由具有某種內在聯繫的各種色彩，組成一個完整統一的整體，形成畫面色彩總的趨向，稱為色調。也可以理解為色彩狀態。色彩給人的感覺與氛圍，是影響配色視覺效果的決定因素。為了使網頁的整體畫面呈現穩定協調的感覺，以便充分的掌握其規律來更好的分析學習，上次我們介紹了視覺角色主次位置的幾個概念，本節我們介紹色彩的對比。對比與調和就是形式美的變化與統一規律在一定條件下，不同色彩之間的對比會有不同的效果。在不同的環境下，多色彩給人一種印象，色彩單一給人另一種印象。各種純色的對比會產生鮮明的色彩效果，很容易給人帶來視覺與心理的滿足。紅、黃、藍三種顏色是最極端的色彩，它們之間對比,哪一種顏色也無法影響對方。很多朋友都以為色彩對比主要是紅綠、橙藍、黃紫色的對比，實際色彩對比範疇不局限於這些。是指各種色彩的界面構成中的面積、形狀、位置以及色相、明度、純度之間的差別，使網頁色彩配合增添了許多變化、頁面更加豐富多彩。色彩的對比規律大致有以下幾點： 色相對比是指因色相之間的差別形成的對比。當主色相確定後，必須考慮其他色彩與主色相是什麼關係，要表現什麼內容及效果等，這樣才能增強其表現力。不同色相對比取得的效果有所不同，兩色越接近，對比效果越柔和。越接近補色，對比效果越強烈。→ 色相對比網頁例圖：http://www.portfolios.com
色相對比分析：主要是以綠色與藍色之間的色相對比。從HSB數值上可看出嫩綠色的S純度高B亮度也很高，因此艷麗的顏色作為背景與前景純度稍低的墨綠和軲藍色形成色相之間的對比。前景的墨綠雖然純度達到最高值100％，比主色調高不少，但是因為亮度低，因此色彩顯示沒有主色調明艷。結論：該頁面色相的對比，主要作用於前景與背景的對比、局部與整體的對比。 明度對比明度對比可分為:彩色差的明度對比及非彩色差的明度對比是指色彩之間明暗程度的差別而形成的對比。是頁面形成恰當的黑、白、灰效果的主要手段。明度對比在視覺上對色彩層次和空間關係影響較大。例如檸檬黃明度高，藍紫色的明度低，橙色和綠色屬中明度，紅色與藍色屬中低明度。→ 明度對比網頁例圖：http://www.dior.com
明度對比分析：（非彩色差）嚴格來說，該頁面應該是黑白灰色非色彩構成，攝影圖片中的人物衣服為灰色，相對單純的黑白對比柔和舒適於視覺。能使頁面顯得更單純、統一，形成另一道獨特的風景。2純度對比、補色對比 純度對比是指不同色彩之間純度的差別而形成的對比。色彩純度可大致分為高純度、中純度、低純度三種。未經調和過的原色純度是最高的，而間色多屬中純度的色彩，複色其本身純度偏低而屬低純度的色彩範圍。純度的對比會使色彩的效果更明確肯定。→ 純度對比網頁例圖：http:// www.havaianas.com
純度對比分析：整個頁面看起來異常艷麗刺激然而又非常的協調。以上數值主要選取了幾種較有代表性的顏色。大家注意看，以上色彩除了粉紅色，其他幾組顏色都是高飽和度高亮度的顏色，因此充分的發揮出了色彩的艷麗程度。包括粉紅色在內的幾種灰色階，在中間起到了和諧作用。白色能拉開相近色階的空間及明快頁面的作用，在這裡可以說是功不可沒。結論：頁面實際上用了不少顏色，配色大膽。抓住顏色主次冷暖的安排，適度再加上和諧的過渡色灰色，實現了作者對該頁面的輕鬆配色。從多種高純度的搭配協調能力上看，足可見作者對色彩設計搭配不一般的功底。這類網頁配色非常能夠體現出一個網站頁面產品個性，配色難度大。讓人過目難忘。 補色對比將紅與綠、黃與紫、藍與橙等具有補色關係的色彩彼此並置，使色彩感覺更為鮮明，純度增加，稱為補色對比。→ 補色對比網頁例圖：http:// www.forthosewholovelife.co.uk
補色對比分析：由冷色系的綠色、藍色組成大背景環境，純度較低。前景主要是突出產品、文字信息內容的大紅色形成補色對比效果，RGB的R255數值與HSB是H為零，數值顯示非常明確，標準的大紅色。純度亮度非常高，達到最高值，加之白色的勾邊，使得紅色更為凸顯，更易於視覺對信息的迅速捕捉。結論：對比色的合理搭配，能拉開前景與背景的空間感，突出頁面主體物。尤其是紅色在主體物的運用，能迅速傳遞視覺的效果。3冷暖對比 冷暖對比是指不同色彩之間的冷暖差別形成的對比。色彩分為冷、暖兩大色系，以紅、橙、黃為暖色體系，藍、綠、紫則代表著冷色系，兩者基本上互為補色關係。另外，色彩的冷暖對比還受明度與純度的影響，白光反射高而感覺冷，黑色吸收率高而感覺暖。→ 冷暖對比網頁例圖：http:// disney.go.com
冷暖對比分析：以上這幾組顏色乍一看感覺鮮艷程度都差不多，但是通過觀察它們的數值發現飽和度都有相差，然而明度相近，因此它們給人造成的視覺感受幾乎是相同的。該頁面冷暖顏色較為豐富，橙和藍是對比最強烈的補色，其次是傾向不夠明顯的補色黃、紫。明度不同的兩個綠色起到了冷暖視覺的過渡作用。主色調的淺藍色亮度較高，讓頁面不易給人沉悶的感覺。結論：冷暖對比的應用，通常在休閑娛樂網站、食品網站出現比較多。將這兩個色系的色彩安排在同一畫面時，其對比效果極為強烈。通常初學者較容易使兩色相互排斥，導致畫面色調不諧調。一般我們採用兩種調和的方法。純度調整降低冷暖兩色純度。用明度黑、白、灰變化來調整畫面的層次、直接使用黑、白、灰色系進入畫面搭配，或者加入補色的諧調，也都能很好的起到協調的效果。→ 純度調整網頁例圖：http:// www.darkelephant.com
純度調整分析：主色調的橙色，添入了少許黑色做漸變背景色，降低了純度。輔助色的藍色是橙色的補色，主要起的是使得整個頁面過多的暖色降低協調於整體的效果，及背景色的棕色都分別提暗降低純度。而左上角的黃色則通過提高了亮度來降低純度。一個頁面里應有少量純度較高的顏色而不至於使整個頁面過於壓抑，純度亮度很高的點睛色紅色就起到了這個作用。結論：純度的調整主要是通過明度黑、白、灰變化來調整畫面的層次，適當的加入補色也是其中的一個辦法。面積調整主次的面積區分。根據設計主題的需要，在畫面的面積上以一方為主色，於是就掌控畫面的色調作用，其他的顏色在使用面積上拉開距離，使畫面的主次關係更突出，在統一的同時富有變化。→ 面積調整網頁例圖：http:// www.upstairz.com
面積調整分析：作為大面積使用的主色調--飽和度和亮度為最高值的橙色，通過適當面積的白色加入協調和平衡了視覺的作用外，主體物的深紅紋樣的圖片點綴著純度、亮度較高的紅色有醒目作用，縮小面積而卻又能突出於視覺中心點，疏密構圖的對比效果。結論：大面積的顏色和小面積使用的顏色可以拉開主次關係，位置的正確安排也是一個方面。4面積對比 面積對比同一種色彩，面積越大，明度、純度越強，面積越小，明度、純度越低。面積大的時候，亮的色顯得更輕，暗的色顯得更重。這種現象稱為色彩的面積效果。面積對比是指頁面中各種色彩在面積上多與少、大與小的差別，影響到頁面主次關係。面積的對比,可以是中高低明度差的面積變化及中高低純度差的面積變化。→ 面積對比網頁例圖：http:// www.parkpack.ru
面積對比分析：作為大面積使用的主色調--飽和度和亮度為最高值的橙色，通過適當面積的白色加入協調和平衡了視覺的作用外，主體物的深紅紋樣的圖片點綴著純度、亮度較高的紅色有醒目作用，縮小面積而卻又能突出於視覺中心點，疏密構圖的對比效果。結論：大面積的顏色和小面積使用的顏色可以拉開主次關係，位置的正確安排也是一個方面。網頁設計配色應用——色彩的調和網頁頁面中總是由具有某種內在聯繫的各種色彩，組成一個完整統一的整體，形成畫面色彩總的趨向，稱為色調。也可以理解為色彩狀態。色彩給人的感覺與氛圍，是影響配色視覺效果的決定因素。為了使網頁的整體畫面呈現穩定協調的感覺，以便充分的掌握其規律來更好的分析學習，我們前面介紹了色調的視覺角色主次位置的幾個概念，也介紹了色彩的對比。今天我們介紹色彩的調和。兩種或兩種以上的色彩合理搭配，產生統一諧調的效果，稱為色彩調和。色彩調和是求得視覺統一，達到人們心理平衡的重要手段。調和就是統一，下面介紹的四種方法能夠達到調和頁面色彩的目的。 同種色的調和相同色相、不同明度和純度的色彩調和。使之產生秩序的漸進，在明度、純度的變化上，彌補同種色相的單調感。→ 同種色的調和網頁例圖：http://www. solar1.org
同種色的調和分析：同種色給人的感覺是相當協調的。它們通常在同一個色相里，通過明度的黑白灰或者純度的不同來稍微加以區別的，產生了及其微妙的韻律美。為了不至於讓整個頁面呈現過於單調平淡，有些頁面則是加入極其小的其他顏色做點綴。該頁面使用了同種色的黃色系，淡黃、檸檬黃、中黃、通過明度、純度的微妙變化產生緩和的節奏美感。結論：同種色被稱為最穩妥的色彩搭配方法。2類似色的調和 類似色的調和在色環中,色相越靠近越調和。主要靠類似色之間的共同色來產生作用。→ 類似色的調和網頁例圖：http://www. solar1.org
類似色的調和分析：類似色相較於同類色色彩之間的可搭配度要大些，顏色豐富、富於變化。以上頁面主要取的是色環中的黃色、綠色、藍色通過明度、純度、面積上的不同實現變化和統一的。雖然主色調的米黃色在頁面中使用面積最大，但是我們看到由於它的明度非常高，飽和度就降低了，因此在頁面中處在不明顯的角色。而綠色的純度最高，且使用面積次之，頁面顯示較顯眼，因此用於次級導航位置上。整個頁面主次的視覺引導分明。結論：不是每種主色調都是極其顯眼的位置，通常多扮演著用於突出主體的輔助性配角。而重要角色往往在頁面中用的份量極少，卻又起到突出主體的作用。3對比色的調和 對比色的調和調和方法有：1、提高或降低對比色的純度；2、在對比色之間插入分割色（金、銀、黑、白、灰等）；3、採用雙方面積大小不同的處理方法；4、對比色之間加入相近的類似色。→ 對比色的調和網頁例圖：http:// www.snapple.com
對比色的調和分析：基本上可以說是黃色和紫色的對比色做頁面的主要色調。黃色紫色組合在網頁中使用率較低，原因是這組顏色適用範圍相對其他兩組對比色要小很多，配色難度也較兩組大。這裡黃色加入了紅色呈中黃色，紫色加入了紅色，偏玫瑰色，所以這組顏色不是嚴格意義上的對比色，也因此使這組顏色看起來協調、舒服。這個頁面都調低了亮度使整體降低了純度，緩和視覺刺激。白色是這組對比色里加入的協調色。結論：從上面的分析我們可以知道，通過上面的這些色值調配--當需要使用這組對比色配色時候該如何達到協調的目的。不是對比色為主色調的頁面就一定會有不舒服的感覺的，主要可以通過調低亮度、降低飽和度、加入少許白色來調和。4漸變色的調和 漸變色的調和漸變色實際是一種調和方法的運用。是顏色按層次逐漸變化的現象。色彩漸變就像兩種顏色間的混色，可以有規律地在多種顏色中進行。暗色和亮色之間的漸變會產生遠近感和三維的視覺效果。→ 漸變色的調和網頁例圖：http:// www.macromedia.com
漸變色的調和分析：該頁面背景使用了漸變的效果，增加了視覺空間感。在導航欄、廣告區域、產品技術的大標題塊，都使用了漸變的技術手法來表達，產生三維的視覺效果，統一了整個頁面的設計語言，也是區別於其他網站頁面的個性體現，達到讓人印象深刻的目的。結論：漸變色能夠柔和視覺，增強空間感，體現節奏和韻律美感，統一整個頁面的目的。除了統一當然也可以起到變化頁面視覺形式的作用。該設計語言可做需要的時候適當的使用。本部分小結：本節主要對色彩的對比與調和做了實例分析。例如當頁面平淡單調，需要用對比手法做些變化來豐富頁面的色彩設計；當頁面變化過多，顯得刺眼、凌亂，可以通過以上介紹的調和方法進行調整，使得頁面看起來更統一協調。● 主要是通過面積大小、冷暖對比來表達體現頁面的主次關係、中心思想。● 顏色平淡可加入適當類似色對比色來使頁面產生變化。顏色凌亂可以適當加入同類色或者類似色、白色、黑色、灰色做到統一調配的目的。● 對比色的搭配並不是就是說是絕對值的紅或者綠，藍或橙、黃或紫。對比色的第一視覺傾向越明顯配色難度就越大，也就是說越難調和；反之，傾向越不明顯的對比色越容易調和。請參照剛才對比色調和頁面分析例子方法。● 不是一種色彩面積用得越多或者越少、純度、明度越高就是能突出主體的主角色，主要是根據色彩相互之間的搭配關係來體現的。● 一個頁面中單純絕對的使用某種顏色或是使用絕對非常多種顏色搭配，容易產生個性效果，那叫玩色彩了，限於色彩運用得非常熟練的朋友，但不推薦初學者使用。網頁設計配色應用實例剖析——紅色系紅色的色感溫暖，性格剛烈而外向，是一種對人刺激性很強的顏色。紅色容易引起人的注意，也容易使人興奮、激動、緊張、衝動、還是一種容易造成人視覺疲勞的顏色。在眾多顏色里，紅色是最鮮明生動的、最熱烈的顏色。因此紅色也是代表熱情的情感之色。鮮明紅色極容易吸引人們的目光。紅色在不同的明度、純度的狀態（粉紅、鮮紅、深紅）里，給人表達的情感是不一樣的。在網頁顏色的應用機率中，根據網頁主題內容的需求，純粹使用紅色為主色調的網站相對較少，多用於輔助色、點睛色，達到陪襯、醒目的效果。通常都配以其他顏色調和。紅色相對於其他顏色，視覺傳遞速度最快。由於以上的這些紅色傳達出的特性，因此人們喜歡用紅色作為警示符號的顏色，例如：消防、驚嘆號、錯誤提示等等。為了讓大家對紅色的理解做更好的區別，下面我們分別對紅色系根據鄰近色、同類色、對比色的搭配做不同的舉例分析。硃紅色→ 硃紅色網頁例圖：http://www.muchvibe.ca
硃紅色在紅色系裡傾向黃色方向，是大紅色加入黃色而得。在色環表中，純紅色在HSB里為0度，往360度方向呈現的是冷紅色系，0度方向為黃色系。整個頁面里，主色調硃紅色面積非常大、確定明顯，輔助色主要由黑色、深紅構成，（數值上選取的是深紅色做標示）。主色調的R呈現出255最高數值，S中100%，充分標明了紅色最高特性。輔助色的深紅R為222，B87%，顯示其充當輔助角色的這一特性。結論：背景色朱紅由於紅色特性明顯，飽和度、明度都非常的高，這裡運用了輔助色深紅、黑色壓住並牽制硃紅色搶眼的個性，也同樣能達到突出前景主要圖片內容的目的。點睛色主要用於標誌的突出上，其他導航文字、圖片的部分運用等，調和並達到了不至於使得整個頁面刺激中又透出的沉悶感。這類顏色的組合比較容易使人提升興奮度，紅色特性明顯，這一醒目的特殊屬性，比較被廣泛的應用於食品、時尚休閑等等類型的網站。2深紅色深紅色→ 深紅色網頁例圖：http:// www.sisley.com
深紅色在原有的紅色基礎上降低了明度而得，是紅色系中的明度變化。通過上圖的數值顯示看出明度較低。這類顏色的組合隨著明度的變暗，比較容易製造深邃、幽怨的故事氣氛。傳達的是穩重、成熟、高貴、消極的心理感受。這個頁面背景色運用了紋樣，是以目前選取的主色調顏色和明度較暗的深紅色結合而的，使得明度稍暗。數值上看，主色調也就是背景色的飽和度較高，但是由於降低了明度，顏色變得較沉穩。輔助色RGB添加了適量的其他顏色，G和B數值區別不大，因此飽和度降低，顏色趨於柔和穩定。點睛色的加入提亮，頁面視覺效果強化。結論：前景色通常要較明顯的區別於背景色，達到台前的宣傳目的。當飽和度較低的前景色與背景色變化不明顯時形成的是另外一種柔和統一的效果。3玫瑰紅色玫瑰紅色→ 玫瑰紅色網頁例圖：http://www.gentverwent.be
玫瑰紅色在色環上實際已經接近冷色，是紅色系中的色相的微妙變化，是紅色系裡的冷色系。我們在HSB中H數值可看出，0度為紅色的最高值，越接近0度數值紅色特性越明顯，否則逐漸冷色傾斜，而該數值偏離0度稍遠。這個頁面主要由兩種不同明度、純度的玫瑰色調組成。兩色數值顯示，我們看到RGB數值中R呈現的數值最高，紅色特性較明顯。輔助色調的玫瑰色，加入少許G，色調向冷色稍微偏移，也由於加入了G，在HSB數值里，飽和度輕微減弱，但隨著明度增加，色彩趨於艷麗，符合突出前景的目的。主色調雖然純度達到最高飽和，但由於明度降低，相對於輔色調較沉穩，適合做背景色。數值上看，由於背景色和前景色的明度較為接近，加入白色邊框，強烈了前景色於背景色的區分，加強視覺強化效果。結論：背景色和前景色的明度較接近，顏色給人的視覺表象較悶，加入少量白色劃分使得色彩引導的主次塊面更分明，頁面明快許多。這類顏色的組合多用於女性主題，例如：化妝品、服裝等，容易營造出嬌媚、誘惑、艷麗等氣氛。4明度粉紅色明度粉紅色→ 明度粉紅色網頁例圖：http:// www.enjo.com.au
粉紅色主要是紅色系中的明度的高亮度的變化。是紅色系裡的冷色系。RGB數值顯示明度較高，因此HSB中S純度下降，幾乎呈最低值。主色調和輔助色調數值對比可知：主色調混合的G的份量較多且明度較高，因此純度較低，色調柔和，在框架區域內較適合做類似背景色的輔助性崗位。輔助色R數值比主色調的R數值稍高，紅色性稍明顯，加入的G相對少，B明度稍低，因此相對純度要高，輔色位置應用在框架區域的導航位置，起到突出導航作用。點睛色突出標誌及購物主體的作用。背景白色除了突出前面粉紅色主體的作用，在前景也有出現，背景色與前景色的相互牽制，減少空間距離的效果。結論：RGB數值中，數值同時呈現相近的高數值時，色彩越柔和協調，純度相對降低，頁面呈高明度灰色段，視覺刺激緩慢。這裡以粉紅色為主色調的頁面，女性主題內容特徵傾向明顯。這組粉紅色頁面里，由於純度都較低，任何一個純度高小面積使用的顏色都能起到點睛的效果。這類顏色的組合多用於女性主題，例如：化妝品、服裝等，鮮嫩而充滿誘惑，傳達著柔情、嬌媚、溫柔、甜蜜、純真、誘惑的心理感受。5對比色：橙紅色+藍色對比色：橙紅色+藍色→ 對比色橙紅色應用網頁例圖：http://www. tostitos.com
嚴格上來說，橙色是藍色的對比色，這組對比色中的橙紅色傾向於紅色。該頁面的背景色使用紋理圖形由深至淺的製造空間範圍，模擬真實環境。這裡的數值選取其中間色值來分析，由於背景藍色B的明度較低，又由於冷色比暖色視覺傳遞速度慢的特點，很適合作為輔助角色突出前景的應用。主色調橙紅色R的數值達到最高值255，SB都達到了最高值100%，視覺刺激非常強烈，運用大面積高純度來突出藍色產品主體物，又形成了一次頁面上的視覺對比--背景藍色與前景橙紅色，前景橙紅色與產品主體物藍色的二次對比。點睛色白色，使這組對比色在頁面中表現得更協調，調和的作用。結論：顏色的深淺除了能營造空間感的效果，也能輔助性的製造主次效果。顏色除了性能對比，面積對比、位置安排也是製造主次效果的關鍵。這組橙色藍色對比色在網頁上比其他兩組對比色紅色綠色，黃色紫色應用得多，能迅速的傳達網站主題內容、網頁主體，容易增添強烈的興奮度，多用於食品、休閑娛樂、產品等，但卻又是跨越於各行業的主題網站，適用的範圍非常大。6配色：紅色+黑色配色：紅色+黑色→ 紅色配色應用網頁例圖：http:// www.pleasuredome.it
紅色與黑色的搭配在商業設計中，被譽為商業成功色，鮮亮的紅色多用於小面積的點綴色。從數值上看，紅色添加了G和B飽和度稍降低，因此該紅色大面積使用不會覺得刺激或不舒服，這也與背景色藍色加入了適量漸變的技法，使得頁面的節奏呈現緩和。輔助色黑色的加入，與深紅色在明度拉大，頁面色彩元素相對活躍不少。點睛色白色，所放的位置和面積，起到平衡黑色位置面積的作用，當然也達到醒目的效果。結論：這裡顏色位置的擺放，起到平衡頁面視覺，突出主題效果。背景色加了漸變效果、整體與前景人物黑色對比呈淺色，前景人物黑色與背景深紅色、背景深紅與前景白色文字相互之間的關係，構成空間環境的視覺效果。這組配色中，紅色是降低了明度的深紅色，為主色調和背景色的大面積使用。紅黑搭配色，常用於較前衛時尚、娛樂休閑、電子商務等等要求個性的網頁設計配色里，也又有用於部分政治、新聞的頁面。7配色：紅色+黑色+灰色配色：紅色+黑色+灰色→ 紅色配色應用網頁例圖：http:// www.enjo.com.au
這組配色，達到最高純度的紅色做小面積的使用。雖然這裡選取了紅色做為輔助色，但從整個頁面的功能和所表達的主題來看，紅色可以作為該頁面的點睛色，強烈的突出了主題。紅色的數值顯示，HBS中的H為0度，達到紅色特性的最高值，S為最高飽和度100%，在明度最低的黑色背景的襯托下，其特性發揮到極致，頁面醒目而響亮。紅色與黑色本是對比強烈的配色，但由於背景灰色的作用，緩和整個頁面的視覺刺激度。背景色灰色RGB數值變化不大，因此顏色純度較低、趨於平穩柔和，輔助前景內容的呈現。白色讓前景和背景的劃分更明顯，活躍頁面中的色彩元素。結論：使用面積小的純度高的顏色在非色彩的黑色和灰色上，是產生變化頁面的顏色，達到容易突出主題的目的。本部分小節：● 紅色在RGB數值的R為255左右，HSB數值的H中為0度左右，達到紅色最高值。隨著純度的提高、亮度的適度增加，它易於迅速的傳達、醒目性的特徵發揮得越明顯。和其他顏色一樣，顏色相互混合的越多，明度越低，飽和度越低，視覺衝擊力越弱。● 顏色的對比：對比色紅色綠色的搭配，紅色的特性發揮得越明顯。綠葉襯紅花的效果。另外紅與黑的搭配，也較能展現紅色的魅力。● 根據主題的需要，除了對比色的應用，還有面積上、位置上的對比應用，也能很好的配合達到突出主題產品主體物的目的。網頁設計配色應用實例剖析——橙色系橙色具有輕快、歡欣、收穫、溫馨、時尚的效果，是快樂、喜悅、能量的色彩。在整個色譜里，橙色具有興奮度，是最耀眼的色彩。給人以華貴而溫暖，興奮而熱烈的感覺，也是令人振奮的顏色。具有健康、富有活力、勇敢自由等象徵意義，能給人有莊嚴、尊貴、神秘等感覺。橙色在空氣中的穿透力僅次於紅色，也是容易造成視覺疲勞的顏色。在網頁顏色里，橙色適用於視覺要求較高的時尚網站，屬於注目、芳香的顏色，也常被用於味覺較高的食品網站，是容易引起食慾的顏色。下面我們根據橙色系不同屬性鄰近色、同類色、對比色的搭配做不同的舉例分析。橙色→ 橙色網頁例圖：http:// www.wastelink.co.uk
橙色系分析：主色調橙色HSB數值的H表示色相，顯示的是30度，而30度正是橙色顯示特徵最標準的顏色——正橙色。飽和度和亮度同時達到最高值，因此整個頁面的視覺刺激是極其耀眼強烈的。這裡選取了三種面積相當又是整個頁面使用得最少的顏色為點睛色，使頁面生動的同時又運用於導航位置，從而達到突出主題的效果。從HSB數值上看它們的明度純度相對較低，與明度純度較高的背景正橙色形成鮮明的對比。通過範圍較大的背景白色、前景圖片灰白色和小細節前景白色文字製造出明快氣氛的同時，又呼應統一於整個頁面。輔助色在這裡是橙色與白色的過渡色。結論：飽和度與純度很高特性明顯的顏色，在達到視覺衝擊力的同時，可適當採用少許對比色調和緩和於視覺，從而削弱視覺的疲勞度。2深橙紅色系深橙紅色系→ 深橙紅色網頁例圖：http:// www.matisserestaurant.ca
深橙紅色系分析：從色相度中可以知道0度為正紅色，30度為正橙色，而主色調的HSB數值H顯示22度可知，該深橙紅色是橙色基礎上加入少許鄰近色紅色，整體上降低了明度而得，因為紅色本身較橙色明度低，因此這裡橙紅色的明度呈現出較低狀態。輔助色選取了明度相對於主色調更低的三種顏色，前面兩種飽和度都較高，最後一種灰藍色由於明度較高因此飽和度降低，是主色調與前面兩種輔助色的協調色。這個頁面背景色運用了紋樣，是以目前選取的主色調顏色和明度較暗的深紅色結合而得，使得明度稍暗。數值上看，主色調也就是背景色的飽和度較高，但是由於降低了明度，顏色變得較沉穩。輔助色RGB數值顯示，添加了適量的其他顏色，G和B數值區別不大，因此飽和度降低，顏色趨於柔和穩定。點睛色的加入和提亮，使頁面視覺效果得到強化。結論：前景色通常要較明顯的區別於背景色，達到台前的宣傳目的。當飽和度較低的前景色與背景色變化不明顯時，形成的是另外一種柔和統一的效果。3淺橙色同類色淺橙色同類色→ 淺橙色同類色網頁例圖： http:// www.talentic.com
淺橙色同類色分析：從主色調和輔色調在HSB數值H顯示的數值是36可以看出，該頁面色調是在同一種橙色的基礎上只在明度上發生了變化。由於主要色調是淺橙色，明度越高飽和度越低，頁面上減弱了飽和度較高的橙色特性，整個網頁呈現出柔和自然稍有些發灰的調子。該網頁是在橙色這一個顏色上做不同明度黑白灰色階的柔和變化，屬於單色調，配色非常的單純。色階平穩，同時存在著不夠醒目的狀態。白色在這裡是起到了拉開主色調和輔色調空間距離，增強輔色調橙色的特性，使整個稍許有些發灰的頁面明快了不少。但也由於白色屬於非色彩，只在明度上呈最高數值而無彩度，不能給頁面帶來彩度所具有的鮮活靚麗的感覺，另一方面卻也呈現出質樸的感受。結論：前面我們提到過同類色是在同一色相中不同的明度顏色變化。因此這類顏色相對其他類別顏色來說明凈而單純，配色上較容易達到協調統一，但也容易顯得單調。初看該頁面配色協調舒服，但看多了的確有些單調乏味的感覺，這也是同類色搭配的特性。同時由於運用了漸變色這一調和方法，該頁面同時佔有了前面我們提到的4種色彩中的調和方法的2種，整個頁面呈現出調和中的調和是勿庸置疑的，但也同時顯得有些單調，沒有色彩亮點。4橙色系鄰近色（黃色+橙色＋橙紅色）橙色系鄰近色（黃色+橙色＋橙紅色）→ 鄰近色橙色網頁例圖：http:// www.tide.com
橙色系鄰近色（黃色+橙色＋橙紅色）分析：雖然第一眼看上去似乎色調上變化很多，但該網頁的色彩構成主要是由黃色和橙色這兩種鄰近色構成的，通過不同的明度和純度的變化而得到更為豐富的色階，它們是淺黃色、黃色、橙色、橙紅通過不同的形狀面積，位置變化而得。從HSB數值中的H可以看出屬於暖色範疇，三個色相的傾向不是很明顯，以至於色彩呈現較規律、緩和。由於不同數值的明度表達，純度也做出了不同的數值變化。淺色在這裡主要起到更調和主色調和點睛色的色彩過渡作用。點睛色在這裡起到強調整個頁面的華麗感，增強整個頁面彩度的作用。結論：橙色與鄰近色黃、紅暖色調的搭配組合，這是一種簡單又安全的方法，視覺韻律上處理得井然有序。整個頁面看起來艷澤華麗、新鮮充滿活力的感覺，符合Tide這一主題所要表達的目的。5橙色系對比色（橙色＋藍色）橙色系對比色（橙色＋藍色）→ 對比色橙紅色應用網頁例圖： www.rastifilms.com.ar
橙色系對比色（橙色＋藍色）分析HSB數值中的H色相顯示主色調橙紅色為26，我們知道正紅色的H為0，正橙H為30，主色調橙紅色是往0偏移而得。正藍色是240，而該點睛色藍色為192，往綠度偏移，在RGB中的數值G160也能看出來，因此藍色的特性不是很強。但由於橙紅色的明度飽和度達到最高值，因此儘管藍色不是正藍，但它的特性得到了很大程度的發揮。此種橙藍對比色中的藍色調配，比較少見，讓人很容易記住它。而橙紅色的飽和度明度都非常高，刺激度強，屬於讓人不可久視的顏色。介於橙紅色和藍色之間，與藍色面積相當的白色，起到調和對比色橙紅與藍色之間關係的作用。結論：這組對比色通過使用的面積位置的不同來反映主次之間的關係。對比色能相互強烈的突出色彩特性。這組對比色屬於是非常能突顯個性的顏色。6橙色系低對比度（橙色+綠色）橙色系低對比度（橙色+綠色）→ 橙色低對比應用網頁例圖：http:// www.colourpixel.com
橙色系低對比度（橙色+綠色）分析：如果不看數值參數，剛一開始看會以為這是一組純度較低的顏色。HSB數值H顯示主色調為正橙色，而黃綠色的明度較低且色相傾向不夠明確，加之背景有少許的暗橙色紋樣，整個頁面沒有高亮度白色點綴襯托，使得純度的彩度不夠確切，就很容易造成了該頁面純度較低的錯覺。整個頁面最亮的顏色除了「書本」最亮色淺黃色外，就是點睛色黃色了。我們知道黃色是所有彩度色中明度最高的顏色，不同明度純度的黃色系讓整個頁面明亮了不少，它是整個頁面明度色階的最高調。黃綠色的出現，讓本只有鄰近色的橙色系列多了些內容，頁面配色豐富不少、視覺節奏多了些變化。結論：這類顏色的組合隨著不同色階明度的變暗，整個頁面沒有白色襯托，製造出另外一種古典的環境氛圍，有如娓娓道來的故事場景，也是一種不錯的主題配色方法。本頁面的配色設計亮點是——無白色設計。7橙色系高純度高對比度（橙紅色+綠色）橙色系高純度高對比度（橙紅色+綠色）→ 橙色高純度對比應用網頁例圖： www.aliveis.com
橙色系高純度高對比度（橙紅色+綠色）分析：與上組的橙色綠色相比，這組顏色強烈而刺激，色彩傾向無疑明確了很多。主色調橙紅色往紅色傾向，而紅色的對比色是綠色，因此整組顏色有強烈的對比效果。從HSB數值H上看，除了藍色外，其餘幾種顏色純度都非常高，加上又是近於紅綠對比色。頁面的刺激強度是可想而知的強烈。黃色是中間色，起到過渡對比色作用，在這組色里屬於調和色。藍色出現在產品圖案上，引導主次關係，增強視覺的注目點。結論：橙色是注目容易引起食慾的顏色，在這裡得到了較充分的應用。非色彩的白色和黑色在這裡起到了非常重要的作用，拉大了色彩色階空間的距離。白色讓整個色調組合更加明快，而黑色增添色彩的厚重質感——強烈中的強烈，增強對產品的視覺刺激。本部分小節：● 橙色在HSB數值的H中為30度，是正橙色。橙色是一個非常響亮注目的顏色。橙色的對比色是藍色，當這兩種顏色彩度傾向越明確，對比強度就越大。但我們也看到，除了正宗的對比色橙藍色外，橙色和綠色隨著純度的升高，達到的對比效果也很強烈。在今後的配色設計中可以多些不同明度純度冷暖對比的嘗試，會有意想不到的收穫。● 白色是所有網頁設計中屬於較通用的顏色，它容易突出彩度的特性，明快於整個頁面，當一個頁面設計沒有使用白色時，空間感覺減弱，容易造成彩度不夠明確、頁面有些沉悶等反應，然而又相對來說增添頁面的厚重感覺，製造另外一種環境氣氛。黑色在色調組合的輔助角色里容易製造出厚重的色彩效果。從這裡我們又一次感受到色彩的相對性，即沒有絕對的配色組合，它們總是根據搭配不同的色彩組合或強或弱的表現出什麼樣的特性。● 同類色、鄰近色的組合，是非常調和的色彩組合，即使減少了色相的數量，一樣也可以調配出很多不同的調和色彩。對於初學者來說，這是一個非常實用的配色方法。網頁設計配色應用實例剖析——黃色系黃色是陽光的色彩，具有活潑與輕快的特點，給人十分年輕的感覺。象徵光明、希望、高貴、愉快。淺黃色表示柔弱，灰黃色表示病態。它的亮度最高，和其他顏色配合很活潑，有溫曖感，具有快樂、希望、智慧和輕快的個性，有希望與功名等象徵意義。黃色也代表著土地、象徵著權力，並且還具有神秘的宗教色彩。黃色的性格冷漠、高傲、敏感、具有擴張和不安寧的視覺印象。淺黃色系明朗、愉快、希望、發展，它的雅緻，清爽屬性，較適合用於女性及化妝品類網站。中黃色有崇高，尊貴，輝煌、注意、擴張的心理感受。深黃色給人高貴、溫和、內斂、穩重的心理感受。下面我們根據黃色系不同屬性鄰近色、同類色的高純度低純度色彩搭配做不同的舉例分析。→ 黃色系網頁例圖：www.bernhardwolff.com
黃色系分析：黃色是所有彩色中明度最高的顏色。上圖看到HSB模式的H數值是60度，正是正黃色，但RGB數值中加入了B藍色數值為51，因此降低了HSB的飽和度S為80％，但是大面積的 黃色仍使得該頁面色彩明亮顯眼。輔助色是純黑色，非色彩明度最低的顏色。大面積顯眼的正黃色有黑色的線條壓制，黃色頓時顯得沉穩，頁面增添內容感。白色雖然是點睛色，但由於非色彩的白色與黃色的明度最高，因此這裡似乎沒有起到"點睛"的作用。結論：當鮮度、明度高的背景色與前景輔助色暗度低的黑色在明度形成較強烈的對比時，艷度降低，較能協調視覺。整個頁面配色單純，卻也不簡單，形成另一種設計風格。→ 黃色同類色網頁例圖：www.paralotna.pl
黃色同類色分析該頁面的配色很單純，是同類色的黃色不同明度顏色，頁面看起來乾淨、單純。點睛色白色淡黃色在深色黃色背景下比較顯眼，且在最中間位置，是整個頁面中的高調部分。這三種黃色，明度都很高，只有背景輔助色明度稍低，點睛黃色H色相是三種顏色中黃色傾向最高的為57度，而60度是正黃色，因此明度也是最高的，充分的發揮其點睛色的作用。背景色和前景色只在色相上明度上有非常微妙的變化，卻也很巧妙，形成了變化較明顯的空間層次感，削弱了同類色易產生的單調感。點睛色白色讓層次感更明顯。結論：同類色的屬性使得整個頁面非常和諧，可以根據不同的主題來設計配色。可以通過明度、飽和度的不同變化來加強頁面配色的層次感。2中黃色、黃綠色調→ 中黃色應用網頁例圖： www.totshop.com
中黃色系分析：背景中黃色上點綴多種艷度較高的顏色，都是屬於跳躍的顏色，渲染整個網站的熱鬧環境氣氛，符合該網站的設計主題。從HSB數值上看，該中黃色的明度和飽和度呈最高值，屬於明亮耀眼的顏色。輔助色是黃綠色和紅色，黃綠色在中黃背景下呈冷色調，輕快單薄的亮色；紅色的HSB數值H色相上看是正紅色，明度稍低，這裡屬於厚重沉穩的顏色，在中黃色背景下呈現暖色調；背景中黃色在黃綠色和紅色兩者中這時呈中間色，是很好的整體頁面視覺過渡色。加之商品圖片多種亮艷的色澤混合在同一頁面上，點睛色白色在這裡起到了調和多種顏色的作用，減少、透氣於整個頁面的多種配色噪音。結論：當背景色起到中間色的作用時，頁面少量冷暖色彩搭配較容易調和。通常商品網站志在渲染熱鬧氣氛，比較適合活潑跳躍、色彩絢麗的配色方案，但色彩的調和難度較大。→ 黃綠色調網頁例圖： www.jpggrupo.com.ar
黃綠色調分析：主色調為黃綠色，單純而看，黃綠色是通常的暖色的起始色、色彩中亮度最高的黃色與冷色的起始色、綠色相結合而得，因此該顏色看起來非常明快清新。處於輔助色的非色彩黑色，中間的點綴色是主色調黃綠色，很容易讓人一時以為該顏色就是點睛色。實際主色調黃綠色的明度非常高，飽和度這時也很高，在明度最低的黑色襯映下就異常顯眼。背景色使用略有些漸變的效果，正是黃綠和黑（灰）顏色的柔和過渡，頁面調和。點睛色在這裡混色較多，RGB、HSB數值差距都不大，因此顏色偏灰色階，仔細分析是黃綠色與少許黑色混合而得，起到了調和背景色與輔助色明度差異過大的作用。結論：點睛色可以是少許耀眼的顏色，也可以是少許協調於視覺的混合灰色，無論是耀眼的顏色還是謙遜沉穩的灰色，都是不可缺少的角色，有著不可替代的作用。整個頁面配色較單純，只有三種色，非色彩來說分別起到黑（輔助黑）白（主色黃綠）灰（點睛混合色）的作用，所以頁面配色較有層次感，並不顯得單調。3黃色鄰近色、高純度黃色鄰近色→ 黃色鄰近色網頁例圖：www.leerbanen.nl
黃色鄰近色配色（黃色+紅色）分析：選取的上圖三組色里HSB數值的B明度雖然都有些變化，但S飽和度分毫沒有受到影響，仍都呈最高值100％，因此頁面配色異常耀眼。好在其間有少量不同明度飽和度的紅色系色塊做壓制，頁面顯得沉穩許多，頁面色彩層次也豐富了許多，塊面交織設計富有節奏韻律美，卻也有雀躍的感覺。頁面照片人物也經過了雙色調處理，與頁面色彩風格一致。整個頁面屬於明暗反差較大的色調，所以頁面響亮明快，極賦視覺衝擊力、感染力。結論：耀眼的顏色有深色塊壓制，也是很好的調和方法。該頁面里的不少小色塊混合了暗灰色，因此頁面飽和度刺激程度得到少許降低並調和。同類色系、類似色系不同純度明度的深淺變化搭配，增添現代美感。→ 高純度黃色鄰近色應用網頁例圖：www.mudbubble.com
高純度黃色鄰近色配色（黃色+紅色）分析：全頁選取的幾個色彩組合是高純度高明度的鄰近色正黃、淡黃（這裡的淡黃色不是指淺黃色，而是色彩顏料色里的稱呼。）、中黃及正紅色。我們知道，黃色是色彩系裡明度最高的耀眼色，HSB數值H色相60度是正黃色，特性越高明度越高。H色相度往60度前是接近紅色，而紅色明度相較於黃色低，背景色HSB數值H色相為48度，往紅色靠近，因此色度較深，呈現為中黃色。使用中黃背景正是烘托突出前景的淡黃色。淡黃色的前景上設計少許中黃色帶進入，頁面的色彩層次感生動了不少。另一個輔助色紅色HSB數值的H色相是0度，顯示正紅色且高純度高亮度，放在最顯眼的標誌廣告區域，實現視覺引導作用，主次感增強了。白色也是輔助色三色之一，在頂部面積較大的使用，使整個頁面的純度緩和了許多，起到提亮並拉開空間的作用。點睛色用於導航欄，提示導航區域的醒目與重要性。結論：高純度高明度的顏色調子耀眼響亮，通常對視覺的刺激程度較大。鄰近色由正黃到最後的正紅色是色輪表的協調過渡色，因此頁面調和。鄰近色與同類色一樣，是調和色，但較同類色更生動更多變化。4黃色低純度配色→ 黃色低純度配色應用網頁例圖：www.luckystarcafe.com
低純度黃色配色（黃色+藍色）分析：該頁面是屬於純度較低的多組配色頁面，配色難度似乎較大，但是按主色調、輔助色、點睛色來細細分析就會發現容易多了。主色調的中黃色，從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度正黃色時，它的特性越明顯。由於黃色的特性，在頁面配色的時候可適當添加明度較深的顏色，色階層拉開，並起到協調刺眼的艷度作用。黃色飽和度、明度的不同變化傳達不同的意義和作用。● 無論是高純度低純度還是多色彩的頁面配色，白色起到關鍵的作用。● 點睛色不一定就是非常顯眼的顏色，也有起到調和整體頁面配色的作用。● 中間色通常被大面積的使用為主色調、輔助色，是調和輔助色（有可能是同時幾種）與點睛色（有可能是幾種）的色彩，是調和色、調和方法的關鍵。網頁設計配色應用實例剖析——綠色系綠色在黃色和藍色（冷暖）之間，屬於較中庸的顏色，這樣使得綠色的性格最為平和、安穩、大度、寬容。是一種柔順、恬靜、滿足、優美、受歡迎之色。也是網頁中使用最為廣泛的顏色之一。綠色與人類息息相關，是永恆的欣欣向榮是的自然之色，代表了生命與希望，也充滿了青春活力，綠色象徵著和平與安全、發展與生機、舒適與安寧、鬆弛與休息，有緩解眼部疲勞的作用。它本身具有一定的與自然、健康相關的感覺，所以也經常用於與自然、健康相關的站點。綠色還經常用於一些公司的公關站點或教育站點。綠色能使我們的心情變得格外明朗。黃綠色代表清新、平靜、安逸、和平、柔和、春天、青春、升級的心理感受。下面我們根據綠色系不同屬性鄰近色、同類色的高純度低純度、對比色等色彩搭配做不同的舉例分析。→ 綠色網頁例圖：http://www. bacardimojito.com
綠色系分析：從上圖的主色調、輔色調HSB模式的數值可看出，這兩中顏色只是在明度上有區別，其顯示的色相與飽和度是一樣的。正綠色是120度，這兩種顏色從RGB數值上看，都不同程度的混合了其他少許顏色，因此離正綠色稍有些偏差。由於綠色本身的特性，所以整個網頁看起來很安穩舒適。輔助色只在明度上降低，讓頁面多了些層次感、空間感。白色塊面使得綠色的特性發揮到最好的狀態並增強了視覺節奏感。點睛色恰到好處的體現出了"點睛"這一妙筆，極盡誘惑力，整個頁面頓時生動提神起來，增強了頁面主題的表達力。結論：主、輔色調是屬於同類色綠色系，通過不同明度的變化，能較遞增緩和變化同時卻也較明顯的體現出頁面的色彩層次感來。如果不是通過數值來分析判斷，可能會有些朋友憑經驗判斷，容易誤認為這兩種顏色除了明度外有可能純度會有所不同，這時候適當的使用數值模式會很容易得到正確的結論的。整個頁面配色很少：最大色塊的翠綠，第二面積的白色，第三面積的深綠色，但得到的效果卻是強烈的、顯眼的，達到充分展現產品主題的目的。深綠色給人茂盛、健康、成熟、穩重、生命、開闊的心理感受。2綠色高純度網頁例圖分析→ 綠色高純度網頁例圖：http://www. marocfruitboard.com
綠色系分析： (高純度配色：綠色+對比色組合)HSB數值H顯示60度為正黃色，該主、輔色調只向綠色傾斜了一丁點--H為75度。大面積明度稍低的黃綠色為主要色調，飽和度卻非常高，達到了100%，輔助色使用了提高明度的嫩綠色和白色，這兩種輔色除了增加頁面的層次感的同時，還能讓整個頁面配色有透亮的感覺，增強了綠色的特性。背景深褐色無疑把前景的所有純色烘托得都耀眼於舞台上。該頁面有兩組小小的對比色，一組是黃綠與橙紅色，一組是橙黃色與天藍色，這兩組配色嚴格的來說不算對比色，因為色彩多少有些偏差。雖然它們的飽和度降低，但在這個頁面中足以構成了最響亮的色調，把整個頁面烘托得非常活躍、鮮明。結論：主、輔色調黃綠色大面積使用並不刺目，反而使得頁面看起來很有朝氣、活力。適當運用不同純度的不是相當嚴格意義上的對比色系組合時，通常能起到的主要作用是主次關係明確。不"標準"的對比色系對比特性雖然減弱，頁面色彩看起來容易協調、柔和，但一樣能突出主題。3同類色淺綠色網頁例圖分析→ 同類色淺綠色網頁例圖 ： http:// shehouse.we.tv
綠色系分析：(同類色淺綠色)主色調綠色屬性是明度很高的淺綠色，前面提到過，通常情況下明度高飽和度就降低，飽和度低頁面色彩度就降低，除非顏色本身有自己的特性，加上大面積的輔助色白色，整個頁面看起來很清淡、柔和、寧靜，甚至有溫馨的感覺。頁面中使用了漸變的淺綠色，使得整個頁面視覺上更加柔和舒適。儘管點睛色只在主要標誌上出現，按鈕也只有少許一點，但也給整個頁面的色彩帶來些亮筆。尤其是紅色的HSB模式的H數值顯示顏色接近於正紅色，飽和度達到最高值。另一個點睛色中黃色，在頁面視覺上呈綠色與紅色這一組對比色起到緩和視覺的作用。因為在色輪表上，黃色正是在綠色和紅色之間的過渡色。結論：淺綠色系有優雅、休息、安全、和睦、寧靜、柔和的感覺。漸變的效果更能加深這種印象。但頁面配色上淺色過多時，整個頁面容易呈現發"灰"的感受，這就需要適量的添加純度稍高的顏色例如左下角的輔助色綠色塊，適當的鮮艷的點睛都能很好的解決這一問題。4綠色弱對比網頁例圖分析→ 綠色弱對比網頁例圖：http:// www. visualade.com
綠色系分析：(黃綠色+弱對比)從HSB模式的數值上看，主色調是接近於黃色的基礎上加入了少許綠色在裡面，飽和度和明度降低，色彩看起來較柔和。輔色調墨綠色的綠色的傾向稍高，飽和度也較高，只是明度降低，該色看起來踏實沉穩。點睛色紅色H數值為零度，呈正紅色，但是該顏色飽和度和明度降低，而紅色本身的色度比黃綠色要暗不少，因此顏色穩重。另一點睛色藍綠色，明度飽和度都很低，在頁面配色里似乎沒有點睛感覺，更多的是呈輔助狀態。結論：主色調是相對比較鮮亮的顏色，而輔助色和點睛色是屬於比較沉穩的顏色，頁面通過大小色塊的對比提高視覺的反差力度，增強頁面的感染力。由於整個頁面的飽和度整體稍微降低，因此該頁面配色較協調、緩和。5同類綠色+多種點睛色例圖分析→ 同類綠色+多種點睛色例圖 ：http://www. girlshop.com
綠色系分析：(綠色配色：同類綠色+多種點睛色)主要色調HSB模式H數值顯示75度，依舊是色輪表裡傾向於黃色區域方位邊緣的綠色，呈現出的黃綠色調。輔色調在明度上有些提亮，與主色調形成較強的對比。點睛色里所使用的對比色組合有兩組，紅色與綠色，藍色與橙黃色，其中黃色是介於暖色(橙黃、紅色)和冷色(綠色、藍色)的過渡色也是調和色。結論：通過上面的分析大家可以看到，該網頁的配色不少，而且還有兩組對比色在內，但是頁面配色也很協調。原因之一，從下面抽取的色塊可以看出來，是一個過渡柔和的色輪表：以黃色為中界一邊是較淺的黃綠到綠色再到藍色，另一邊是橙黃再到紅色。原因之二，點睛色畢竟是扮演著點睛色的角色，有主色調和輔色調大面積的控制，即便再多些點睛色也不至於很快乾擾到頁面的整體配色。整個頁面保證了協調、不凌亂的步調，但是又能把商業網站的熱鬧氛圍體現得很好的渲染。此種配色方法值得我們學習借鑒。6綠色鄰近色應用網頁例圖分析→ 綠色鄰近色應用網頁例圖 ：http://www. codcefngwlad.org.uk
綠色系分析：(鄰近色配色：綠色+藍色)全頁使用的主要色調基本上是屬於明度較高飽和度較低的顏色，其中還使用了漸變色緩和的過渡，因此頁面看起來舒服協調。主色調是飽和度較高的翠綠色運用於背景色，幾乎是調節於整個頁面的關鍵色。如果沒有這一背景色塊，整個頁面容易發灰。還有右邊的粉綠大塊面積稍多，有些灰的感覺，好在前景的文章使用了色度明度稍深的藍色壓住，稍顯好些，關鍵還是有白色的箭頭很好的把粉綠和藍色文字的色階拉開了距離。左邊的照片清晰且純度較高也對整個頁面配色起到一定的調節作用。點睛色主要是標誌的顏色，如果可以忽略不計，頁面配色更趨於平淡。結論：明度較高飽和度較低的顏色，如果沒有明度較深飽和度較高的顏色進行勾勒或者點綴，這個頁面配色看起來容易發灰。7綠色對比色網頁例圖分析→ 綠色對比色網頁例圖：http://www. fitintercambio.com.br
綠色系分析：(對比色配色：綠色+紅色)主色調是有點黃色傾向的綠色，從HSB數值上可以看到H為98度，綠色特性較明顯了。輔助色則是三個淺色系，起到調和整個頁面色彩的作用。粉紅和粉綠色分別取的是頁面綠色紅色通過提高明度而得，因此整個頁面色彩前後呼應、配色調和。點睛色紅色的HBS模式H數值351度，在色輪表上偏向於紫色方位，因此傾向於冷紅色，色度上稍有些刺目和艷麗。主色調綠色和點睛色紅色所放置的位置，讓頁面導航區域和內容區域視覺引導較為分明：主色調綠色的設計亮點既用於導航又很流暢自然的融合到背景，渾然一體;這裡尤其是點睛色紅色放置於背景的處理很獨到，烘托突出於前景內容，在眾多網頁設計中並不多見。結論：整個頁面的配色取色於標誌色，量身定做的感覺。適當的運用對比色有強調的感覺，但頁面配色處理上並不強烈、耀眼，因為使用了白色及其相應的提高明度的粉色做視覺的緩和處理。本部分小節：● 綠色是緩和健康的顏色， HSB數值H色相為120度時是正綠色。大家通過以上的網頁實例可以看到，偏向於黃色方位的綠色運用得最多，也就更受到大眾的歡迎。純正的正綠色在視覺感受上可能稍微顯得有些色度較低的生硬，配色難度稍大。不同的黃綠色飽和度、明度的不同變化可以表達不同主題的頁面效果。● 點睛色可以是幾種，也可以是不同對比色的組合，有的起到豐富並活躍頁面配色的視覺節奏，有的起到調和整體頁面配色的作用。輔助色通常是同類色系或者鄰近色系，起到輔助並烘托主色調的作用。輔色調和主色調分別在不同的頁面做為唯一高純度色的時候，能夠起到挽救於整個頁面發灰的作用。● 當整個頁面配色明度太高色度降低時候，頁面容易呈現發灰的感覺，可以適當的使用少許純度較高或者明度較低的色系來加以改善。網頁設計配色應用實例剖析——藍色系藍色是色彩中比較沉靜的顏色。象徵著永恆與深邃、高遠與博大、壯闊與浩渺，是令人心境暢快的顏色。藍色的樸實、穩重、內向性格，襯托那些性格活躍、具有較強擴張力的色彩，運用對比手法，同時也活躍頁面。另一方面又有消極、冷淡、保守等意味。藍色與紅、黃等色運用得當，能構成和諧的對比調和關係。藍色是冷色調最典型的代表色，是網站設計中運用得最多的顏色，也是許多人鍾愛的顏色。藍色表達著深遠、永恆、沉靜、無限、理智、誠實、寒冷的多種感覺。藍色會給人很強烈的安穩感，同時藍色還能夠表現出和平、淡雅、潔凈、可靠等。下面我們根據藍色系不同屬性的同類色、鄰近色、高純度對比、相對對比色等色彩搭配做不同的舉例分析。→ 藍色高純度對比網頁例圖：http://www.toysdesign.com
藍色系分析：(高純度對比：藍色+玫瑰色)藍色的HSB數值H色相為240度時是正藍色。上圖的HSB模式S數值顯示，所有主要配色的飽和度都是100%。從主色調、輔色調HSB模式的數值可看出，這兩種顏色在明度上有較大的區別，色相上稍有輕度變化，飽和度相同。RGB模式上看，主色調與輔色調R數值都為0，G綠色的數值和B藍色數值分量的變化，得到了不同藍色的兩結果。點睛色僅是R紅色與B藍色兩色調和而得沒有摻雜其他顏色，因此飽和度呈最高值100%。整個頁面配色的飽和度都為100%，頁面整體配色看起來視覺衝擊力異常強烈。輔助色白色讓頁面上的顏色的特性發揮到極致，是不可缺少的輔助配色。結論：響亮、強烈刺激的詞語似乎都適用於上圖頁面，源於高純度烘托、微妙的冷暖變化配色上，體現出現代都市張揚時尚的氣息。白色塊面的線型使得這種高純度高強度的配色變得響亮卻也緩和。輔色調藍色的運用透露出設計師的大膽與魄力，玫瑰色在色輪表裡算是冷色系，但是與藍色廣義上的對比來說是暖色，在這裡與藍色搭配算是絕配了。整個頁面無不體現出特色和個性。2同類色淺藍色→ 藍色淺藍色網頁例圖：http://www.voeslauer.com/start.html
藍色系分析： (同類色：淺藍色)主色調HSB數值H顯示200度，色輪度稍向綠色方位傾斜，但是由於從180度到270度基本上給人的視覺呈現還是藍色範疇，因此與視覺上廣義的藍色差別不大。該頁面中間色較多，主要是在藍色範疇內做明度的變化，所以色度差非常緩和，以致於頁面的色彩呈現非常柔和，甚至稍有些發灰的感覺，好在該頁面還有些較大色塊的淺藍色及白色，拉大了頁面的色階，使得這種灰的感覺減弱不少。點睛色的HSB數值是258，色輪趨勢是向暖色紫色(相對冷暖色)傾向，變化微妙，是本頁面最溫暖的顏色。藍紫色在色相環中位於藍色和紫色之間，所以它也蘊含著紫色的一些神秘感，加上淺藍色的雅緻，所以亮度較高的藍紫色顯得非常高雅。在網頁中，藍紫色通常與藍色一起搭配使用。結論：淺藍色給人一種很寧靜安靜的心理感受。淺藍色系有淡雅、清新、浪漫、高級的特質，常用於化妝品、女性、服裝網站。它是最具涼爽，清新特徵的色彩。和白色混合時，能體現柔順，淡雅，浪漫的氣氛。主色調選擇明亮的藍色，配以白色的背景和灰亮的輔助色，可以使站點乾淨而整潔，給人莊重、充實的印象。該頁面基本上屬於同類色系，也是最保守穩妥且調和的配色方案。但該種配色看久了容易呈現出平淡乏味的感受。3深藍色→ 藍色深藍色網頁例圖： http://www.ro-audio.com
藍色系分析：(深藍色)HSB數值顯示主色調和輔色調的H色相接近，飽和度為最高，都為100%，兩者只在明度上有區別，分別是35%和65%。三維厚重的設計風格，用調和法之一的漸變手法，把主色調和輔色調進行了緩緩的過渡，增強了層次感，體現個性魅力，符合該頁面視音頻風格網站的主題。雖然是被譽為點睛色，但從整個頁面來看由於面積關係，點睛色在這裡所起的作用不大，僅僅就蜻蜓點水而已。相反的輔助色在這裡卻起到了較為突顯的作用——讓整個沉悶的本只起烘托作用的深藍色得到充分的展示。另一輔色調灰色令白色與深藍色反差不易過大，起到調和的目的。白色增強了整個頁面的視覺感，使之更醒目。結論：深藍色是沉穩的且較常用的色調。能給人穩重、冷靜、嚴謹、冷漠、深沉、成熟的心理感受。它主要用於營造安穩、可靠、略帶有神秘色彩的氛圍。深藍色明度偏暗，基於上面對深藍色的特質描述，在常規網站的設計里，可能不適合做太大面積的使用。但根據不同網站主題的設計需要可以做些不同的嘗試。4藍色純度對比→ 藍色純度對比網頁例圖：http://www.ccw.gov.uk
藍色系分析：(純度對比)從HSB模式上的數值顯示情況進行分析，全頁基本上是屬於高純度配色，各顏色特性相互輝映、相互交融，把整個頁面環境渲染得異常鮮亮和熱鬧。冷暖色系之間跨度很大：藍色、綠色、黃色、橙黃色、硃紅色、土橙黃色、墨綠色，幾乎按照色輪表上的軌跡進行。也由於面積有多有少的原因，因此頁面看起來較明快調和。其中土橙黃色和墨綠色是頁面明度最重的顏色，從RGB色值上可看出，都分別的混合了其他顏色，因此飽和度相對較低，略呈灰色狀態，另一種意義上來說這種灰色狀態是調和色的一種很好的方式。由於有大面積的主色調和背景色做掌控，加之以上因素綜合分析，無論頁面再多再細再耀眼的顏色都能很好的統一在同一個頁面之中。結論：非常明快活潑、跳躍的富有趣味性的配色。使人勾起了無限愉悅的童趣。高純度的藍色主色調配合的其他高純度冷暖色調對比，會營造出一種整潔輕快的印象。根據色輪表的緩和過渡及使用面積多少，判斷分析出頁面調和程度。5藍色鄰近配色：藍色+綠色→ 藍色鄰近色網頁例圖：http://www.rhinocortaqua.com
藍色系分析：(藍色鄰近配色：藍色+綠色)從HBS模式的S飽和度數值100%上看，不少朋友會有疑惑的感覺，認為看起來較為柔和的顏色，飽和度或許會低，刺眼的顏色通常飽和度較高，其實不然，每個顏色有每個顏色的不同屬性特性。高純度的色彩，明度的降低是協調視覺的一個因素，容易給人造成低純度的錯覺。不同塊面的鄰近色交錯排列，增強本頁面視覺動感。輔色調淺藍色是背景色白色和主色調藍色的中間色，它形成了頁面配色的中間色階，色彩層次感增強以外，還使整個頁面的顏色更為和諧。另一輔色調青色，是藍色和綠色的結合體，包括在標誌文字、文字標題上的運用，無疑活躍了整個頁面的配色環境。兩個點睛色都略調高了明度，另一意義上是該頁面配色的中間色階。兩點睛色都是在主色調藍色、輔色調青色的基礎上衍生出來的顏色，這裡「點睛」的作用不大，都屬於和諧色系。結論：很多站點都在使用藍色與青綠色的搭配效果。藍色、青綠色、白色的搭配可以使頁面看起來非常乾淨清澈，在我們的現實生活中運用的範圍很廣，可以說是隨處可見的。主顏色選擇明亮的藍色，配以白色的背景和灰亮的輔助色，加上中間色階的運用，可以使頁面有乾淨整潔，給人莊重、充實的印象。這是一組非常愉悅和諧的鄰近色系配色。中間色適度面積的運用及背景白色讓這組顏色特徵發揮到了極致。6藍色系強對比：藍色+紅色→ 藍色強對比網頁例圖：http://www.everyoneshero.com
藍色系強對比：藍色+紅色藍色是冷色系的最典型的代表了，而紅色是暖色系裡最典型的代表，兩冷暖色系對比下讓全頁的色彩對比異常強烈且興奮，很容易感染帶動瀏覽者的激昂情緒。紅色把文字圖片框起來，在藍色背景對比下，很好的突出主題，又好似模仿投影熒屏的感覺，讓人迅速的聚焦於視頻中心，達到網站背後的最終目的。輔色調是紅色，從數值上看接近於正紅色，紅色對視覺傳遞的信息是很快的，屬於高昂響亮的顏色。點睛色分別是黃色、黃綠色。大家知道，黃色是明度最高的顏色，也較響亮、刺目，在這裡的運用能強烈的突現標題。從大的來看，點睛色黃綠色與輔助色紅色是對比色，雖然面積不太大，只小範圍的對比，但是已經足以達到了迅速傳遞信息的效果，讓人印象深刻，促成再訪點擊。結論：冷暖色系的對比碰撞，充滿激情，能傳遞熾熱情感、強烈刺激主題的目的。該頁面運用了冷暖、紅綠兩種比較鮮明的對比色，配色積極大膽，視覺衝擊力很強。7藍色同類色對比：藍色+暖色→ 藍色對比網頁例圖：http://www.crackerjack.com
藍色同類色對比：藍色+暖色這是一個配色難度較大的頁面。如何使這些配色和諧又能達到帶動對比的目的，就要求要有一定的配色經驗了。難度一，在於主色調輔色調及點睛色的這三種藍色所充當的角色運用。難度二，高純度高亮度的正黃色在這個頁面的使用。難度三，黑色的運用。運用排除法細分得到：主色調輔色調的藍色飽和度一樣都是最高值，色相H上稍微有些微妙區別，亮度上有些變化。點睛色藍色飽和度和明度都較低，介於兩種藍色之間。三者面積如果用得不好頁面容易呈混沌的灰色狀態。拿出輔色調藍色，再回到整個頁面的配色來看，頁面色彩偏重，亮度不夠，缺少中間色階，冷暖主次傾向不夠明顯，這時把輔色調藍色添加進去正好彌補了這種缺憾。HSB模式顯示H是60度，S飽和度與B明度都是100%，正是正黃色。正黃色只適合做小面積的點睛色使用，大面積使用頁面配色較難協調，當然正黃色做為主色調能好配色些。在這樣的頁面色彩組合里，黑色是很難運用進去的，面積使用多了，頁面有可能會破壞所營造的氛圍、產生不協調的感覺。只在輔助性的勾勒於邊框是很好的使用辦法。圖片里的產品顏色，有降低純度的棕黃色、土黃色、米黃色等同類黃色系，對該頁面色彩組合調配具有一定的協調能力。結論：通常矢量頁面的配色相對於圖片配色來說，難度較大，色彩的組織搭配，是根據設計師們自己以往的豐富配色經驗，反覆調配、反覆加減而得。該頁面設計師選取了頁面的產品圖片中的兩三種顏色，例如點睛色里的紅色、藍色和黃色，再大膽的發揮出主色調藍色、較淺的輔色調藍色和點睛色正黃色，點睛色黃色運用於最能突出產品特色的文字上，這些和諧的元素生動趣味，讓整個頁面充滿了故事情節。本部分小節：● HSB數值H色相為240度時是正藍色，它的特性這個時候也就揮灑得越明顯。從以上不同屬性的藍色頁面色調上能看到，不同色相、飽和度、明度的藍色本身色彩特性表現得不是非常特殊，這也是低調沉穩的藍色所具備的特徵之一。關鍵在於該種藍色都與哪種哪幾種顏色襯托、對比的。● 冷色系以藍色為最典型的代表，因此就產生了廣義的相對暖色，例如當與玫瑰紫色做對比時，玫瑰紫就呈現出微妙的暖色，當與綠色做對比色，綠色就呈出了相對的暖色，但是此種特性呈現得非常的微弱，應根據不同的主題頁面做具體分析。● 當在藍色色相、明度上暗色亮色非常明朗的情況下，可以考慮添加中間色，減弱可能造成的單調感，豐富兩極色階的過渡，調和頁面的視覺感受。● 同一種RGB、HSB數值的藍色與不同的顏色搭配時，所反映出的特性與主題是不一樣的。例如與同類色(根據色相明度純度面積等同類色里得到很多種不同的藍色)，與鄰近色(根據色相明度純度面積等衍生出更多顏色)，與對比色(根據色相明度純度面積等產生出的廣義對比狹義對比)…… 應多多思考、多做嘗試。網頁設計配色應用實例剖析——紫色系紫色是一種在自然界中比較少見的顏色。象徵著女性化，代表著高貴和奢華、優雅與魅力，也象徵著神秘與莊重、神聖和浪漫。另一方面又有孤獨等意味。紫色在西方宗教世界中是一種代表尊貴的顏色，大主教身穿的教袍便採用了紫色。紫色的明度在有彩色的色度中是最低的。紫色的低明度給人一種沉悶、神秘的感覺。在紫色中紅的成份較多時，顯得華麗和諧。紫色中加入少量的黑，沉重、傷感、恐怖、莊嚴的感覺。紫色中加入白，變得優雅、嬌氣，並充滿女性的魅力。紫色通常用於以女性為對象或以藝術作品介紹為主的站點，但很多大公司的站點中也喜歡使用包含神秘色彩的紫色，但都很少做大面積使用。不同色調的紫色可以營造非常濃郁的女性化氣息，在白色的背景色和灰色的突出顏色的襯托下，紫色可以顯示出更大的魅力。下面我們根據紫色系不同屬性的鄰近色、高純度低純度配色、相對對比色等色彩搭配做不同的舉例分析。→ 紫色高純度網頁例圖：http:// www.everythinggirl.com
紫色系分析：（高純度對比：同類紫色+同類對比色）紫色的HSB數值H色相為300度時是正紫色。上圖的HSB模式S數值顯示，上組顏色飽和度基本都比較高，加上部分較高的明度組合，使該頁面異常奢華艷麗。輔色調之一的黃色是紫色強度最高的對比色，主、輔色面積的大小不同是形成視覺衝擊力最大的主要原因。值得一提的是右下腳的淺藍色的運用，它在整個頁面配色上是很謙遜的角色，但卻既突出上面的文字內容，又不張揚的壓抑住其他顏色的配色，屬於豐富於頁面的輔助作用。如果把它試換成別的顏色似乎還是沒有這個淺藍色效果好。另一輔助色淺紫紅色又稱粉紅色，粉紅色主要用於包含少女在內的女性站點。因為從明亮到淺白色調的粉紅色能夠表現出可愛、乖巧的感覺，這裡只做少量運用。其他點睛色使用得雖多但面積很小，主要是主色調紫色附近的過渡色，例如群青、青蓮、玫瑰、紅色等點綴，閃亮耀眼，增強頁面的視覺感染力，有渲染出華麗凸顯現代氣息的作用。結論：紫色結合紅色的紫紅色是非常女性化的顏色，它給人的感覺通常都是浪漫、柔和、華麗、高貴優雅，特別是粉紅色可以說是女性化的代表顏色。高彩度的紫紅色可以表現出超凡的華麗，而低彩度的粉紅色可以表現出高雅的氣質。紫紅色並不能隨意在所有的站點中使用，但使用恰當的紫紅色會給人留下深刻的印象。高彩度的紫色和粉紅色之間的搭配通常都能得到較好的效果。該頁面具有非常強烈的現代奢華感。時尚張揚的配色組合，符合該頁面主題所要表達的環境，讓人容易記住它。2淺紫色→ 紫色淺紫色網頁例圖：http://www.oopsy-daisy.com
紫色系分析：（淺紫色）該頁面使用特性最高的紫色提亮為100％高明度的主色調，很容易抓住人們的視線成為聚焦點，是非常大膽又時尚的配色。輔色調則是使用冷色系代表的深藍色，明度較低。主要是為了烘托左邊導航菜單，凸顯上面的內容信息，由於人們對網頁已然形成了視覺慣性，也起到了很好的視覺引導作用。主、輔色的搭配運用構成了較強烈的視覺對比效果。另一輔色調淺藍色，在主色調淺紫色的烘托下呈現稚嫩的感受，裡面的白色塊起到淺紫的背景和淺藍色調和、明快的作用。點睛色的使用實際有不少，這裡只選幾種起到主要作用的顏色做舉例分析。中黃色運用得很珍貴，只在左上區域出現，旨在突出主題文字的效果。其他配色主要是根據左下文字字母而來，紅和綠色出現在頁面的淺紫色較為寬敞的位置，小範圍的做色彩對比效果。其他點睛色則極少的零星分布，既調和呼應又起到活躍於頁面的角色作用，以上這些都是點綴和渲染頁面氣氛不可缺少的配色元素。結論：在紫色中加入白色，可使紫色略顯沉悶的特徵消失，變得清秀、優雅、嬌氣，並充滿女性的魅力。白色、粉紫色、天藍色的顏色搭配，是比較稚嫩的配色，同時也是最受少女歡迎的配色方案，這裡運用也較得體。使用高明度高飽和的主色調非常個性，讓人很容易記住它，但是色彩都有兩面性，此種顏色略顯驕躁感過於刺激視覺，不易於長時間的注目瀏覽。 3深紫色→ 紫色深紫色網頁例圖： http://www.dinis91.com
紫色系分析：（深紫色）以略有漸變色為背景主色調，漸變色是調和方法之一，起到增加層次感空間感柔和視覺的作用。背景色左上最亮處的特殊處理，主要起到突出了標誌的作用。從HSB模式H色相數值上看到輔助色依舊以主色調延伸而成，僅在明度上做了些變化，屬於同類色的調和色系。點睛色皆選用了色彩色系中明度最高的黃色及相近色黃綠、玫瑰紅。黃色和黃綠色真就點睛之筆——黃色是紫色的對比色，深紫色背景上的高明度黃色被襯托得異常跳躍。黃綠色既和諧又增添了頁面配色的高強度節奏。玫瑰紅在這裡是最溫暖的顏色，協調且增強了頁面配色的層次感。根據各顏色的特質，在視覺上成功做了先後次序的引導。白色雖是非色彩，但也起到拉大色彩之間色階層次的作用，增強了頁面空間感，也使以上配色更調和。結論：深紫色給人華貴、深遠、神秘、孤寂、珍貴的心理感受。較暗色調的紫色可以表現出成熟沉穩的感覺，創造、謎、忠誠、神秘、稀有。整個頁面配色尤其是點睛色的妙用，使得整個頁面非常新穎別緻，極賦現代都市氣息。根據面積的大小對比，適當的對比色能讓頁面有活躍、明快的氣氛。 4紫色配色：紫色＋綠色→ 紫色配色網頁例圖：http://www.kidskandoo.com
紫色系分析：（紫色配色：紫色＋綠色）綠色被譽為紫色的絕配色。主色調是飽和度降低明度較低的紫色，輔色調是色彩明度較高的草綠色及沉穩的深藍色。點睛色雖然被稱為點睛色，但在整個頁面中使用的面積極小，與其他色系所佔的比重來看，這兩種點睛色小到幾乎給忽略。儘管從HSB模式數值上看到，橙黃色為高純度高明度色，只在主題文字上有些體現。另一藍綠色所處的位置在顯眼的網站名稱後方，謙遜程度幾乎不為人們注意到，儘管它才是網站背後所要表達的真正主題。草綠色和深藍色把大面積的白色框起來，襯托起前景，但也許由於白色面積使用過大，為了不至於讓它太突出，在白色的背景上點綴較淺的紋樣來降低這種感覺。背景色紫色由於色彩特質明度較低的緣故，與明度較高的輔助色草綠色形成較明快的效果。結論：點睛色根據頁面所佔的面積因素，也有的僅起到輔助的作用。相反草綠色或許由於色彩特質的原因，這裡起到比較強調的強勢目的，在該頁面配色里起到非常關鍵的作用。 5紫色鄰近色配色：紫色+紫紅色→ 紫色鄰近色網頁例圖：http:// www.bridalbabe.com
紫色系分析：（紫色鄰近色配色：紫色+紫紅色）嚴格來說，該頁面配色的色組和紫色關聯上稍有些偏移，之所以做為案例選擇，是因為整體配色上依舊給人有紫色系配色的錯覺。HSB的H色相數值上顯示的260來看，正紫色數值為300，主色調整個往藍色系稍偏移，構成較有視覺感染力的藍紫色。藍紫色在色相環中位於藍色和紫色之間，所以它也蘊含著紫色的一些神秘感。儘管飽和度不是很高60%，但明度達到最高狀態為100％，使得該色彩艷度很強，較高亮度的藍紫色顯得非常高雅，契合網站主題。輔色調HSB的H色相數值為270，已經稍往紫色偏移，紫色特徵較明顯，明度較高且較明快的感覺。另一輔助色粉紅色H色相數值為331，稍往紅色系偏移，明度極高為100％，更增添了明快的氣息。點睛色在這裡起到了不可忽視的作用，由於淺紫紅較有女性氣質特徵，增添了該頁面的女性溫柔細膩的美感。另一點睛色深藍色由於色彩特質所致，這裡只是輔助性的做些點綴。結論：淺紫色系給人嫵媚、優雅、嬌氣、清秀、夢幻，充滿女性魅力。上面的配色除了點睛色深藍色明度較低，其他的色彩組合都在不同的程度上提高了明度，增強了頁面所要表達的主題效果。 6紫色配色：紫色+紅色→ 紫色配色應用網頁例圖：http://www.vitaminwater.com
紫色系分析：（紫色配色：紫色+紅色）這是一組非常簡潔精幹的配色頁面。主要使用了主、輔兩色調為界，點綴小配色，整體疏密得當，色塊分明的色彩構成。主色調紫HBS模式的H色相數值是283，稍向藍色方位偏移，以致於此種紫色略呈現冷色特徵。點睛色主要選擇紅藍黃三種，其中紅色的H色相顯示為347，色值向藍色偏移略呈冷調，因此該顏色在這裡顯示沒有僵硬的感覺。另一點睛色橙黃色使用面積非常之小，幾乎讓人忽略。右上角多個線條的小色塊的修飾增強了頁面的視覺感染力。背景黑色不是孤立使用，既響亮的突出前景，又與前景的線條、文字呼應起來，讓整個頁面高品位高層次的特質更明顯。結論：主色調紫色在這裡既有沉靜又顯高貴的感覺，提升產品的檔次。點睛色紅色的加入讓這種高貴又檔次的感覺更加明顯。藍色有穩住紫色和紅色的效果。該頁面大色塊的構圖及配色極其簡約，獨具魅力。 7低純度配色：紫色+綠色→ 紫色低純度配色應用網頁例圖：http://www.mandarinaduck.com
紫色系分析：（低純度配色：紫色+綠色）該頁面除了點睛色外，整體配色飽和度都很低，所以在視覺上呈柔和狀態。主色調紫色的HSB模式H色相為308，數值稍向紅色傾斜，由於飽和度及明度降低，顏色呈現很平和，空間感增強。輔助色綠色H色相為167，數值稍向藍色偏移，從RGB模式上看，G為125（正綠色時為255，R為0，B為0），R為82，B116，有這兩色混合，因此飽和度和明度都很低，然而在雅緻的紫色背景的烘托下，較為突出了綠色的產品這一主角，達到配色目的。另一輔助色灰色，為整體的柔和狀態增添了雅緻的氣息。點睛色黃色的特質因素，無疑是這頁面最響亮耀眼的顏色儘管使用的面積較小，它是紫色的對比色，高純度的黃色與低純度的紫色形成較強烈的視覺反差對比效果，也因此使得頁面的沉悶得到一定程度的緩解，提升頁面配色的空間透亮感。結論：整體柔和的配色調子較吻合的體現了尊貴高雅的服飾感覺，並透露出寧靜、安穩、雅緻的環境氛圍，充分體現出了紫色運用的最大魅力。本部分小節：● HSB數值H色相為300度時是正紫色，它的特性這個時候也就揮灑得越明顯。從上面的網頁配色實例中我們較全面的看到了不同角色紫色的性格體現。● 紫色是色彩系裡明度最低的顏色。儘管如此，高純度的紫色與高級灰度的紫色都透出不同的氣質。神秘、高雅在這裡配色是它普遍的詮釋。紫色的純色明度很低，因此它與淺色在一起，從明度關係上就分出了涇渭。為了不與黑白對比混淆，適當地將紫色加白色效果會更好。 由於紫色發冷，紫色配暖色時，暖色不能直接介入，需要調整純度或明度才能形成比較和諧的配色。● 綠色被譽為紫色的絕配色，也是一對複色對比色，它比三原色的對比色要溫和含蓄，由於它們都帶有一點共同成分，相互配合也會協調得多。各自的特質原因，對比之下綠色通常起到比較關鍵的作用。紫色對比色組通常是較小面積的做對比使用，不同面積不同明度飽和度的使用所表達的感受是不一樣的。● 紫色傳達著高貴、優雅、幻想、神秘、莊重的心理感受。藍紫色可以用來創造出都市化的成熟美，且藍紫色可以使心情浮躁的人冷靜下來。明亮的色調直至灰亮的藍紫色有一種與眾不同的神秘美感。低亮度的藍紫色顯得沉穩，高亮度的藍紫色顯得非常高雅。在網頁中，藍紫色通常與藍色一起搭配使用。網頁設計配色應用實例剖析——黑色系黑色是暗色，是純度、色相、明度最低的非彩色。象徵著力量，有時感覺沉默、虛空，有時感覺莊嚴肅穆，有時又意味著不吉祥和罪惡。自古以來，世界各族都公認黑色代表死亡、悲哀黑色具有能吸收光線的特性，別有一種變幻無常的感覺。黑色能和許多色彩構成良好的對比調和關係，運用範圍很廣。黑色給人深沉、神秘、寂靜、悲哀、壓抑的感受。黑色是最有力的搭配色。黑色也常用來表示英俊的男人。下面我們根據黑色系搭配不同的顏色所表現出的特性做不同的舉例分析。→ 黑色網頁例圖：http://www.chanel.com黑色系分析：（明度對比：黑色+白色）從RGB和HBS模式可以看出，三組數字顯示沒有摻雜任何的數字，都統一到最高級0到255，即純黑和純白。黑色白色屬於沒有色相和飽和度、只在明度兩極的非色彩。兩種極端強烈對比的只在明度上有區別的顏色，與前面我們所說的三原色、對比色的對比還是有較大區別的。該頁面只有兩種非色彩搭配，即黑色白色，襯映得該頁面的設計元素也非常乾淨簡練，旁邊點綴大小得當的文字元素減小該頁面有可能因此產生的單調感覺。
結論：黑白純色在明度上反差非常大，視覺衝擊強烈，主次分明，全站的貫穿運用，構成特色鮮明的設計風格，散發迷人的高品位的貴族氣息。黑白兩種顏色的搭配使用通常可以表現出都市化的感覺，常用於現代派頁面設計中。2非色彩系：黑白深灰色→ 黑色網頁例圖：http://www.foryoubruidsmode.nl黑色系分析：（非色彩系：黑白深灰色）該頁面與上頁配色類似，只是多了一組輔助色——灰色，黑、灰、白這三種非色彩在該頁面里都運用到了。大家從該頁整體可以看到，多了輔助色灰色，令該頁面層次感更豐富，過渡更柔和，空間感覺增強。左上部點睛色白色塊面的運用，使得這種空間感差距拉大，增強視覺層次感，同時突出標誌品牌、主題思想。另一作用在於突出文字的功能運用。背景深灰色明度非常低，接近於黑色，稍不留心有可能會被忽略。結合輔助色灰色再整體上看該色配色，主要起到豐富視覺層次感，緩和主色調黑色有可能帶來的僵硬感。
結論：黑白灰非色彩色調所構成的頁面較具特色，尤其灰色的加入更增添層次感。結合黑白圖形，營造出一段古典的故事場景。契合該網站所體現的內容思想。3黑色背景→ 黑色應用網頁例圖：http://www.telepopmusik.fr黑色系分析：黑色背景背景黑色下，除了白色，還有其他三種顏色綠色、紫色、紅色分布在不同的位置。其中綠色和紫色雖然被稱之為輔助色，但它們使用的面積仍然不多，只是相對於點睛色紅色來說。綠色主要是用於文字方面，紫色用於圖形方面，所指向的分工明確。從RGB模式RGB三個數值上看到紫色混合數值上較接近，因此純度降低，相對於綠色紅色來說為中間色，色彩性能上呈低調緩和狀態。HSB模式S數值來看，綠色雖然純度上比紅色稍低些，也許是因為使用面積較多的原因，看起來似乎比紅色醒目些。紅色在這裡主要起到的是點明目前所屬的狀態這一功能性作用，在黑色的背景下儘管使用面積非常小，但依舊容易被瀏覽者注意到。
結論：黑色的背景下所使用的顏色面積雖然不多，但由於黑色這一襯托放大的特性，其他顏色較容易引起瀏覽者的注意，充分發揮其設計意圖。4黑白淺灰→ 黑色配色網頁例圖：http://www.kurtarrigo.com黑色系分析：（黑白淺灰）從RGB數值都是234來上看可知，255為白色，背景色234隻是在明度上稍做變化得到的淺灰色。背景的淺灰色把前景的白黑對視覺的刺激力變得柔和協調很多。雖為背景灰色，實際在整個頁面配色作用上起到了點睛之筆，使得頁面煥發出另外一種神秘且特殊的氣息。該頁面無論從設計上還是配色上都非常簡潔，主要是以黑白文字為重點，背後的白黑色塊面粗、白色邊框線條無不是為了突出前景文字的作用。
結論：該頁面設計風格極其簡約，除了方形塊面邊框，沒有多餘的圖形修飾，主要是以文字的大小粗細、疏密間距排版為設計元素。淺灰色的加入讓本來具強烈衝突色的黑白變得素雅些了，也頗具高層次格調許多。5黑色＋少量彩色→ 黑色配色應用網頁例圖：http://www.panopt.net黑色系分析：黑色＋少量彩色該頁面基本上還是以黑色為主色調，雖然似乎多了不少顏色的加入，但是由於使用面積都較少，除了少許修飾外主要運用於功能文字方面的強調。輔助色藍色正藍色的HSB模式的H應該是240，目前這顯示的是215可看出色相上稍向綠色靠攏，S93％B43%來看純度和明度都不高，因此該藍色在黑色上顯示不明顯。這裡的點睛色主要都運用在文字功能上，紅色幾乎是正紅，由於降低了純度和明度，該顏色不明顯。綠色H數值為149，正綠色為120，色相上稍向藍色傾斜，純度和明度不高，因此該顏色也不明顯。
結論：低純度低飽和度的色彩在黑色背景下，較易使整體色彩達到統一的目的，顏色變得柔和而含蓄。6黑色配色：黑色+橙色→ 黑色配色應用網頁例圖：http://www.africa.com.br黑色系分析：（黑色配色：黑色+橙色）橙色的HSB模式H色值顯示是25，而正橙色是30可以知道，該橙色色相上稍往黃色傾斜。我們通過前面的學習可以知道橙色適用於視覺要求較高的時尚網站，運用於該網站主題設計再適合不過了。另一點睛橙色在色相上稍偏橙紅色，是基於橙色的一個過渡或者說是增加視覺節奏感的一個小方法。右邊文字在不同程度上也使用了橙色做為點睛，稍平衡了左右視覺，起到色彩左右呼應的作用。輔色調白色使得黑色和橙色的搭配上不至於太生硬，增強頁面視覺的愉悅感。
結論：橙色在黑色的背景上顯得很鮮亮，它的特性得到了最大化的發揮。7黑色配色：黑色+紅色→ 黑色配色應用網頁例圖：http:///www.emilystrange.com黑色系分析：（黑色配色：黑色+紅色）輔助色紅色從HBS模式上的H為0度看出，該紅色為正紅色且純度明度都為最高值100%，在黑色這一背景的襯托下，高純度高明度的正紅色遇到黑色搭配結合而得的特性簡直發揮到了極致。因此該頁面色彩配色具有極強的視覺衝擊力。點睛色白色是讓這兩種顏色配合起來更透亮，緩和對人視覺不適的壓迫力。儘管頁面的設計元素為噪音效果，顏色在不同面積分配上也參差不齊的感覺，但是由於黑色主色調為背景，牢牢掌控了全局，頁面設計及配色上也能達到統一的目的。
結論：紅色和黑色的搭配被譽為商業的成功色。一是因為紅色是一種對人刺激性很強的顏色，是最鮮明生動的、最熱烈的顏色。在黑色的反襯下鮮明紅色極容易吸引人們的目光。紅色相對於其他顏色，視覺傳遞速度最快。紅黑這兩種配色也被廣泛的運用於較能體現個性的時尚類網站，讓人印象強烈的深刻。 本部分小節：● 黑色是最暗的顏色，是純度、色相、明度最低的非彩色。因此它較容易起到襯托和發揮起其他顏色的特性，是最有力的搭配色。● 黑白色的搭配較充滿個性，合理運用能散發出另外一種迷人的高品位高格調的貴族氣質。黑色與橙色搭配較容易營造視覺要求較高的時尚網站。黑色與紅色的搭配被譽為是商業的成功色，具有極強的視覺衝擊力。● 無論頁面上使用或者色相跨度大的多種顏色、或是高純度低純度、或者高對比的顏色，只要有黑色這一最得力的色彩為主色調掌控著，頁面設計配色上能得到和諧統一的效果。網頁設計配色應用實例剖析——灰色系灰色介於灰色和白色之間，中性色、中等明度、無色彩、極低色彩的顏色。灰色能夠吸收其他色彩的活力，削弱色彩的對立面，而製造出融合的作用。灰色是一種中立色，具有中庸、平凡、溫和、謙讓、中立和高雅的心理感受，也被稱為高級灰，是經久不衰、最經看的顏色。任何色彩加入灰色都能顯得含蓄而柔和。但是灰色在給人高品味、含蓄、精緻、雅緻耐人尋味的同時，也容易給人頹廢、蒼涼、消極、沮喪、沉悶的感受，如果搭配不好頁面容易顯得灰暗、臟。從色彩學上來說，灰色調又泛指所有含灰色度的複合色，而複合色又是三種以上顏色的調和色。色彩可以有紅灰、黃灰、藍灰等上萬種彩色灰，這都是灰色調，而並不單指純正的灰色。下面我們根據灰色搭配不同的顏色所表現出的視覺特性，做一些不同的舉例分析。→ 灰色網頁（明度淺灰色）例圖：http://www.canubia.com
灰色系分析：（明度淺灰色）從頁面所呈現的明度色調來看，整個頁面偏淺灰色調，柔美高雅的灰調子。主色調及背景色是接近於明度白色且非常淺的灰調，輔色調的灰調子明度上較主色調稍深些，另一輔色調為白色。RGB模式顯示點睛色紅色R217及G9來看不是正紅色，在如此灰調子的頁面來看，如果不參考RGB模式肉眼幾乎看不出來。如果沒有點睛色的加入整個頁面呈毫無生氣的灰色系，略有些髒的感覺，平淡且乏味，沒能使大家對它產生過多的印象。紅色的特性把以上的這些平淡的感受打破了，讓人願意細品灰色所帶來的悠長韻味。HSB模式的B也能看出淺灰色在明度上較高，部分漸變的深灰色在頁面上所佔用的面積也不少，另一點睛色黑色的作用就是使明度色階跨度加深、明確，整個頁面呈現灰濛濛的感覺得以減弱。結論：該頁面整個看起來也可以說只有兩種色彩搭配，即非色彩系黑白灰和色彩系紅色，頁面顯得非常簡潔而含蓄。點睛色的加入減少了非色調淺灰色有可能產生的單調感覺。2同類灰色系：灰色＋橙色→ 灰色網頁（同類灰色系：灰色＋橙色）例圖：http://www.hcreativos.com
灰色系分析：（同類灰色系：灰色＋橙色）該頁面主要以大面積的灰色系列為主，主色調為背景色非常明確。部分灰色只在明度上加深了，增強灰色的空間感。從RGB所呈現的均衡數值及HSB模式的HS都為零來看，主色調的淺灰色屬於非常純凈的非色彩，沒有摻雜其他色系進去。而輔色調的兩個模式上就有些差異，HSB模式的H顯示180度色相上偏青藍色，有及其微弱的飽和度，明度也較低。點睛色壬獺SB顯示為正桔紅色且飽和度和明度都為100％，應該是及其耀眼的顏色，然而在大面積背景主色調下，此種耀眼的顏色得到緩解，這正是與灰色的配色後顯示出灰色最強烈的特性--削弱緩和刺激耀眼的顏色。點睛色橙色和白色點綴下打破了平面平淡的配色格局，眼前頓時一亮的感覺。結論：灰色調非色彩所構成的頁面頗具有獨特的魅力，整個頁面呈現出平穩緩和的氣質。兩個點睛色橙色和白色起到調動配色頁面的作用。3同類灰色＋多種顏色→ 灰色應用（同類灰色＋多種顏色）網頁例圖： http://www.kimbyungjin.com
灰色系分析：（同類灰色＋多種顏色）這是一個灰色階變化較多的頁面，形成較有節奏塊面分明的韻律美感。這一變化改善了灰色容易形成的呆板單調特性。從HSB模式數值來看，主色調輔色調都是非色彩的正灰色，沒有摻雜其他色彩進去。點睛色黃色、綠色H數值上顯示有些色相偏移都略向暖色色環靠攏，這兩顏色的特性是屬於較顯眼的顏色。另外兩點睛色粉紅和粉藍色在色相上已經較接近於正色系，明度較高飽和度降低。這四種顏色儘管所使用的面積非常少，但結合了面積上相對使用較多的非色彩白色，讓整個頁面配色雅緻的同時不乏生動活躍。結論：不同灰色背景的變化，前景使用面積較少的純凈色點綴，這幾種顏色還同樣出現在右上角產生平衡色彩的呼應作用，整個頁面產生雅緻和諧的視覺美感。4灰色＋對比色→ 灰色配色（灰色＋對比色）網頁例圖：http://www.fantasy-interactive.com
灰色系分析：（灰色＋對比色）從RGB和HSB模式上可看出主色調不是純正的非色系，裡面摻雜了其他色彩，肉眼識別及H色相為32範圍上都能看出含有微弱的黃色調在裡面，S13%B46%分別顯示該種顏色含濃重的灰色，有少量的黃色加入結合整個頁面的配色是比較調和的搭配。輔色調則是運用了比較正的淺灰色。點睛色主要是一組橙色、藍色對比色構成，從雙方的H色相上也能看出來。RGB模式上看到這兩種顏色都或多或少的摻雜了其他的顏色在裡面，所以明度純度上呈灰色階傾向。另一點睛色淺黃色相上呈現正黃色，但由於明度非常高因此色彩呈不飽和狀態，儘管如此在主色調灰色的背景下還是比較突出的。結論：該頁面依舊以灰色為主導位置，雖然主色調灰色少量摻雜了黃色，與頁面其他黃色色彩元素較統一調和。點睛色主要是以兩對比色做主導，相對其他顏色飽和度較高且面積使用得不少，較響亮和突出產品目的。在主色調灰黃色特性掌控下卻也到達醒目又和諧的目的。5灰色+青藍色→ 灰色配色（灰色+青藍色）應用網頁例圖：http://www.stylestation.net
灰色系分析：（灰色+青藍色）肉眼看上去已經能識別到了深灰色主色調有青藍色傾向，從HSB模式上能夠看到色相為180度，該深灰色飽和度和明度都比較低。點睛色是淺青藍色，HSB模式H色相所呈現的色相與主色調的數值一致，屬高明度低飽和度色系。主色調是明度較低的深灰色，是屬於較沉悶的顏色；而點睛色是淺青藍色，在深灰色的背景下略呈現有些暗淡，並沒有改善和帶來明快的感覺，輔助色是白色大面積的介入而因此使得整個頁面得到一定的透亮緩解，這是該頁面至關重要的一色。結論：該頁面用色不多，深灰、淺青藍、白，但合理的運用這三種顏色的配色角色，能使頁面煥發與眾不同的氣質魅力。6灰色+棕黃色→ 灰色配色（灰色+棕黃色）應用網頁例圖：http:// www.davychan.com
灰色系分析：（灰色+棕黃色）主色調是由兩種明度較接近的灰色構成。從RGB和HSB模式上能看到這兩種灰色屬於純正的非色彩，沒有其他的顏色摻雜進去。輔助色為複色，我們知道複色是由兩種間色或者原色和間色混合產生，通常所混合產生的顏色色相不明顯，當某種顏色所佔的比重大時，該顏色的色相才相較突出。從H色相上看顏色稍偏黃色，由於混合其他顏色且明度較低，因此呈棕黃色。複色棕黃色在背景深灰的襯托下低調不張揚，能很好的與之融為一體。點睛色H顯示120度是正綠色。該綠色選擇了明度適中純度不高的配色，既表達了主題又能與整個頁面灰調子很好的調和一起。另一點睛色白色讓所有的顏色的特性都得以很好的發揮並起到拉開色階層次的作用。結論：深灰色具有謙虛、平凡、沉默、中庸、寂寞、憂鬱、消極的心理感受。主色調主要集中在背景的運用和變化上，增強頁面的空間感，視覺元素頗有時尚現代的氣息，與前景的色彩明度純度稍有變化又在視覺上達到風格統一。7無彩色搭配→ 灰色配色（無彩色搭配）應用網頁例圖：http://www.hejz.com
灰色系分析：（無彩色搭配）就像回到了古老的黑白照年代。初看該頁面容易把背景的深灰色誤認為是黑色，再仔細觀看就感覺到了此種深灰色不凡的作用，假如背景色使用了黑色，頁面的主體人物和空間感的相互作用就變得僵硬且呆板。從RGB和HSB模式上可知主色調深灰色為純正的非色彩，明度很低。但與人物的毛髮對比下就能看出它們明度之間的差異。輔助色這裡取的是照片的膚色，也是純正的淺灰色，該人物佔據了該頁面三分之一的面積，主次鮮明。儘管點睛色是明度最高的白色，但是由於只在小文字上的小面積使用，因此只起到了點綴一下頁面細節突顯主次關係的作用。結論：根據前面最初講的網頁應用部分的第一節色調，主色調、輔色調、點睛色所使用的面積比例來看，該頁的例子得到了很好的詮釋。由於該頁面是非色彩黑白灰構成，頁面配色分析就變得簡單化了不少，因此在其他頁面實例里出現的主色調、輔色調、點睛色不同的色彩內斂與張揚的特性在這裡也就涉及不到了。本部分小節：● 灰色謙和內斂的特性決定了不同明度的灰色扮演的是輔佐陪襯的角色。● 非色彩就是沒有彩度的顏色，而灰色相對黑色、白色要多些變化，因為它能的通過明度來表達不同的性格特徵。● 灰色與其他彩度色彩搭配時能降低張揚耀眼的顏色，調和色彩的方法之一。兩種或兩種以上的色彩混合，如能配上灰色，這兩個色調本身必能相互調和。● 以上的例子中不難看出，都是非色彩系灰色為主色調點綴極少面積的色彩系，色彩運用的面積反差越大，頁面所呈現的獨特魅力也就越強烈。灰色的特性在於能把刺激耀眼的顏色柔和化，這將是調和多個頁面配色的利器，但要也要注意不同明度灰色所起到的配色作用，不同明度的灰色搭配不同的彩度顏色時，所得到的結果差別是很大，根據整體頁面配色應在灰色明度上要反覆的調整。● 無彩度的黑白灰不同面積的使用，相對彩度色系來說是比較容易的顏色搭配，且能包容所有的彩度顏色。
推薦閱讀：
※第三十二講、《楊公日課學》實戰運籌帷幄決勝千里
※《星盤奇門》實戰教學案例大集錦——經營求財類
※年月日時斷命實戰口訣二
※庫里2.5測評實戰如何？
※財派暗腳實戰法