網(wǎng)站制作配色經(jīng)驗之：灰色頁面配色
網(wǎng)站設(shè)計對色彩的調(diào)配灰色介于黑色和白包之間，中性色、中等明度、無色彩、極低色彩的顏色?；疑軌蛭掌渌实幕盍?，削弱包彩的對立面，能夠制造出融合的作用。
灰色也是種中立色，具有中庸、平凡、溫和、謙讓、中立和高雅的心理感受，也被稱為高級灰，是經(jīng)久不衰、最耐看的顏色。深圳網(wǎng)站制作公司前端設(shè)計師認為，任何色彩加入灰色都能顯得含蓄而柔和。但是灰色在給人高品味、含蓄、精致、雅致耐人尋味的同叫，也容易給人頹廢、蒼涼、消極、沮喪、沉悶的感受，如果搭配不好，頁面容易顯得灰暗、臟。
從色彩學上分析，灰色調(diào)又泛指所有含灰色度的復(fù)合色，而復(fù)合色又是3種以上顏色的調(diào)和色。色彩可以有紅灰、黃灰、藍灰等上萬種彩色灰，這都是灰色調(diào)，而并不單指純正的灰色。
網(wǎng)站制作配色經(jīng)驗之淺灰色
【示例】明度淺灰色示例截圖10-24所示
分析
從頁面所呈現(xiàn)的明度色調(diào)來看，整個頁面偏淺灰色調(diào)，柔美高雅的灰調(diào)子。主色調(diào)及背景色是接近于明度白色且非常淺的灰調(diào)，輔色調(diào)的灰調(diào)子明度上較主色調(diào)稍深些，另輔色調(diào)為白色。
RGB模式顯示點睛色紅色R217及G9來看不是正紅色，在如此灰調(diào)子的頁面來看，如果不參考RGB模式肉眼幾乎看不出來。如果沒有點睛色的加入，整個頁面呈毫無生氣的灰色系，略有些臟的感覺，平淡且乏味，沒能使大家對它產(chǎn)生過多的印象。紅色的特性把以上的這些平淡的感受打破了讓人愿意細品灰色所帶來的悠長韻味。
HSB模式的B也能看出淺灰色在明度上較而，部分漸變的源灰色在頁面上所占用的面積也不少，另點睛色黑色的作用就是使明度色階跨度加深、明確，整個頁面呈現(xiàn)灰蒙蒙的感覺得以減弱。
【網(wǎng)站設(shè)計師點評】
從整體上看，該頁面看起來只有兩種色彩搭配，即非色彩系黑白灰和色彩系紅色，頁面顯得非常簡潔而含蓄。點睛色的加入減少了非色調(diào)淺灰色有可能產(chǎn)生的單調(diào)感覺。
網(wǎng)站制作色彩之同類灰
【示例】同類灰色頁面（灰色加橙色）示例截圖10-25
分析
該頁面主要以大面積的灰色系列為主，主色調(diào)為背景色非常純凈。部分灰色只在明度上加深了，增強灰色的空間感。
從RGB所呈現(xiàn)的均衡數(shù)值及HSB模式的HS都為。來看，主色調(diào)的淺灰色屬于非常純凈的非色彩，沒有摻雜其他色系進去。而輔色調(diào)的兩個模式上就有些差異，HSB模式的H顯示180。色相上偏青藍色，有及其微弱的飽和度，明度也較低。
點睛色的SB顯示為正橘紅色且飽和度和明度都/.Jioo%．應(yīng)該是及其耀眼的顏色，然而在大面積背景主色調(diào)下，此種耀眼的顏色得到緩解這正是與灰色配色后顯示出灰色最強烈的特性：削弱緩和刺激耀眼的顏色。點睛色橙色和白色點綴下打破了平面平淡的配色格局，眼前頓時亮的感覺。
【網(wǎng)站設(shè)計師點評】
灰色調(diào)非色彩所構(gòu)成的頁面頗具有獨特的魅力，整個頁面呈現(xiàn)出平穩(wěn)緩和的氣質(zhì)。兩個點睛色橙色和白色起到調(diào)動配色頁面的作用。
網(wǎng)站制作色彩搭配之同類色+多彩色
【示例】灰色搭配應(yīng)用（同類灰色+多種顏包）網(wǎng)頁示例截圖10-26所示
這是個灰色階變化較多的頁面，形成較有節(jié)奏塊面分明的韻律美感。這變化改善了灰色容易形成的呆板單調(diào)特性。
從HSB模式數(shù)值來看，主色調(diào)、輔色調(diào)都是非色彩的正灰色，沒有摻雜其他色彩進去。點睛色黃色、綠色H數(shù)值上顯示有些色相偏移都略向暖色色環(huán)靠攏，這兩種顏色的特性屬于較顯眼的顏色。另外．兩點睛色粉紅和粉藍色在色相上已經(jīng)較接近于正色系，明度較高飽和度降低，這4種顏色盡管所使用的面積非常少，但結(jié)合了面積上相對使用較多的非色彩白色，讓整個頁面配色雅致的同時不乏生動活躍。
【網(wǎng)站設(shè)計師點評】
不同灰色背景的變化，前景使用面積較少的純凈色點綴，這幾種顏色還同樣出現(xiàn)在右上角產(chǎn)生平衡色彩的呼應(yīng)作用，整個頁面產(chǎn)生雅致和諧的視覺美感。
網(wǎng)站制作色彩搭配經(jīng)驗灰色+對比色
【示例】灰色與對比色搭配網(wǎng)頁制作截圖10-27所示
從RGB和HSB模式上可看出主色調(diào)不是純正的非色系，里面摻雜了其他色彩，肉眼識別及H色相為32范圍上都能看出含有微弱的黃色調(diào)在里面，S13%、B46%分別顯示該種顏色含濃重的灰色，有少量的黃色加入結(jié)合整個頁面的配色是比較調(diào)和的搭配。輔色調(diào)則是運用了比較正的淺灰色。
點睛色主要是由組橙色、藍色對比色構(gòu)成，從雙方的H色相上也能看出來。RGB模式上看到這兩種顏色都或多或少地摻雜了其他的顏色在里面，所以明度純度上呈灰色階傾向。另點睛色淺黃色相上呈現(xiàn)正黃色，但由于明度非常高因此色彩呈不飽和狀態(tài)，盡管如此，在主色調(diào)灰色的背景下還是比較突出的。
【網(wǎng)站設(shè)計師點評】
該頁面依舊以灰色為主導(dǎo)位置，雖然主色調(diào)灰色少量摻雜了黃色，與頁面其他黃色色彩元素較統(tǒng)調(diào)和。點睛色主要是以兩對比色做主導(dǎo)，相對其他顏色飽和度較高且面積使用得不少，較響亮和突出產(chǎn)品目的。在主色調(diào)灰黃色特性掌控下卻也達到醒目又和諧的目的。
網(wǎng)站制作色彩搭配之灰色+青藍色
【示例】灰色搭配青藍色應(yīng)用網(wǎng)頁示倒截圖如圖10-28所示。
直觀看去能夠識別到源灰色主色調(diào)有青藍色傾向，從HSB模式上能夠看到色相為180。，該源灰色飽和度和明度都比較低。點睛色是淺青藍色，HSB模式H色相所呈現(xiàn)的色相與主色調(diào)的數(shù)值致，屬高明度低飽和度色系。
主色調(diào)是明度較低的源灰色，是屬于較沉一日的顏色；而點睛色是淺青藍色，在濼灰色的背景下略呈現(xiàn)有些暗淡，并沒有改善和帶來明快的感覺，輔助色是白色大面積的介入而因此使得整個頁面得到定的透亮緩解，這是該頁面至關(guān)重要的色。
【網(wǎng)站設(shè)計師點評】
該頁面用色不多，深灰、淺青藍、白，但合理地運用這3種顏色的配色角色，能使頁面煥發(fā)與眾不同的氣質(zhì)魅力。
網(wǎng)站制作色彩搭配之灰色+棕黃色
【示例】灰色搭配棕黃色應(yīng)用頁面示例圖10-29
主色調(diào)是由兩種明度較接近的灰色構(gòu)成。從RGB和HSB模式上能看到這兩種灰色屬于純正的非色彩，沒有其他的顏色摻雜進去。
輔助色為復(fù)色，我們知道復(fù)色是由兩種間邑或者原邑和間色混合產(chǎn)生，通常所混合產(chǎn)生的顏色色相不明顯，當某種顏色所占的比重大時該顏色的色相才相較突出。從H色相上看顏色稍偏黃色，由于混合其他顏色且明度較低，因此呈棕黃邑。復(fù)邑棕黃色在背景深灰的襯托下低調(diào)不張揚，能很好地與之融為一體。
點睛色H顯示120。是正綠色。該綠色選擇了明度適中純度不高的配色，既表達了主題，又能與整個頁面灰調(diào)子很好地調(diào)和在起。另一點睛色白色讓所有顏色的特性都得以很好地發(fā)揮，并起到拉開色階層次的作用。
【網(wǎng)站設(shè)計師點評】
深灰色具有謙虛、平凡、沉默、中庸、寂寞、憂郁、消極的心理感受。主色調(diào)主要集中在背景的運用和變化上，增強頁面的空曰感，視覺元素頗有時尚現(xiàn)代的氣息，與前景的色彩明度純度稍有變化，又在視覺上達到風格統(tǒng)。
網(wǎng)站制作色彩搭配之無彩色
【示例】灰色配色以無彩色搭配為工的應(yīng)用網(wǎng)頁示例截圖如圖10-30所示
整個頁面效果如同古老的黑白照。初看該頁面容易把背景的源灰色誤認為是黑色，再仔細觀看就感覺到了此種深灰色不凡的作用，假如背景色使用了黑色，頁面的主體人物和空間感的相互作用就變得僵硬且呆板。
從RGB和HSB模式上可知主色調(diào)深灰色為純正的非色彩，明度很低。但與人物的毛發(fā)對比就能看出它們明度之間的差異。輔助色取的是照片的膚色，也是純正的淺灰色，該人物占據(jù)了該頁面三分之的面積，主次鮮明。盡管點睛色是明度最高的白色，但是由于只在小文字上小面積地使用，因此只起到了點綴下頁面細節(jié)突顯主次關(guān)系的作用。
【網(wǎng)站設(shè)計師點評】
根據(jù)主色調(diào)、輔色調(diào)、點睛色所使用的面積比例來看，該頁的例子得到了很好的詮釋。由于該頁面是非色彩黑白灰構(gòu)成，頁面配色分析就變得簡單化了不少，因此在其他頁面實例中出現(xiàn)的主色調(diào)、輔色調(diào)、點睛色不同的色彩內(nèi)斂與張揚的特性在這里也就涉及不到了。
網(wǎng)站制作公司總結(jié)
以上灰色頁面配色示倒不難看出，部是非色彩系灰色為主色調(diào)點綴極少面積的色彩系，色彩運用的面積反差越大，頁面所呈現(xiàn)的獨特魅力也就越強烈?；疑奶匦栽谟谀馨汛碳ひ鄣念伾岷突@將是調(diào)和多個頁面配色的利器，但是也要注意不同明度灰色所起到的配色作用，不同明度的荻色搭配不同的彩度顏色時，所得到的結(jié)果差別很大，根據(jù)整體頁面配色應(yīng)在灰色明度上反復(fù)地調(diào)整。
灰色謙和內(nèi)斂的特性決定了不同明度的灰色扮演的是輔佐陪襯的角色?；疑鄬谏?、白色要多些變化，因為它能通過明度來表達不同的性格特征?；疑c其他彩度色彩搭配叫能降低張揚耀眼的蕊色，是調(diào)和色彩的方法之。兩種或兩種以上的色彩混合，如能配上灰色，這兩個色調(diào)本身必能相互調(diào)和。無彩度的黑白灰不同面積的使用，相對彩度色系來說是比較容易的蕊色搭配，且能包容所有的彩度顏色。好了，網(wǎng)站制作公司關(guān)于網(wǎng)頁灰色搭配設(shè)計效果的經(jīng)驗本文就分享到這里。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
