網頁設計配色應用實例剖析——灰色系

灰色介於灰色和白色之間，中性色、中等明度、無色彩、極低色彩的顏色。灰色能夠吸收其他色彩的活力，削弱色彩的對立面，而製造出融合的Web Design作用。 灰色是一種中立色，具有中庸、平凡、溫和、謙讓、中立和高雅的心理感受，也被稱為高級灰，是經久不衰、最經看的顏色。 任何色彩加入灰色都能顯得含蓄而柔和。但是灰色在給人高品味網站建設、含蓄、精緻、雅致耐人尋味的同時，也容易給人頹廢、蒼涼、消極、沮喪、沉悶的感受，如果搭配不好頁面容易顯得灰暗、髒。 從色彩學上來說，灰色調又泛指所有含灰色度的複合色，而複合色又是三種以上顏色的調和色。色彩可以有紅灰、黃灰、藍灰等上萬種彩色灰，這都是灰色調，而並不單指純正的灰色。 下面我們根據灰色搭配不同的顏色所表現出的視覺特性，做一些不同的舉例分析網頁寄存。 灰色系分析：（明度淺灰色） 從頁面所呈現的明度色調來看，整個頁面偏淺灰色調，柔美高雅的灰調子。 主色調及背景色是接近於明度白色且非常淺的灰調，輔色調的灰調子明度上較主色調稍深些，另一輔色調為白色。 RGB模式顯示點睛色紅色R217及G9來看不是正紅色，在如此灰調子的CMS頁面來看，如果不參考RGB模式肉眼幾乎看不出來。如果沒有點睛色的加入整個頁面呈毫無生氣的灰色系，略有些髒的感覺，平淡且乏味，沒能使大家對它產生過多的印象。紅色的特性把以上的這些平淡的感受打破了，讓人願意細品灰色所帶來的悠長韻味。 HSB模式的B也能看出淺灰色在明度上較高，部分漸變的深灰色在頁面上所佔用的面積也不少，另一點睛色黑色的作用就是使明度色階跨度加深、明確，整個頁面呈現灰濛濛的感覺得以減弱。 結論： 該頁面整個看起來也可以說只有兩種色彩搭配，即非色彩系黑白灰和色彩系紅色，頁面顯得非常簡潔而含蓄。點睛色的加入減少了非色調淺灰色有可能產生的單調感覺。 灰色系分析：（同類灰色系：灰色＋橙色） 該頁面主要以大面積的灰色系列為主，網頁設計模板主色調為背景色非常明確。部分灰色只在明度上加深了，增強灰色的空間感。 從RGB所呈現的均衡數值及HSB模式的HS都為零來看，主色調的淺灰色屬於非常純淨的非色彩，沒有摻雜其他色系進去。而輔色調的兩個模式上就有些差異，HSB模式的H顯示180度色相上偏青藍色，有及其微弱的飽和度，明度也較低。點睛色壬獺SB顯示為正桔紅色且飽和度和明度都為100％，應該是及其耀眼的顏色，然而在大面積背景主色調下，此種耀眼的顏色得到緩解，這正是與灰色的配色後顯示出灰色最強烈的特性--削弱緩和刺激耀眼的顏色。 點睛色橙色和白色點綴下打破了平面平淡的配色格局，眼前頓時一亮的感覺。 結論： 灰色調非色彩所構成的頁面頗具有獨特的魅力，整個頁面呈現出平穩緩和的氣質。兩個點睛色橙色和網上商店白色起到調動配色頁面的作用。 灰色系分析：（同類灰色＋多種顏色） 這是一個灰色階變化較多的頁面，形成較有節奏塊面分明的韻律美感。這一變化改善了灰色容易形成的呆板單調特性。 從HSB模式數值來看，主色調輔色調都是非色彩的正灰色，沒有摻雜其他色彩進去。點睛色黃色、綠色H數值上顯示有些色相偏移都略向暖色色環靠近，這兩顏色的特性是屬於較顯眼的顏色。另外兩點睛色粉紅和粉藍色電子商務在色相上已經較接近於正色系，明度較高飽和度降低。這四種顏色儘管所使用的面積非常少，但結合了面積上相對使用較多的非色彩白色，讓整個頁面配色雅致的同時不乏生動活躍。 結論： 不同灰色背景的變化，前景使用面積較少的純淨色點綴，這幾種顏色還同樣出現在右上角產生平衡色彩的呼應作用，整個頁面產生雅致和諧的視覺美感。