網(wǎng)站制作色彩搭配之紅色頁面配色
紅色的色感溫暖,性格剛烈而外向,是種對(duì)人刺激性很強(qiáng)的顏色。紅色容易引起人的注意,也容易使人興奮、激動(dòng)、緊張、沖動(dòng),還是一種容易造成人視覺疲勞的顏色。在眾多顏色里,紅色是最鮮明生動(dòng)的、最熱烈的顏色。因此紅色也是代表熱情的情感之色。鮮明紅色極容易吸引人們的目光。
紅色在不同的明度、純度的狀態(tài)(粉紅、鮮紅、源紅)里,給人表達(dá)的情感是不樣的。在網(wǎng)頁顏色的應(yīng)用幾率中,根據(jù)網(wǎng)頁主題內(nèi)容的需求,純粹使用紅色為主色調(diào)的網(wǎng)站相對(duì)較少,多用于輔助色、點(diǎn)睛色,達(dá)到陪襯、醒目的效果。通常都配以其他顏色調(diào)和。紅色相對(duì)于其他顏色,視覺傳遞速度最快。由于以上的這些紅色傳達(dá)出的特性,因此人們喜歡用紅色作為警示符號(hào)的顏色,例如消防、驚嘆號(hào)、錯(cuò)誤提示等。深圳網(wǎng)站制作公司根據(jù)以上紅色的特性,整理歸納出以下七種網(wǎng)頁紅色頁面搭配技巧。
1.網(wǎng)站制作色彩搭配之朱紅色
【示例】朱紅色網(wǎng)頁配色設(shè)計(jì)效果示意圖10-73
分析

朱紅色在紅色系里傾向黃色方向,是大紅色加入黃色而得。在色環(huán)表中,純紅色在HSB里為。度,往360度方向呈現(xiàn)的是冷紅色系0度方向?yàn)辄S色系。
主色調(diào)朱紅色面積非常大、確定明顯,輔助色主要由黑色、深紅構(gòu)成(數(shù)值上選取的是深紅色做標(biāo)示)。主色調(diào)的R呈現(xiàn)出255最高數(shù)值S 100%,充分標(biāo)明了紅色最高特性。輔助色的深紅R為222,B87%,顯示其充當(dāng)輔助角色的這特性。
【網(wǎng)站設(shè)計(jì)師點(diǎn)評(píng)】
背景色朱紅由于紅色特性明顯,飽和度、明度都非常的高,這里運(yùn)用了輔助色深紅、黑色壓住并牽制朱紅色搶眼的個(gè)性,也同樣能達(dá)到突出前景主要圖片內(nèi)容的目的。點(diǎn)睛色主要用于標(biāo)志的突出上,其他導(dǎo)航文字、圖片的部分運(yùn)用等,調(diào)和并達(dá)到了不至于使得整個(gè)頁面刺激中又透出的沉悶感。
這類顏色的組合比較容易使人提升興奮度,紅色特性明顯,這醒目的特殊屬性,比較被廣泛地應(yīng)用于食品、時(shí)尚休閑等類型的網(wǎng)站。
2.網(wǎng)站制作頁面配色之深紅色
【示例】深紅色網(wǎng)頁配色設(shè)計(jì)效果示意圖10-74
分析

深紅色在原有的紅色基礎(chǔ)上降低了明度而得,是紅色系中的明度變化。通過圖10-74的數(shù)值顯示看出明度較低。這類顏色的組合隨著明度的變暗,比較容易制造椿遺、幽怨的故事氣氛。傳達(dá)的是穩(wěn)重、成熟、鬲貴、消極的心理感受。整個(gè)頁面背景色運(yùn)用了紋樣,足以目前選取的主色調(diào)顏色和明度較曙的深紅色結(jié)合而成的,使得明度稍暗。
從數(shù)值上看,主色調(diào)也就是背景色的飽和度較高,但是由刊聾低了明度,顏色變得較沉穩(wěn)。輔助色RGB添加了適量的其他顏色,G和B數(shù)值區(qū)別不大,因此飽和度降低,顏色趨于柔和穩(wěn)定。點(diǎn)睛色的加入提亮,頁面視覺效果強(qiáng)化。
【網(wǎng)站設(shè)計(jì)師點(diǎn)評(píng)】
前景色通常要較明顯地區(qū)別于背景色,達(dá)到臺(tái)前的宣傳目的。當(dāng)飽和度較低的前景色與背景色變化不明顯時(shí)形成的是另外種柔和統(tǒng)的效果。
3.網(wǎng)站制作頁面配色之玫瑰紅色
【示例】玫瑰紅色網(wǎng)頁配色設(shè)計(jì)效果示意圖10-75
分析
玫瑰紅色在色環(huán)上實(shí)際已經(jīng)接近玲色,是紅色系中的色相的微妙變化,是紅色系里的冷色系。在HSB中H數(shù)值可以看出,O度為紅色的最高值,越接近。度數(shù)值紅色特性越明顯,否則逐漸冷色傾斜,而該數(shù)值偏離0度稍遠(yuǎn)。
整個(gè)頁面主要由兩種不同明度、純度的玫瑰色調(diào)組成。兩色數(shù)值顯示RGB數(shù)值中R呈現(xiàn)的數(shù)值最高,紅色特性較明顯。輔助色調(diào)的玫瑰色,加入少許G色調(diào)同冷色稍微偏移,也由于加入了G,在HSB數(shù)值中,飽和度輕微減弱,但隨著明度增加色彩趨于艷麗,符合突出前景的目的。主色調(diào)雖然純度達(dá)到最高飽和,但由于明度降低,相對(duì)于輔色調(diào)較沉穩(wěn),適合做背景色。從數(shù)值上看,由于背景色和前景色的明度較為接近,加入白色邊框,強(qiáng)烈了前景色與背景色的區(qū)分,加強(qiáng)視覺強(qiáng)化效果。
【網(wǎng)站設(shè)計(jì)師點(diǎn)評(píng)】
背景色和前景色的明度較接近,顏色給人的視覺表象較悶,加入少量白色劃分使得色彩引導(dǎo)的主次塊面更分明,頁面明快許多。這類顏色的組合多用于女性主題,例如化妝品、服裝等,容易營造出嬌媚、誘惑、艷麗等氣氛。
4.網(wǎng)站制作頁面配色之粉紅色
【示例】明度粉紅色網(wǎng)頁配色設(shè)計(jì)效果示意圖10-76
分析
粉紅色主要是紅色系中的明度的高亮度的變化。是紅色系里的冷色系。RGB數(shù)值顯示明度較高,因此HSB中S純度下降,幾乎呈最低值。
主色調(diào)和輔助色調(diào)數(shù)值對(duì)比可知:主色調(diào)混合的G的分量較多且明度較高,因此純度較低,色調(diào)柔和,在框架區(qū)域內(nèi)較適合做類似背景色的輔助性崗位。輔助色R數(shù)值比主色調(diào)1的R數(shù)值稍面,紅色性稍明顯,加入的G相對(duì)少,B明度稍低,因此相對(duì)純度要面,輔色位置應(yīng)用在框架區(qū)域的導(dǎo)航位置,起到突出導(dǎo)航作用。點(diǎn)睛色突出標(biāo)志及購物主體的作用。
背景白色除了突出前面粉紅色主體的作用,在前景也有出現(xiàn),背景色與前景色的相互牽制,減少空間距離的效果。
【網(wǎng)站設(shè)計(jì)師點(diǎn)評(píng)】
在RGB數(shù)值中,數(shù)值同叫呈現(xiàn)相近的而數(shù)值B,色彩越柔和協(xié)調(diào),純度相對(duì)降低,頁面呈高明度灰色段,視覺刺激緩^曼。這里以粉紅色為主色調(diào)的頁面,女性主題內(nèi)容特征傾同明顯。這組粉紅色頁面里,由于純度都較低,任何個(gè)純度高小面積使用的顏色都能起到點(diǎn)睛的效果。
這類顏色的組合多用于女性主題,例如化妝品、服裝等,鮮嫩而充滿誘惑,傳達(dá)著柔情、嬌媚、溫柔、甜蜜、純真、誘惑的心理感受。
5.網(wǎng)站制作配色之橙紅色+藍(lán)色
【示例】橙紅色+藍(lán)色網(wǎng)頁配色設(shè)計(jì)效果示意圖10-77
分析
橙色是藍(lán)色的對(duì)比色,這組對(duì)比色中的橙紅色傾向于紅色,該頁面的背景色使用紋理圖形由深至淺的制造空間范圍,模擬真實(shí)環(huán)境。這里的數(shù)值選取其中間色值來分析,由于背景藍(lán)色B的明度較低,又由于冷色比暖色視覺傳遞速度慢的特點(diǎn),很適合作為輔助角色突出前景的應(yīng)用。
主色調(diào)橙紅色R的數(shù)值達(dá)到最高值255,SB都達(dá)到了最高值100%,視覺刺激非常強(qiáng)烈,運(yùn)用大面積高純度來突出藍(lán)色產(chǎn)品主體物,又形成了次頁面上的視覺對(duì)比背景藍(lán)色與前景橙紅色,前景橙紅色與產(chǎn)品主體物藍(lán)色的二次對(duì)比。點(diǎn)睛色白色,使這組對(duì)比色在頁面中表現(xiàn)得更協(xié)調(diào)。
【網(wǎng)站設(shè)計(jì)師點(diǎn)評(píng)】
這組橙色藍(lán)色對(duì)比色在網(wǎng)頁上比其他兩組對(duì)比色紅色綠色、黃色紫色應(yīng)用得多,能迅速地傳達(dá)網(wǎng)站主題內(nèi)容、網(wǎng)頁主體,容易增添強(qiáng)烈的興奮度,多用于食品、休閑娛樂、產(chǎn)品等,但卻又是跨越于各行業(yè)的主題網(wǎng)站,適用的范圍非常大。顏色的深淺除了能營造空間感的效果,也能輔助性地制造主次效果。顏色除了性能對(duì)比,面積對(duì)比、位置安排也是制造主次效果的關(guān)鍵。
6.網(wǎng)站制作色彩搭配之紅色+黑色
【示例】紅色+黑色網(wǎng)頁配色設(shè)計(jì)效果示意圖10-78
分析
紅色與黑色的搭配在商業(yè)設(shè)計(jì)中,被譽(yù)為商業(yè)成功色,鮮亮的紅色多用于小面積的點(diǎn)綴色。從數(shù)值上看,紅色添加了G和B飽和度稍降低因此該紅色大面積使用不會(huì)覺得刺激或不舒服,這也與背景色藍(lán)色加入了適量漸變的技法,使得頁面的節(jié)奏呈現(xiàn)緩和。輔助色黑色的加入,與涿紅色在明度拉大,頁面色彩元素相對(duì)活躍不少。點(diǎn)睛色白色所放的位置和面積,起到平衡黑色位置面積的作用,當(dāng)然也達(dá)到醒目的效果。
【網(wǎng)站設(shè)計(jì)師點(diǎn)評(píng)】
這里顏色位置的擺放,起到平衡頁面視覺,突出主題效果的作用。背景色加了漸變效果、整體與前景人物黑色對(duì)比呈淺色,前景人物黑色與背景涿紅色、背景源紅與前景白色文字相互之間的關(guān)系,構(gòu)成空間環(huán)境的視覺效果。
這組配色中,紅色是降低了明度的深紅色,為主色調(diào)和背景色的大面積使用。紅黑搭配色,常用于較前衛(wèi)時(shí)尚、娛樂休閑、電子商務(wù)等要求個(gè)性的網(wǎng)頁設(shè)計(jì)配色里,也有用于部分政治、新聞的頁面。
7.網(wǎng)站制作色彩搭配之紅色+黑色+灰色
【示例】紅色+黑色+灰色網(wǎng)頁配色設(shè)計(jì)效果示意圖10-79
【分析】

這組配色,達(dá)到最高純度的紅色做小面積的使用。雖然這里選取了紅色作為輔助色,但從整個(gè)頁面的功能和所表達(dá)的主題來看,紅色可以作為該頁面的點(diǎn)睛色,強(qiáng)烈地突出了主題。紅色的數(shù)值顯示,HBS中的H為0度,達(dá)到紅色特性的最高值,S為最高飽和度100%,在明度最低的黑色背景的襯托下,其特性發(fā)揮到極致,頁面醒目而響亮。
紅色與黑色本是對(duì)比強(qiáng)烈的配色.但由于背景灰色的作用,緩和整個(gè)頁面的視覺刺激度。背景色灰色RGB數(shù)值變化不大,因此顏色純度較低、趨于干穩(wěn)柔和,輔助前景內(nèi)容的呈現(xiàn)。白色讓前景和背景的劃分更明顯,活躍頁面中的色彩元素。
【網(wǎng)站設(shè)計(jì)師點(diǎn)評(píng)】
使用面積小的純度高的顏色在非色彩的黑色和灰色上,是產(chǎn)生變化頁面的顏色,達(dá)到容易突出主題的目的。
網(wǎng)站制作公司總結(jié)
紅色在RGB數(shù)值的R為255左右,HSB數(shù)值的H中為0度左右,達(dá)到紅色最高值。隨著純度的提高、亮度的適度增加,它易于迅速的傳達(dá)、醒目性的特征發(fā)揮得越明顯。和其他顏色樣,顏色相互混合得越多,明度越低,飽和度越低,視覺沖擊力越弱。
對(duì)比色紅色綠色的搭配,紅色的特性發(fā)揮得越明顯。綠葉襯紅花的效果。另外紅與黑的搭配,也較能展現(xiàn)紅色的魅力。根據(jù)主題的需要除了對(duì)比色的應(yīng)用,還育面積上、位置上的對(duì)比應(yīng)用,也能很好地配合達(dá)到突出主題產(chǎn)品主體物的目的。好了,網(wǎng)站制作公司本文關(guān)于網(wǎng)頁設(shè)計(jì)時(shí)對(duì)于紅色頁面效果的色彩搭配經(jīng)驗(yàn)本文就分享到這里,謝謝關(guān)注,博納網(wǎng)絡(luò)編輯整理。