DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver入門 >> 網頁設計配色應用實例:紅色系剖析
網頁設計配色應用實例:紅色系剖析
編輯:Dreamweaver入門     

   在網頁顏色的應用機率中,根據網頁主題內容的需求,純粹使用紅色為主色調的網站相對較少,多用於輔助色、點睛色,達到陪襯、醒目的效果。通常都配以其他顏色調和。本文對網頁設計配色應用實例 進行了具體闡述供閱讀。

  紅色的色感溫暖,性格剛烈而外向,是一種對人刺激性很強的顏色。紅色容易引起人的注意,也容易使人興奮、激動、緊張、沖動、還是一種容易造成人視覺疲勞的顏色。

  在眾多顏色裡,紅色是最鮮明生動的、最熱烈的顏色。因此紅色也是代表熱情的情感之色。鮮明紅色極容易吸引人們的目光。

  紅色在不同的明度、純度的狀態(粉紅、鮮紅、深紅)裡,給人表達的情感是不一樣的。

  在網頁顏色的應用機率中,根據網頁主題內容的需求,純粹使用紅色為主色調的網站相對較少,多用於輔助色、點睛色,達到陪襯、醒目的效果。通常都配以其他顏色調和。

  紅色相對於其他顏色,視覺傳遞速度最快。由於以上的這些紅色傳達出的特性,因此人們喜歡用紅色作為警示符號的顏色,例如:消防、驚歎號、錯誤提示等等。

  為了讓大家對紅色的理解做更好的區別,下面我們分別對紅色系根據鄰近色、同類色、對比色的搭配做不同的舉例分析。

  1,朱紅色在紅色系裡傾向黃色方向,是大紅色加入黃色而得。在色環表中,純紅色在HSB裡為0度,往360度方向呈現的是冷紅色系,0度方向為黃色系。

  整個頁面裡,主色調朱紅色面積非常大、確定明顯,輔助色主要由黑色、深紅構成,(數值上選取的是深紅色做標示)。主色調的R呈現出255最高數值,S中100%,充分標明了紅色最高特性。輔助色的深紅R為222,B87%,顯示其充當輔助角色的這一特性。

  結論:

  背景色朱紅由於紅色特性明顯,飽和度、明度都非常的高,這裡運用了輔助色深紅、黑色壓住並牽制朱紅色搶眼的個性,也同樣能達到突出前景主要圖片內容的目的。點睛色主要用於標志的突出上,其他導航文字、圖片的部分運用等,調和並達到了不至於使得整個頁面刺激中又透出的沉悶感。

  這類顏色的組合比較容易使人提升興奮度,紅色特性明顯,這一醒目的特殊屬性,比較被廣泛的應用於食品、時尚休閒等等類型的網站

  2,深紅色在原有的紅色基礎上降低了明度而得,是紅色系中的明度變化。通過上圖的數值顯示看出明度較低。

  這類顏色的組合隨著明度的變暗,比較容易制造深邃、幽怨的故事氣氛。傳達的是穩重、成熟、高貴、消極的心理感受。

  這個頁面背景色運用了紋樣,是以目前選取的主色調顏色和明度較暗的深紅色結合而的,使得明度稍暗。

  數值上看,主色調也就是背景色的飽和度較高,但是由於降低了明度,顏色變得較沉穩。輔助色RGB添加了適量的其他顏色,G和B數值區別不大,因此飽和度降低,顏色趨於柔和穩定。點睛色的加入提亮,頁面視覺效果強化。

  結論

  前景色通常要較明顯的區別於背景色,達到台前的宣傳目的。當飽和度較低的前景色與背景色變化不明顯時形成的是另外一種柔和統一的效果

  3,玫瑰紅色在色環上實際已經接近冷色,是紅色系中的色相的微妙變化,是紅色系裡的冷色系。我們在HSB中H數值可看出,0度為紅色的最高值,越接近0度數值紅色特性越明顯,否則逐漸冷色傾斜,而該數值偏離0度稍遠。

  這個頁面主要由兩種不同明度、純度的玫瑰色調組成。兩色數值顯示,我們看到RGB數值中R呈現的數值最高,紅色特性較明顯。輔助色調的玫瑰色,加入少許G,色調向冷色稍微偏移,也由於加入了G,在HSB數值裡,飽和度輕微減弱,但隨著明度增加,色彩趨於艷麗,符合突出前景的目的。主色調雖然純度達到最高飽和,但由於明度降低,相對於輔色調較沉穩,適合做背景色。

  數值上看,由於背景色和前景色的明度較為接近,加入白色邊框,強烈了前景色於背景色的區分,加強視覺強化效果。

  結論:

  背景色和前景色的明度較接近,顏色給人的視覺表象較悶,加入少量白色劃分使得色彩引導的主次塊面更分明,頁面明快許多。

  這類顏色的組合多用於女性主題,例如:化妝品、服裝等,容易營造出嬌媚、誘惑、艷麗等氣氛

  小編為大家編輯的網頁設計配色應用實例 希望對大家有所幫助!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved