设计之家 > 教程 > 網頁教程 > 網頁配色 >

網頁設計配色應用實例之綠色系(2)

作者:黎芳 來源:天極Yesky 時間:2007-09-29

 

   → 同類綠色+多種點睛色例圖 :http://www. girlshop.com


  綠色系分析:(綠色配色:同類綠色+多種點睛色)
  主要色調HSB模式H數值顯示75度,依舊是色輪表里傾向于黃色區域方位邊緣的綠色,呈現出的黃綠色調。輔色調在明度上有些提亮,與主色調形成較強的對比。
  點睛色里所使用的對比色組合有兩組,紅色與綠色,藍色與橙黃色,其中黃色是介于暖色(橙黃、紅色)和冷色(綠色、藍色)的過渡色也是調和色。

  結論:
  通過上面的分析大家可以看到,該網頁的配色不少,而且還有兩組對比色在內,但是頁面配色也很協調。原因之一,從下面抽取的色塊可以看出來,是一個過渡柔和的色輪表:以黃色為中界一邊是較淺的黃綠到綠色再到藍色,另一邊是橙黃再到紅色。原因之二,點睛色畢竟是扮演著點睛色的角色,有主色調和輔色調大面積的控制,即便再多些點睛色也不至于很快干擾到頁面的整體配色。
  整個頁面保證了協調、不凌亂的步調,但是又能把商業網站的熱鬧氛圍體現得很好的渲染。此種配色方法值得我們學習借鑒。

  → 綠色鄰近色應用網頁例圖 :http://www. codcefngwlad.org.uk


  綠色系分析:(鄰近色配色:綠色+藍色)
  全頁使用的主要色調基本上是屬于明度較高飽和度較低的顏色,其中還使用了漸變色緩和的過渡,因此頁面看起來舒服協調。
  主色調是飽和度較高的翠綠色運用于背景色,幾乎是調節于整個頁面的關鍵色。如果沒有這一背景色塊,整個頁面容易發灰。還有右邊的粉綠大塊面積稍多,有些灰的感覺,好在前景的文章使用了色度明度稍深的藍色壓住,稍顯好些,關鍵還是有白色的箭頭很好的把粉綠和藍色文字的色階拉開了距離。左邊的照片清晰且純度較高也對整個頁面配色起到一定的調節作用。
  點睛色主要是標志的顏色,如果可以忽略不計,頁面配色更趨于平淡。

  結論:
  明度較高飽和度較低的顏色,如果沒有明度較深飽和度較高的顏色進行勾勒或者點綴,這個頁面配色看起來容易發灰。

  → 綠色對比色網頁例圖:http://www. fitintercambio.com.br


  綠色系分析:(對比色配色:綠色+紅色)
  主色調是有點黃色傾向的綠色,從HSB數值上可以看到H為98度,綠色特性較明顯了。
  輔助色則是三個淺色系,起到調和整個頁面色彩的作用。粉紅和粉綠色分別取的是頁面綠色紅色通過提高明度而得,因此整個頁面色彩前后呼應、配色調和。
  點睛色紅色的HBS模式H數值351度,在色輪表上偏向于紫色方位,因此傾向于冷紅色,色度上稍有些刺目和艷麗。
  主色調綠色和點睛色紅色所放置的位置,讓頁面導航區域和內容區域視覺引導較為分明:主色調綠色的設計亮點既用于導航又很流暢自然的融合到背景,渾然一體;這里尤其是點睛色紅色放置于背景的處理很獨到,烘托突出于前景內容,在眾多網頁設計中并不多見。

  結論:
  整個頁面的配色取色于標志色,量身定做的感覺。
  適當的運用對比色有強調的感覺,但頁面配色處理上并不強烈、耀眼,因為使用了白色及其相應的提高明度的粉色做視覺的緩和處理。

  本部分小節:
  ● 綠色是緩和健康的顏色, HSB數值H色相為120度時是正綠色。大家通過以上的網頁實例可以看到,偏向于黃色方位的綠色運用得最多,也就更受到大眾的歡迎。純正的正綠色在視覺感受上可能稍微顯得有些色度較低的生硬,配色難度稍大。不同的黃綠色飽和度、明度的不同變化可以表達不同主題的頁面效果。
  ● 點睛色可以是幾種,也可以是不同對比色的組合,有的起到豐富并活躍頁面配色的視覺節奏,有的起到調和整體頁面配色的作用。
  輔助色通常是同類色系或者鄰近色系,起到輔助并烘托主色調的作用。輔色調和主色調分別在不同的頁面做為唯一高純度色的時候,能夠起到挽救于整個頁面發灰的作用。
  ● 當整個頁面配色明度太高色度降低時候,頁面容易呈現發灰的感覺,可以適當的使用少許純度較高或者明度較低的色系來加以改善。

推薦設計

最新文章