5 網頁設計配色應用例項剖析 紅色系

2021-04-11 19:07:55 字數 3811 閱讀 7799

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

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

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

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

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

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

一、朱紅色網頁例圖:

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

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

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

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

二、深紅色網頁例圖:

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

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

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

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

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

三、玫瑰紅色網頁例圖:

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

這個頁面主要由兩種不同明度、純度的玫瑰色調組成。兩色數值顯示,我們看到rgb數值中r呈現的數值最高,紅色特性較明顯。輔助色調的玫瑰色,加入少許 g,色調向冷色稍微偏移,也由於加入了g,在hsb數值裡,飽和度輕微減弱,但隨著明度增加,色彩趨於艷麗,符合突出前景的目的。

主色調雖然純度達到最高飽和,但由於明度降低,相對於輔色調較沉穩,適合做背景色。

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

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

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

四、明度粉紅色網頁例圖:

粉紅色主要是紅色系中的明度的高亮度的變化。是紅色系裡的冷色系。rgb數值顯示明度較高,因此hsb中s純度下降,幾乎呈最低值。

主色調和輔助色調數值對比可知:主色調混合的g的份量較多且明度較高,因此純度較低,色調柔和,在框架區域內較適合做類似背景色的輔助性崗位。輔助色r 數值比主色調的r數值稍高,紅色性稍明顯,加入的g相對少,b明度稍低,因此相對純度要高,輔色位置應用在框架區域的導航位置,起到突出導航作用。

點睛色突出標誌及購物主體的作用。

背景白色除了突出前面粉紅色主體的作用,在前景也有出現,背景色與前景色的相互牽制,減少空間距離的效果。

結論:rgb數值中,數值同時呈現相近的高數值時,色彩越柔和協調,純度相對降低,頁面呈高明度灰色段,視覺刺激緩慢。這裡以粉紅色為主色調的頁面,女性主題內容特徵傾向明顯。這組粉紅色頁面裡,由於純度都較低,任何乙個純度高小面積使用的顏色都能起到點睛的效果。

這類顏色的組合多用於女性主題,例如:化妝品、服裝等,鮮嫩而充滿**,傳達著柔情、嬌媚、溫柔、甜蜜、純真、**的心理感受。

五、對比色橙紅色應用網頁例圖:

嚴格上來說,橙色是藍色的對比色,這組對比色中的橙紅色傾向於紅色。

該頁面的背景色使用紋理圖形由深至淺的製造空間範圍, 模擬真實環境。這裡的數值選取其中間色值來分析,由於背景藍色b的明度較低,又由於冷色比暖色視覺傳遞速度慢的特點,很適合作為輔助角色突出前景的應用。 主色調橙紅色r的數值達到最高值255,sb都達到了最高值100%,視覺刺激非常強烈,運用大面積高純度來突出藍色產品主體物,又形成了一次頁面上的視覺對比--背景藍色與前景橙紅色,前景橙紅色與產品主體物藍色的二次對比。

點睛色白色,使這組對比色在頁面中表現得更協調,調和的作用。

結論:顏色的深淺除了能營造空間感的效果,也能輔助性的製造主次效果。顏色除了效能對比,面積對比、位置安排也是製造主次效果的關鍵。

這組橙色藍色對比色在網頁上比其他兩組對比色紅色綠色,黃色紫色應用得多,能迅速的傳達**主題內容、網頁主體,容易增添強烈的興奮度,多用於食品、休閒娛樂、產品等,但卻又是跨越於各行業的主題**,適用的範圍非常大。

六、紅色+黑色配色應用網頁例圖:

紅色與黑色的搭配在商業設計中,被譽為商業成功色,鮮亮的紅色多用於小面積的點綴色。

從數值上看,紅色新增了g和b飽和度稍降低,因此該紅色大面積使用不會覺得刺激或不舒服,這也與背景色藍色加入了適量漸變的技法,使得頁面的節奏呈現緩和。輔助色黑色的加入,與深紅色在明度拉大,頁面色彩元素相對活躍不少。

點睛色白色,所放的位置和面積,起到平衡黑色位置面積的作用,當然也達到醒目的效果。

結論:這裡顏色位置的擺放,起到平衡頁面視覺,突出主題效果。背景色加了漸變效果、整體與前景人物黑色對比呈淺色,前景人物黑色與背景深紅色、背景深紅與前景白色文字相互之間的關係,構成空間環境的視覺效果。

這組配色中,紅色是降低了明度的深紅色,為主色調和背景色的大面積使用。紅黑搭配色,常用於較前衛時尚、娛樂休閒、電子商務等等要求個性的網頁設計配色裡,也又有用於部分政治、新聞的頁面。

七、紅色+黑色+灰色配色應用網頁例圖:

這組配色,達到最高純度的紅色做小面積的使用。雖然這裡選取了紅色做為輔助色,但從整個頁面的功能和所表達的主題來看,紅色可以作為該頁面的點睛色,強烈的突出了主題。

紅色的數值顯示,hbs中的h為0度,達到紅色特性的最高值,s為最高飽和度100%,在明度最低的黑色背景的襯托下,其特性發揮到極致,頁面醒目而響亮。

紅色與黑色本是對比強烈的配色,但由於背景灰色的作用,緩和整個頁面的視覺刺激度。背景色灰色rgb數值變化不大,因此顏色純度較低、趨於平穩柔和,輔助前景內容的呈現。

白色讓前景和背景的劃分更明顯,活躍頁面中的色彩元素。

結論:使用面積小的純度高的顏色在非色彩的黑色和灰色上,是產生變化頁面的顏色,達到容易突出主題的目的。

本部分小節:

● 紅色在rgb數值的r為255左右,hsb數值的h中為0度左右,達到紅色最高值。隨著純度的提高、亮度的適度增加,它易於迅速的傳達、醒目性的特徵發揮得越明顯。和其他顏色一樣,顏色相互混合的越多,明度越低,飽和度越低,視覺衝擊力越弱。

● 顏色的對比:對比色紅色綠色的搭配,紅色的特性發揮得越明顯。綠葉襯紅花的效果。另外紅與黑的搭配,也較能展現紅色的魅力。

● 根據主題的需要,除了對比色的應用,還有面積上、位置上的對比應用,也能很好的配合達到突出主題產品主體物的目的。

網頁設計配色應用例項剖析 紫色系

網頁設計配色應用例項剖析 紫色系 1 紫色是一種在自然界中比較少見的顏色。象徵著女性化,代表著高貴和奢華 優雅與魅力,也象徵著神秘與莊重 神聖和浪漫。另一方面又有孤獨等意味。紫色在西方宗教世界中是一種代表尊貴的顏色,大主教身穿的教袍便採用了紫色。紫色的明度在有彩色的色度中是最低的。紫色的低明度給人一...

網頁設計配色應用例項剖析 黃色系

黃色是陽光的色彩,具有活潑與輕快的特點,給人十分年輕的感覺。象徵光明 希望 高貴 愉快。淺黃色表示柔弱,灰黃色表示病態。它的亮度最高,和其他顏色配合很活潑,有溫曖感,具有快樂 希望 聰明和輕快的個性,有希望與功名等象徵意義。黃色也代表著土地 象徵著權力,並且還具有神秘的宗教色彩。黃色的性格冷漠 高傲...

網頁設計配色應用例項剖析 綠色系

網頁設計配色系列 綠色系 綠色在黃色和藍色 冷暖 之間,屬於較中庸的顏色,這樣使得綠色的性格最為平和 安穩 大度 寬容。是一種柔順 恬靜 滿足 優美 受歡迎之色。也是網頁中使用最為廣泛的顏色之一。綠色與人類息息相關,是永恆的欣欣向榮是的自然之色,代表了生命與希望,也充滿了青春活力,綠色象徵著和平與安...