網頁設計配色系列——綠色系
綠色在黃色和藍色（冷暖）之間，屬於較中庸的顏色，這樣使得綠色的性格最為平和、安穩、大度、寬容。是一種柔順、恬靜、滿足、優美、受歡迎之色。也是網頁中使用最為廣泛的顏色之一。
綠色與人類息息相關，是永恆的欣欣向榮是的自然之色，代表了生命與希望，也充滿了青春活力，綠色象徵著和平與安全、發展與生機、舒適與安寧、鬆弛與休息，有緩解眼部疲勞的作用。
它本身具有一定的與自然、健康相關的感覺，所以也經常用於與自然、健康相關的站點。綠色還經常用於一些公司的公關站點或教育站點。
綠色能使我們的心情變得格外明朗。黃綠色代表清新、平靜、安逸、和平、柔和、春天、青春、公升級的心理感受。
下面我們根據綠色系不同屬性鄰近色、同類色的高純度低純度、對比色等色彩搭配做不同的舉例分析。
→綠色網頁例圖
綠色系分析：
從上圖的主色調、輔色調hsb模式的數值可看出，這兩中顏色只是在明度上有區別，其顯示的色相與飽和度是一樣的。正綠色是120度，這兩種顏色從rgb數值上看，都不同程度的混合了其他少許顏色，因此離正綠色稍有些偏差。由於綠色本身的特性，所以整個網頁看起來很安穩舒適。
輔助色只在明度上降低，讓頁面多了些層次感、空間感。
白色塊面使得綠色的特性發揮到最好的狀態並增強了視覺節奏感。
點睛色恰到好處的體現出了"點睛"這一妙筆，極盡**力，整個頁面頓時生動提神起來，增強了頁面主題的表達力。
結論：主、輔色調是屬於同類色綠色系，通過不同明度的變化，能較遞增緩和變化同時卻也較明顯的體現出頁面的色彩層次感來。如果不是通過數值來分析判斷，可能會有些朋友憑經驗判斷，容易誤認為這兩種顏色除了明度外有可能純度會有所不同，這時候適當的使用數值模式會很容易得到正確的結論的。
整個頁面配色很少：最大色塊的翠綠，第二面積的白色，第三面積的深綠色，但得到的效果卻是強烈的、顯眼的，達到充分展現產品主題的目的。
深綠色給人茂盛、健康、成熟、穩重、生命、開闊的心理感受
→綠色高純度網頁例圖
綠色系分析：(高純度配色：綠色+對比色組合)
hsb數值h顯示60度為正黃色，該主、輔色調只向綠色傾斜了一丁點--h為75度。大面積明度稍低的黃綠色為主要色調，飽和度卻非常高，達到了100%，輔助色使用了提高明度的嫩綠色和白色，這兩種輔色除了增加頁面的層次感的同時，還能讓整個頁面配色有透亮的感覺，增強了綠色的特性。背景深褐色無疑把前景的所有純色烘托得都耀眼於舞台上。
該頁面有兩組小小的對比色，一組是黃綠與橙紅色，一組是橙黃色與天藍色，這兩組配色嚴格的來說不算對比色，因為色彩多少有些偏差。雖然它們的飽和度降低，但在這個頁面中足以構成了最響亮的色調，把整個頁面烘托得非常活躍、鮮明。
結論：主、輔色調黃綠色大面積使用並不刺目，反而使得頁面看起來很有朝氣、活力。
適當運用不同純度的不是相當嚴格意義上的對比色系組合時，通常能起到的主要作用是主次關係明確。不"標準"的對比色系對比特性雖然減弱，頁面色彩看起來容易協調、柔和，但一樣能突出主題。
→同類色淺綠色網頁例圖
綠色系分析：(同類色淺綠色)
主色調綠色屬性是明度很高的淺綠色，前面提到過，通常情況下明度高飽和度就降低，飽和度低頁面色彩度就降低，除非顏色本身有自己的特性，加上大面積的輔助色白色，整個頁面看起來很清淡、柔和、寧靜，甚至有溫馨的感覺。
頁面中使用了漸變的淺綠色，使得整個頁面視覺上更加柔和舒適。
儘管點睛色只在主要標誌上出現，按鈕也只有少許一點，但也給整個頁面的色彩帶來些亮筆。尤其是紅色的hsb模式的h數值顯示顏色接近於正紅色，飽和度達到最高值。另乙個點睛色中黃色，在頁面視覺上呈綠色與紅色這一組對比色起到緩和視覺的作用。
因為在色輪表上，黃色正是在綠色和紅色之間的過渡色。
結論：淺綠色系有優雅、休息、安全、和睦、寧靜、柔和的感覺。
漸變的效果更能加深這種印象。但頁面配色上淺色過多時，整個頁面容易呈現發"灰"的感受，這就需要適量的新增純度稍高的顏色例如左下角的輔助色綠色塊，適當的鮮豔的點睛都能很好的解決這一問題。
→綠色弱對比網頁例圖
綠色系分析：(黃綠色+弱對比)
從hsb模式的數值上看，主色調是接近於黃色的基礎上加入了少許綠色在裡面，飽和度和明度降低，色彩看起來較柔和。輔色調墨綠色的綠色的傾向稍高，飽和度也較高，只是明度降低，該色看起來踏實沉穩。
點睛色紅色h數值為零度，呈正紅色，但是該顏色飽和度和明度降低，而紅色本身的色度比黃綠色要暗不少，因此顏色穩重。另一點睛色藍綠色，明度飽和度都很低，在頁面配色裡似乎沒有點睛感覺，更多的是呈輔助狀態。
結論：主色調是相對比較鮮亮的顏色，而輔助色和點睛色是屬於比較沉穩的顏色，頁面通過大小色塊的對比提高視覺的反差力度，增強頁面的感染力。
由於整個頁面的飽和度整體稍微降低，因此該頁面配色較協調、緩和。
→同類綠色+多種點睛色例圖
綠色系分析：(綠色配色：同類綠色+多種點睛色)
主要色調hsb模式h數值顯示75度，依舊是色輪表裡傾向於黃色區域方位邊緣的綠色，呈現出的黃綠色調。輔色調在明度上有些提亮，與主色調形成較強的對比。
點睛色裡所使用的對比色組合有兩組，紅色與綠色，藍色與橙黃色，其中黃色是介於暖色(橙黃、紅色)和冷色(綠色、藍色)的過渡色也是調和色。
結論：通過上面的分析大家可以看到，該網頁的配色不少，而且還有兩組對比色在內，但是頁面配色也很協調。原因之一，從下面抽取的色塊可以看出來，是乙個過渡柔和的色輪表：
以黃色為中界一邊是較淺的黃綠到綠色再到藍色，另一邊是橙黃再到紅色。原因之二，點睛色畢竟是扮演著點睛色的角色，有主色調和輔色調大面積的控制，即便再多些點睛色也不至於很快干擾到頁面的整體配色。
整個頁面保證了協調、不凌亂的步調，但是又能把商業**的熱鬧氛圍體現得很好的渲染。此種配色方法值得我們學習借鑑。
→綠色鄰近色應用網頁例圖
綠色系分析：(鄰近色配色：綠色+藍色)
全頁使用的主要色調基本上是屬於明度較高飽和度較低的顏色，其中還使用了漸變色緩和的過渡，因此頁面看起來舒服協調。
主色調是飽和度較高的翠綠色運用於背景色，幾乎是調節於整個頁面的關鍵色。如果沒有這一背景色塊，整個頁面容易發灰。還有右邊的粉綠大塊面積稍多，有些灰的感覺，好在前景的文章使用了色度明度稍深的藍色壓住，稍顯好些，關鍵還是有白色的箭頭很好的把粉綠和藍色文字的色階拉開了距離。
左邊的**清晰且純度較高也對整個頁面配色起到一定的調節作用。
點睛色主要是標誌的顏色，如果可以忽略不計，頁面配色更趨於平淡。
結論：明度較高飽和度較低的顏色，如果沒有明度較深飽和度較高的顏色進行勾勒或者點綴，這個頁面配色看起來容易發灰。
→綠色對比色網頁例圖
綠色系分析：(對比色配色：綠色+紅色)
主色調是有點黃色傾向的綠色，從hsb數值上可以看到h為98度，綠色特性較明顯了。
輔助色則是三個淺色系，起到調和整個頁面色彩的作用。粉紅和粉綠色分別取的是頁面綠色紅色通過提高明度而得，因此整個頁面色彩前後呼應、配色調和。
點睛色紅色的hbs模式h數值351度，在色輪表上偏向於紫色方位，因此傾向於冷紅色，色度上稍有些刺目和艷麗。
主色調綠色和點睛色紅色所放置的位置，讓頁面導航區域和內容區域視覺引導較為分明：主色調綠色的設計亮點既用於導航又很流暢自然的融合到背景，渾然一體;這裡尤其是點睛色紅色放置於背景的處理很獨到，烘托突出於前景內容，在眾多網頁設計中並不多見。
結論：整個頁面的配色取色於標誌色，量身定做的感覺。
適當的運用對比色有強調的感覺，但頁面配色處理上並不強烈、耀眼，因為使用了白色及其相應的提高明度的粉色做視覺的緩和處理。
本部分小節：
●綠色是緩和健康的顏色，hsb數值h色相為120度時是正綠色。大家通過以上的網頁例項可以看到，偏向於黃色方位的綠色運用得最多，也就更受到大眾的歡迎。純正的正綠色在視覺感受上可能稍微顯得有些色度較低的生硬，配色難度稍大。
不同的黃綠色飽和度、明度的不同變化可以表達不同主題的頁面效果。
●點睛色可以是幾種，也可以是不同對比色的組合，有的起到豐富並活躍頁面配色的視覺節奏，有的起到調和整體頁面配色的作用。
輔助色通常是同類色系或者鄰近色系，起到輔助並烘托主色調的作用。輔色調和主色調分別在不同的頁面做為唯一高純度色的時候，能夠起到挽救於整個頁面發灰的作用。
●當整個頁面配色明度太高色度降低時候，頁面容易呈現發灰的感覺，可以適當的使用少許純度較高或者明度較低的色系來加以改善。
網頁設計配色應用例項剖析 紫色系
網頁設計配色應用例項剖析 紫色系 1 紫色是一種在自然界中比較少見的顏色。象徵著女性化，代表著高貴和奢華 優雅與魅力，也象徵著神秘與莊重 神聖和浪漫。另一方面又有孤獨等意味。紫色在西方宗教世界中是一種代表尊貴的顏色，大主教身穿的教袍便採用了紫色。紫色的明度在有彩色的色度中是最低的。紫色的低明度給人一...
網頁設計配色應用例項剖析 黃色系
黃色是陽光的色彩，具有活潑與輕快的特點，給人十分年輕的感覺。象徵光明 希望 高貴 愉快。淺黃色表示柔弱，灰黃色表示病態。它的亮度最高，和其他顏色配合很活潑，有溫曖感，具有快樂 希望 聰明和輕快的個性，有希望與功名等象徵意義。黃色也代表著土地 象徵著權力，並且還具有神秘的宗教色彩。黃色的性格冷漠 高傲...
5 網頁設計配色應用例項剖析 紅色系
紅色的色感溫暖，性格剛烈而外向，是一種對人刺激性很強的顏色。紅色容易引起人的注意，也容易使人興奮 激動 緊張 衝動 還是一種容易造 視覺疲勞的顏色。在眾多顏色裡，紅色是最鮮明生動的 最熱烈的顏色。因此紅色也是代表熱情的情感之色。鮮明紅色極容易吸引人們的目光。紅色在不同的明度 純度的狀態 粉紅 鮮紅 ...