網(wǎng)站制作怎樣配色經(jīng)驗之綠色頁面配色
綠色在黃色和藍色（冷暖）之間，屬于較中庸的顏色，這樣使得綠色的性格最為平和、安穩(wěn)、大度、寬容是一種柔順、陪靜、滿足、優(yōu)美、受歡迎之色。，也是網(wǎng)頁中使用最為廣泛的顏色之一。綠色與人類息息相關，是永恒的欣欣同榮的自然之色，滿了青春活力，綠色象征著和平與安全、發(fā)展與生機、舒適與安寧、松弛與休息，有緩解眼部疲勞的作用綠色具有一定的與自然、健康相關的感覺。
也充綠色具有定的與自然、健康相關的感覺，所以也經(jīng)常用于與自然、健康相關的站點。綠色還經(jīng)常用于一些公司的公關站點或教育站點，綠色能使我們的心情變得格外明朗。黃綠色代表清新、平靜、安逸、和平、柔和、春天、青春、升級的心理感受。深圳網(wǎng)站制作公司前端設計師現(xiàn)在就網(wǎng)頁設計對于綠色的幾種搭配方法作如下經(jīng)驗分享：
一、網(wǎng)站設計配色經(jīng)驗之綠色
【示例】綠色網(wǎng)頁示例截圖10-52所示
網(wǎng)站制作配色經(jīng)驗示意圖l0-52綠色頁面效果
【分析】
從圖10-52的主色調(diào)、輔色調(diào)HSB模式的數(shù)值可看出，這兩種顏色只是在明度上有區(qū)別，其顯示的色相與飽和度是樣的。正綠色是120度，這兩種顏色從RGB數(shù)值上看，都不同程度地混合了其他少許顏色，因此離正綠色稍有些偏差。由于綠色本身的特性，所以整個網(wǎng)頁看起來很安穩(wěn)舒適。
輔助色只在明度上降低，讓頁面多了些層次感、空間感。白色塊面使得綠色的特性發(fā)揮到最好的狀態(tài)并增強了視覺節(jié)奏感。點睛色恰到好處．極盡誘惑力，整個頁面頓時生動提神起來，增強了頁面主題的表達力。
【網(wǎng)站設計師點評】
整個頁面配色很少：最大色塊的翠綠，第二面積的白色，第三面積的深綠色，但得到的效果卻是強烈的、顯眼的．達到充分展現(xiàn)產(chǎn)品主題的目的。源綠色給人茂盛、健康、成熟、穩(wěn)重、生命、開闊的心理感受。主、輔色調(diào)是屬于同類色綠色系，通過不同明度的變化，能較遞增緩和變化，同時卻也較明顯地體現(xiàn)出頁面的色彩層次感來。如果不是通過數(shù)值來分析判斷，可能會誤認為這兩種顏色除了明度外有可能純度會有所不同，這時適當?shù)厥褂脭?shù)值模式會很容易得到正確的結論。
二、網(wǎng)站設計配色經(jīng)驗之高純綠
【示例】綠色高純度網(wǎng)頁示例截圖如圖10-53所示。
網(wǎng)站制作色彩搭配經(jīng)驗示意圖圖10-53高純綠頁面效果
【分析】
HSB數(shù)值H顯示60度為正黃色，該主、輔色調(diào)H為75度，向綠色傾斜了一點。大面積明度稍低的黃綠色為主要色調(diào)，飽和度卻非常高，達到了100%，輔助色使用了提高明度的嫩綠色和白色，這兩種輔色除了增加頁面的層次感的同時，還能讓整個頁面配色有透亮的感覺，增強了綠色的特性。背景深褐色無疑把前景的所有純色烘托得都耀眼于舞臺上。
該頁面有兩組小小的對比色，一組是黃綠與橙紅色，一組是橙黃色與天藍色，這兩組配色嚴格地來說不算對比色，因為色彩多少有些偏差。雖然它們的飽和度降低，但在這個頁面中足以構成了最響亮的色調(diào)，把整個頁面烘托得非?；钴S、鮮明。
【網(wǎng)站設計師點評】
主、輔色調(diào)黃綠色大面積使用并不刺目，反而使得頁面看起來根有朝氣、活力。適當運用不同純度的不是相當嚴格意義上的對比色系組臺時，通常能起到的主要作用是主次關系明確。不“標準”的對比色系對比特性雖然減弱，頁面色彩看起來容易協(xié)調(diào)、柔和，但樣能突出主題。
三、網(wǎng)站設計配色經(jīng)驗之淺綠色
【示例】同類淺綠色網(wǎng)頁示側截圖如圖10-54所示
【分析】
主色調(diào)綠色屬性是明度很高的淺綠色，通常情況下明度高飽和度就降低，飽和度低頁面色彩度就降低，加上大面積的輔助色白色，整個頁面看起來很清淡、柔和、寧靜，甚至有溫馨的感覺。頁面中使用了漸變的淺綠色，使得整個頁面視覺上更加柔和舒適。
盡管點睛色只在主要標志上出現(xiàn)，按鈕也只有少許點，但也給整個頁面的色彩帶來些亮筆。尤其是紅色的HSB模式的H數(shù)值顯示顏色接近于正紅色，飽和度達到最高值。另一個點睛色中黃色，在頁面視覺上呈綠色與紅色這組對比色起到緩和視覺的作用。因為在色輪表上，黃色正是在綠色和紅色之間的過渡色。
【網(wǎng)站設計師點評】
淺綠色系有優(yōu)雅、休息、安全、和睦、寧靜、柔和的感覺。漸變效果更能加深這種印象。但頁面配色上淺色過多時，整個頁面容易呈現(xiàn)發(fā)“灰”的感受，這就需要適量地添加純度稍高的顏色，例如左下角的輔助色綠色塊，適當?shù)孽r艷的點睛都能很好地解決這問題。
四、網(wǎng)站設計配色經(jīng)驗之黃綠色
【示例】黃綠色弱對比網(wǎng)頁示例截圖如圖10-55所示。
分析
從HSB模式的數(shù)值看，主色調(diào)是接近于黃色的基礎上加入了少許綠色，飽和度和明度降低，色彩看起來較柔和。輔色調(diào)墨綠色的綠色的傾向稍高，飽和度也較高，只是明度降低，該色看起來踏實沉穩(wěn)。
點睛色紅色H數(shù)值為零度，呈正紅色，但是該顏色飽和度和明度降低，而紅色本身的色度比黃綠色要暗不少，因此顏色穩(wěn)重。另點睛色藍綠色，明度和飽和度都很低，在頁面配色中似乎沒有點睛感覺，更多的是呈輔助狀態(tài)。
【網(wǎng)站設計師點評】
主色調(diào)是相對比較鮮亮的顏色，而輔助色和點睛色是屬于比較沉穩(wěn)的顏色，頁面通過大小色塊的對比提高視覺的反差力度，增強頁面的感染力。由于整個頁面的飽和度整體稍微降低，因此該頁面配色較協(xié)調(diào)、緩和。
五、網(wǎng)站設計配色經(jīng)驗之綠色+多色
【示例】同類綠色+多種點睛色示例截圖如圖10-56所示
分析
主色調(diào)HSB模式H數(shù)值顯示75度，依舊是色輪表里傾向于黃色區(qū)域方位邊緣的綠色，呈現(xiàn)出的黃綠色調(diào)。輔色調(diào)在明度上有些提亮，與主色調(diào)形成較強的對比。
點睛色里所使用的對比色組合有兩組，紅色與綠色，藍色與橙黃色，其中黃色是介于暖色（橙黃、紅色）和冷色（綠色、藍色）的過渡色，也是調(diào)和色。
【網(wǎng)站設計師點評】
該網(wǎng)頁配色不少，且還有兩組對比色在內(nèi)，但是頁面配色也很協(xié)調(diào)。原因之，從下面抽取的色塊可以看出來，是個過渡柔和的色輪表：以黃色為中界邊是較淺的黃綠到綠色再到藍色，另邊是橙黃再到紅色。原因之二，點睛色畢竟是扮演著點睛色的角色，有主色調(diào)和輔色調(diào)大面積的控制，即便再多些點睛色也不至于很陜干擾到頁面的整體配色。整個頁面保證了協(xié)調(diào)、不凌亂的步調(diào)，但是又能把商業(yè)網(wǎng)站的熱鬧氛圍很好地渲染。此種配色方法值得我們學習借鑒。
六、網(wǎng)站設計配色經(jīng)驗之泛綠色
【示例】綠色鄰近色應用網(wǎng)頁示側截圖如圖10-57所示
分析
主色調(diào)基本上是屬于明度較高、飽和度較低的顏色，其中還使用了漸變色緩和地過渡，因此頁面看起來舒服協(xié)調(diào)。主色調(diào)是飽和度較高的翠綠色運用于背景色，幾乎是調(diào)節(jié)于整個頁面的關鍵色。如果沒有這背景色塊，整個頁面容易發(fā)灰。
右邊的粉綠大塊面積稍多，有些灰的感覺．好在前景的文章使用了色度明度稍深的藍色壓住，稍顯好些，關鍵還是有白色的箭頭很好地把粉綠和藍色文字的色階拉開了距離。左邊的照片清晰且純度較高，也對整個頁面配色起到定的調(diào)節(jié)作用。點睛色主要是標志的顏色，如果可以忽略不計，頁面配色更趨于平淡。
【網(wǎng)站設計師點評】
明度較高、飽和度較低的顏色，如果沒有明度較深、飽和度較高的顏色進行勾勒或者點綴，這個頁面配色看起來容易發(fā)灰
七、網(wǎng)站設計配色經(jīng)驗之綠色+紅色
【示例】綠色與對比色紅色網(wǎng)頁示例截圖如圖10-58所示
分析
主色調(diào)是有點黃色傾向的綠色，從HSB數(shù)值上可以看到H為98度，綠色特眭較明顯。輔助色則是3個淺色系，起到調(diào)和整個頁面色彩的作用。粉紅和粉綠色分別取的是頁面綠色、紅色通過提高明度而得，因此整個頁面色彩前后呼應、配色調(diào)和。點睛色紅色的HBS模式H數(shù)值351度，在色輪表上偏向于紫色方位，因此傾向于冷紅色，色度上稍有些刺目和艷麗。
主色調(diào)綠色和點睛色紅色所放置的位置，讓頁面導航區(qū)域和內(nèi)容區(qū)域視覺引導較為分明：主色調(diào)綠色的設計亮點是，既用于導航又很流暢自然地融合到背景，渾然體；這里尤其是點睛色紅色放置于背景的處理很獨到，烘托突出于前景內(nèi)容，在眾多網(wǎng)頁設計中并不多見。
【網(wǎng)站設計師點評】
整個頁面的配色取色于標志色，量身定做的感覺。適當?shù)剡\用對比色有強調(diào)的感覺．但頁面配色處理上并不強烈、耀眼，因為使用了白色及其相應的提高明度的粉色撒視覺的緩和處理。
網(wǎng)站制作公司總結
綠色是緩和健康的顏色，HSB數(shù)值H色相為120度時是正綠色。通過以上實例可以看到，偏向于黃色方位的綠色運用得最多，也就更受到大眾的歡迎。純正的正綠色在視覺感受上可能稍微顯得有些色度較低的生硬，配色難度稍大。不同的黃綠色飽和度、明度的不同變化可以表達不同主題昀頁面效果。
點睛色可以是幾種，也可以是不同對比色的組合，有的起到豐富并活躍頁面配色的視覺節(jié)奏，有的起到調(diào)和整體頁面配色的作用。輔助色通常是同類色系或者鄰近色系，起到輔助并烘托主色調(diào)的作用。輔色調(diào)和主色調(diào)分別在不同的頁面作為唯高純度色時，能夠起到挽救于整個頁面發(fā)灰的作用。
當整個頁面配色明度太高色度降低時，頁面容易呈現(xiàn)發(fā)灰的感覺，可以適當?shù)厥褂蒙僭S純度較高或者明度較低的色系來加以改善。好了，網(wǎng)站制作公司關于網(wǎng)頁色彩配色經(jīng)驗之綠色的經(jīng)驗分享本文就到這里。謝謝您的關注，希望能給你的工作有所幫助，博納網(wǎng)絡編輯整理。
