義烏網(wǎng)頁設(shè)計(jì)中的灰色調(diào)配色技巧

2012-07-06 瀏覽:150

灰色介于黑色和白色之間,中性色、中等明度、無色彩、極低色彩的顏色。灰色能夠吸收其他色彩的活力,削弱色彩的對(duì)立面,而制造出融合的作用。

  灰色是一種中立色,具有中庸、平凡、溫和、謙讓、中立和高雅的心理感受,也被稱為高級(jí)灰,是經(jīng)久不衰、最經(jīng)看的顏色。

  任何色彩加入灰色都能顯得含蓄而柔和。但是灰色在給人高品味、含蓄、精致、雅致耐人尋味的同時(shí),也容易給人頹廢、蒼涼、消極、沮喪、沉悶的感受,如果搭配不好頁面容易顯得灰暗、臟。

  從色彩學(xué)上來說,灰色調(diào)又泛指所有含灰色度的復(fù)合色,而復(fù)合色又是三種以上顏色的調(diào)和色。色彩可以有紅灰、黃灰、藍(lán)灰等上萬種彩色灰,這都是灰色調(diào),而并不單指純正的灰色。
  
  下面我們根據(jù)灰色搭配不同的顏色所表現(xiàn)出的視覺特性,做一些不同的舉例分析。
  
  → 灰色網(wǎng)頁(明度淺灰色)例圖:
  
  
  灰色系分析:(明度淺灰色)
  從頁面所呈現(xiàn)的明度色調(diào)來看,整個(gè)頁面偏淺灰色調(diào),柔美高雅的灰調(diào)子。
  主色調(diào)及背景色是接近于明度白色且非常淺的灰調(diào),輔色調(diào)的灰調(diào)子明度上較主色調(diào)稍深些,另一輔色調(diào)為白色。
  RGB模式顯示點(diǎn)睛色紅色R217及G9來看不是正紅色,在如此灰調(diào)子的頁面來看,如果不參考RGB模式肉眼幾乎看不出來。如果沒有點(diǎn)睛色的加入整個(gè)頁面呈毫無生氣的灰色系,略有些臟的感覺,平淡且乏味,沒能使大家對(duì)它產(chǎn)生過多的印象。紅色的特性把以上的這些平淡的感受打破了,讓人愿意細(xì)品灰色所帶來的悠長(zhǎng)韻味。
  HSB模式的B也能看出淺灰色在明度上較高,部分漸變的深灰色在頁面上所占用的面積也不少,另一點(diǎn)睛色黑色的作用就是使明度色階跨度加深、明確,整個(gè)頁面呈現(xiàn)灰蒙蒙的感覺得以減弱。
  
  結(jié)論:
  該頁面整個(gè)看起來也可以說只有兩種色彩搭配,即非色彩系黑白灰和色彩系紅色,頁面顯得非常簡(jiǎn)潔而含蓄。點(diǎn)睛色的加入減少了非色調(diào)淺灰色有可能產(chǎn)生的單調(diào)感覺。


  → 灰色網(wǎng)頁(同類灰色系:灰色+橙色)例圖:
  
  
  灰色系分析:(同類灰色系:灰色+橙色)
  該頁面主要以大面積的灰色系列為主,主色調(diào)為背景色非常明確。部分灰色只在明度上加深了,增強(qiáng)灰色的空間感。
  從RGB所呈現(xiàn)的均衡數(shù)值及HSB模式的HS都為零來看,主色調(diào)的淺灰色屬于非常純凈的非色彩,沒有摻雜其他色系進(jìn)去。而輔色調(diào)的兩個(gè)模式上就有些差異,HSB模式的H顯示180度色相上偏青藍(lán)色,有及其微弱的飽和度,明度也較低。點(diǎn)睛色壬獺SB顯示為正桔紅色且飽和度和明度都為100%,應(yīng)該是及其耀眼的顏色,然而在大面積背景主色調(diào)下,此種耀眼的顏色得到緩解,這正是與灰色的配色后顯示出灰色最強(qiáng)烈的特性--削弱緩和刺激耀眼的顏色。
  點(diǎn)睛色橙色和白色點(diǎn)綴下打破了平面平淡的配色格局,眼前頓時(shí)一亮的感覺。
  
  結(jié)論:
  灰色調(diào)非色彩所構(gòu)成的頁面頗具有獨(dú)特的魅力,整個(gè)頁面呈現(xiàn)出平穩(wěn)緩和的氣質(zhì)。兩個(gè)點(diǎn)睛色橙色和白色起到調(diào)動(dòng)配色頁面的作用。


   → 灰色應(yīng)用(同類灰色+多種顏色)網(wǎng)頁例圖:
  
  
  
  灰色系分析:(同類灰色+多種顏色)
  這是一個(gè)灰色階變化較多的頁面,形成較有節(jié)奏塊面分明的韻律美感。這一變化改善了灰色容易形成的呆板單調(diào)特性。
  從HSB模式數(shù)值來看,主色調(diào)輔色調(diào)都是非色彩的正灰色,沒有摻雜其他色彩進(jìn)去。點(diǎn)睛色黃色、綠色H數(shù)值上顯示有些色相偏移都略向暖色色環(huán)靠攏,這兩顏色的特性是屬于較顯眼的顏色。另外兩點(diǎn)睛色粉紅和粉藍(lán)色在色相上已經(jīng)較接近于正色系,明度較高飽和度降低。這四種顏色盡管所使用的面積非常少,但結(jié)合了面積上相對(duì)使用較多的非色彩白色,讓整個(gè)頁面配色雅致的同時(shí)不乏生動(dòng)活躍。
  
  結(jié)論:
  不同灰色背景的變化,前景使用面積較少的純凈色點(diǎn)綴,這幾種顏色還同樣出現(xiàn)在右上角產(chǎn)生平衡色彩的呼應(yīng)作用,整個(gè)頁面產(chǎn)生雅致和諧的視覺美感。


 → 灰色配色(灰色+對(duì)比色)網(wǎng)頁例圖:
  
  
  灰色系分析:(灰色+對(duì)比色)
  從RGB和HSB模式上可看出主色調(diào)不是純正的非色系,里面摻雜了其他色彩,肉眼識(shí)別及H色相為32范圍上都能看出含有微弱的黃色調(diào)在里面,S13%B46%分別顯示該種顏色含濃重的灰色,有少量的黃色加入結(jié)合整個(gè)頁面的配色是比較調(diào)和的搭配。輔色調(diào)則是運(yùn)用了比較正的淺灰色。
  點(diǎn)睛色主要是一組橙色、藍(lán)色對(duì)比色構(gòu)成,從雙方的H色相上也能看出來。RGB模式上看到這兩種顏色都或多或少的摻雜了其他的顏色在里面,所以明度純度上呈灰色階傾向。另一點(diǎn)睛色淺黃色相上呈現(xiàn)正黃色,但由于明度非常高因此色彩呈不飽和狀態(tài),盡管如此在主色調(diào)灰色的背景下還是比較突出的。
  
  結(jié)論:
  該頁面依舊以灰色為主導(dǎo)位置,雖然主色調(diào)灰色少量摻雜了黃色,與頁面其他黃色色彩元素較統(tǒng)一調(diào)和。點(diǎn)睛色主要是以兩對(duì)比色做主導(dǎo),相對(duì)其他顏色飽和度較高且面積使用得不少,較響亮和突出產(chǎn)品目的。在

上一條: 義烏網(wǎng)站設(shè)計(jì)中如何進(jìn)行合理的頁面布局
下一條: 義烏網(wǎng)頁設(shè)計(jì)中的css布局要點(diǎn)

新聞資訊

相關(guān)資訊