綠色資源網:您身邊最放心的安全下載站! 最新軟件|熱門排行|軟件分類|軟件專題|論壇轉帖|廠商大全

技術教程
您的位置:首頁網頁設計HTML/CSS → 網頁設計配色應用教程之各種色彩對比分析

網頁設計配色應用教程之各種色彩對比分析

我要評論2021/4/30 17:45:03來源:綠色資源網編輯:佚名 [ ] 評論:1 點擊:0次

  網頁頁面中總是由具有某種內在聯系的各種色彩,組成一個完整統一的整體,形成畫面色彩總的趨向,稱為色調。也可以理解為色彩狀態。色彩給人的感覺與氛圍,是影響配色視覺效果的決定因素。

  為了使網頁的整體畫面呈現穩定協調的感覺,以便充分的掌握其規律來更好的分析學習,上次我們介紹了視覺角色主次位置的幾個概念,本節我們介紹色彩的對比。
  
  
對比與調和就是形式美的變化與統一規律

  在一定條件下,不同色彩之間的對比會有不同的效果。在不同的環境下,多色彩給人一種印象,色彩單一給人另一種印象。
  各種純色的對比會產生鮮明的色彩效果,很容易給人帶來視覺與心理的滿足。紅、黃、藍三種顏色是最極端的色彩,它們之間對比,哪一種顏色也無法影響對方。
  很多朋友都以為色彩對比主要是紅綠、橙藍、黃紫色的對比,實際色彩對比范疇不局限于這些。是指各種色彩的界面構成中的面積、形狀、位置以及色相、明度、純度之間的差別,使網頁色彩配合增添了許多變化、頁面更加豐富多彩。
  
  色彩的對比規律大致有以下幾點:
  
  ■ 色相對比

  是指因色相之間的差別形成的對比。當主色相確定后,必須考慮其他色彩與主色相是什么關系,要表現什么內容及效果等,這樣才能增強其表現力。不同色相對比取得的效果有所不同,兩色越接近,對比效果越柔和。越接近補色,對比效果越強烈。
  
  
  → 色相對比網頁例圖:http://www.portfolios.com

 

網頁設計配色應用教程之各種色彩對比分析
色相對比網頁例圖

  
  色相對比分析:
  主要是以綠色與藍色之間的色相對比。從HSB數值上可看出嫩綠色的S純度高B亮度也很高,因此艷麗的顏色作為背景與前景純度稍低的墨綠和轱藍色形成色相之間的對比。前景的墨綠雖然純度達到最高值100%,比主色調高不少,但是因為亮度低,因此色彩顯示沒有主色調明艷。
  結論:
  該頁面色相的對比,主要作用于前景與背景的對比、局部與整體的對比。
  
  
  
  ■ 明度對比
  
  明度對比可分為:彩色差的明度對比及非彩色差的明度對比
  
  是指色彩之間明暗程度的差別而形成的對比。是頁面形成恰當的黑、白、灰效果的主要手段。明度對比在視覺上對色彩層次和空間關系影響較大。例如檸檬黃明度高,藍紫色的明度低,橙色和綠色屬中明度,紅色與藍色屬中低明度。


 

網頁設計配色應用教程之各種色彩對比分析
明度對比網頁例圖



  明度對比分析:
(非彩色差)
  嚴格來說,該頁面應該是黑白灰色非色彩構成,攝影圖片中的人物衣服為灰色,相對單純的黑白對比柔和舒適于視覺。能使頁面顯得更單純、統一,形成另一道獨特的風景。

  ■ 純度對比
  是指不同色彩之間純度的差別而形成的對比。色彩純度可大致分為高純度、中純度、低純度三種。未經調和過的原色純度是最高的,而間色多屬中純度的色彩,復色其本身純度偏低而屬低純度的色彩范圍。純度的對比會使色彩的效果更明確肯定。

  → 純度對比網頁例圖:http:// www.havaianas.com

 

網頁設計配色應用教程之各種色彩對比分析(2)
純度對比網頁例圖



  純度對比分析:


  整個頁面看起來異常艷麗刺激然而又非常的協調。以上數值主要選取了幾種較有代表性的顏色。
  大家注意看,以上色彩除了粉紅色,其他幾組顏色都是高飽和度高亮度的顏色,因此充分的發揮出了色彩的艷麗程度。包括粉紅色在內的幾種灰色階,在中間起到了和諧作用。白色能拉開相近色階的空間及明快頁面的作用,在這里可以說是功不可沒。

  結論:
  頁面實際上用了不少顏色,配色大膽。抓住顏色主次冷暖的安排,適度再加上和諧的過渡色灰色,實現了作者對該頁面的輕松配色。從多種高純度的搭配協調能力上看,足可見作者對色彩設計搭配不一般的功底。
  這類網頁配色非常能夠體現出一個網站頁面產品個性,配色難度大。讓人過目難忘。

  ■ 補色對比
  將紅與綠、黃與紫、藍與橙等具有補色關系的色彩彼此并置,使色彩感覺更為鮮明,純度增加,稱為補色對比。

    → 補色對比網頁例圖:
http:// www.forthosewholovelife.co.uk

 

網頁設計配色應用教程之各種色彩對比分析(2)
補色對比網頁例圖



  補色對比分析:

  由冷色系的綠色、藍色組成大背景環境,純度較低。前景主要是突出產品、文字信息內容的大紅色形成補色對比效果,RGB的R255數值與HSB是H為零,數值顯示非常明確,標準的大紅色。純度亮度非常高,達到最高值,加之白色的勾邊,使得紅色更為凸顯,更易于視覺對信息的迅速捕捉。

  結論:

  對比色的合理搭配,能拉開前景與背景的空間感,突出頁面主體物。尤其是紅色在主體物的運用,能迅速傳遞視覺的效果。
 

  ■ 冷暖對比
  是指不同色彩之間的冷暖差別形成的對比。色彩分為冷、暖兩大色系,以紅、橙、黃為暖色體系,藍、綠、紫則代表著冷色系,兩者基本上互為補色關系。另外,色彩的冷暖對比還受明度與純度的影響,白光反射高而感覺冷,黑色吸收率高而感覺暖。

    → 冷暖對比網頁例圖:
http://disney.go.com

網頁設計配色應用教程之各種色彩對比分析(3)
冷暖對比網頁例圖



  冷暖對比分析:

  以上這幾組顏色乍一看感覺鮮艷程度都差不多,但是通過觀察它們的數值發現飽和度都有相差,然而明度相近,因此它們給人造成的視覺感受幾乎是相同的。該頁面冷暖顏色較為豐富,橙和藍是對比最強烈的補色,其次是傾向不夠明顯的補色黃、紫。明度不同的兩個綠色起到了冷暖視覺的過渡作用。主色調的淺藍色亮度較高,讓頁面不易給人沉悶的感覺。

  結論:
  冷暖對比的應用,通常在休閑娛樂網站、食品網站出現比較多。
  
  將這兩個色系的色彩安排在同一畫面時,其對比效果極為強烈。通常初學者較容易使兩色相互排斥,導致畫面色調不諧調。一般我們采用兩種調和的方法。

  純度調整
  降低冷暖兩色純度。用明度黑、白、灰變化來調整畫面的層次、直接使用黑、白、灰色系進入畫面搭配,或者加入補色的諧調,也都能很好的起到協調的效果。
  

    → 純度調整網頁例圖:http:// www.darkelephant.com  

 

網頁設計配色應用教程之各種色彩對比分析(3)
純度調整網頁例圖



  純度調整分析:

  主色調的橙色,添入了少許黑色做漸變背景色,降低了純度。輔助色的藍色是橙色的補色,主要起的是使得整個頁面過多的暖色降低協調于整體的效果,及背景色的棕色都分別提暗降低純度。而左上角的黃色則通過提高了亮度來降低純度。一個頁面里應有少量純度較高的顏色而不至于使整個頁面過于壓抑,

關鍵詞:網頁設計

閱讀本文后您有什么感想? 已有 人給出評價!

  • 0 歡迎喜歡
  • 0 白癡
  • 0 拜托
  • 0 哇
  • 0 加油
  • 0 鄙視
被男人吃奶很爽的毛片,狠狠色噜狠狠狠狠的777米奇,9420高清完整版在线观看,榴莲app下载汅api未满入内
<蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>