建站常識(shí)
網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用實(shí)例剖析——紅色系
2006-10-12 08:26:00
在眾多顏色里,紅色是最鮮明生動(dòng)的、最熱烈的顏色。因此紅色也是代表熱情的情感之色。鮮明紅色極容易吸引人們的目光。
紅色在不同的明度、純度的狀態(tài)(粉紅、鮮紅、深紅)里,給人表達(dá)的情感是不一樣的。
在網(wǎng)頁(yè)顏色的應(yīng)用機(jī)率中,根據(jù)網(wǎng)頁(yè)主題內(nèi)容的需求,純粹使用紅色為主色調(diào)的網(wǎng)站相對(duì)較少,多用于輔助色、點(diǎn)睛色,達(dá)到陪襯、醒目的效果。通常都配以其他顏色調(diào)和。
紅色相對(duì)于其他顏色,視覺(jué)傳遞速度最快。由于以上的這些紅色傳達(dá)出的特性,因此人們喜歡用紅色作為警示符號(hào)的顏色,例如:消防、驚嘆號(hào)、錯(cuò)誤提示等等。
為了讓大家對(duì)紅色的理解做更好的區(qū)別,下面我們分別對(duì)紅色系根據(jù)鄰近色、同類色、對(duì)比色的搭配做不同的舉例分析。
朱紅色
→ 朱紅******頁(yè)例圖:http://www.muchvibe.ca
朱紅色在紅色系里傾向黃色方向,是大紅色加入黃色而得。在色環(huán)表中,純紅色在HSB里為0度,往360度方向呈現(xiàn)的是冷紅色系,0度方向?yàn)辄S色系。
整個(gè)頁(yè)面里,主色調(diào)朱紅色面積非常大、確定明顯,輔助色主要由黑色、深紅構(gòu)成,(數(shù)值上選取的是深紅色做標(biāo)示)。主色調(diào)的R呈現(xiàn)出255最高數(shù)值,S中100%,充分標(biāo)明了紅色最高特性。輔助色的深紅R為222,B87%,顯示其充當(dāng)輔助角色的這一特性。
結(jié)論:
背景色朱紅由于紅色特性明顯,飽和度、明度都非常的高,這里運(yùn)用了輔助色深紅、黑色壓住并牽制朱紅色搶眼的個(gè)性,也同樣能達(dá)到突出前景主要圖片內(nèi)容的目的。點(diǎn)睛色主要用于標(biāo)志的突出上,其他導(dǎo)航文字、圖片的部分運(yùn)用等,調(diào)和并達(dá)到了不至于使得整個(gè)頁(yè)面刺激中又透出的沉悶感。
這類顏色的組合比較容易使人提升興奮度,紅色特性明顯,這一醒目的特殊屬性,比較被廣泛的應(yīng)用于食品、時(shí)尚休閑等等類型的網(wǎng)站。
→ 深紅******頁(yè)例圖:http:// www.sisley.com
深紅色在原有的紅色基礎(chǔ)上降低了明度而得,是紅色系中的明度變化。通過(guò)上圖的數(shù)值顯示看出明度較低。
這類顏色的組合隨著明度的變暗,比較容易制造深邃、幽怨的故事氣氛。傳達(dá)的是穩(wěn)重、成熟、高貴、消極的心理感受。
這個(gè)頁(yè)面背景色運(yùn)用了紋樣,是以目前選取的主色調(diào)顏色和明度較暗的深紅色結(jié)合而的,使得明度稍暗。
數(shù)值上看,主色調(diào)也就是背景色的飽和度較高,但是由于降低了明度,顏色變得較沉穩(wěn)。輔助色RGB添加了適量的其他顏色,G和B數(shù)值區(qū)別不大,因此飽和度降低,顏色趨于柔和穩(wěn)定。點(diǎn)睛色的加入提亮,頁(yè)面視覺(jué)效果強(qiáng)化。
結(jié)論:
前景色通常要較明顯的區(qū)別于背景色,達(dá)到臺(tái)前的宣傳目的。當(dāng)飽和度較低的前景色與背景色變化不明顯時(shí)形成的是另外一種柔和統(tǒng)一的效果。#p# 玫瑰紅色
→ 玫瑰紅******頁(yè)例圖:http://www.gentverwent.be
玫瑰紅色在色環(huán)上實(shí)際已經(jīng)接近冷色,是紅色系中的色相的微妙變化,是紅色系里的冷色系。我們?cè)贖SB中H數(shù)值可看出,0度為紅色的最高值,越接近0度數(shù)值紅色特性越明顯,否則逐漸冷色傾斜,而該數(shù)值偏離0度稍遠(yuǎn)。
這個(gè)頁(yè)面主要由兩種不同明度、純度的玫瑰色調(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)視覺(jué)強(qiáng)化效果。
結(jié)論:
背景色和前景色的明度較接近,顏色給人的視覺(jué)表象較悶,加入少量白色劃分使得色彩引導(dǎo)的主次塊面更分明,頁(yè)面明快許多。
這類顏色的組合多用于女性主題,例如:化妝品、服裝等,容易營(yíng)造出嬌媚、誘惑、艷麗等氣氛。#p# 明度粉紅色
→ 明度粉紅******頁(yè)例圖:http:// www.enjo.com.au
粉紅色主要是紅色系中的明度的高亮度的變化。是紅色系里的冷色系。RGB數(shù)值顯示明度較高,因此HSB中S純度下降,幾乎呈最低值。
主色調(diào)和輔助色調(diào)數(shù)值對(duì)比可知:主色調(diào)混合的G的份量較多且明度較高,因此純度較低,色調(diào)柔和,在框架區(qū)域內(nèi)較適合做類似背景色的輔助性崗位。輔助色R數(shù)值比主色調(diào)的R數(shù)值稍高,紅色性稍明顯,加入的G相對(duì)少,B明度稍低,因此相對(duì)純度要高,輔色位置應(yīng)用在框架區(qū)域的導(dǎo)航位置,起到突出導(dǎo)航作用。點(diǎn)睛色突出標(biāo)志及購(gòu)物主體的作用。
背景白色除了突出前面粉紅色主體的作用,在前景也有出現(xiàn),背景色與前景色的相互牽制,減少空間距離的效果。
結(jié)論:
RGB數(shù)值中,數(shù)值同時(shí)呈現(xiàn)相近的高數(shù)值時(shí),色彩越柔和協(xié)調(diào),純度相對(duì)降低,頁(yè)面呈高明度灰色段,視覺(jué)刺激緩慢。這里以粉紅色為主色調(diào)的頁(yè)面,女性主題內(nèi)容特征傾向明顯。這組粉紅色頁(yè)面里,由于純度都較低,任何一個(gè)純度高小面積使用的顏色都能起到點(diǎn)睛的效果。
這類顏色的組合多用于女性主題,例如:化妝品、服裝等,鮮嫩而充滿誘惑,傳達(dá)著柔情、嬌媚、溫柔、甜蜜、純真、誘惑的心理感受。
#p# 對(duì)比色:橙紅色+藍(lán)色
→ 對(duì)比色橙紅色應(yīng)用網(wǎng)頁(yè)例圖:http://www. tostitos.com
嚴(yán)格上來(lái)說(shuō),橙色是藍(lán)色的對(duì)比色,這組對(duì)比色中的橙紅色傾向于紅色。
該頁(yè)面的背景色使用紋理圖形由深至淺的制造空間范圍,模擬真實(shí)環(huán)境。這里的數(shù)值選取其中間色值來(lái)分析,由于背景藍(lán)色B的明度較低,又由于冷色比暖色視覺(jué)傳遞速度慢的特點(diǎn),很適合作為輔助角色突出前景的應(yīng)用。主色調(diào)橙紅色R的數(shù)值達(dá)到最高值255,SB都達(dá)到了最高值100%,視覺(jué)刺激非常強(qiáng)烈,運(yùn)用大面積高純度來(lái)突出藍(lán)色產(chǎn)品主體物,又形成了一次頁(yè)面上的視覺(jué)對(duì)比--背景藍(lán)色與前景橙紅色,前景橙紅色與產(chǎn)品主體物藍(lán)色的二次對(duì)比。
點(diǎn)睛色白色,使這組對(duì)比色在頁(yè)面中表現(xiàn)得更協(xié)調(diào),調(diào)和的作用。
結(jié)論:
顏色的深淺除了能營(yíng)造空間感的效果,也能輔助性的制造主次效果。顏色除了性能對(duì)比,面積對(duì)比、位置安排也是制造主次效果的關(guān)鍵。
這組橙色藍(lán)色對(duì)比色在網(wǎng)頁(yè)上比其他兩組對(duì)比色紅色綠色,黃色紫色應(yīng)用得多,能迅速的傳達(dá)網(wǎng)站主題內(nèi)容、網(wǎng)頁(yè)主體,容易增添強(qiáng)烈的興奮度,多用于食品、休閑娛樂(lè)、產(chǎn)品等,但卻又是跨越于各行業(yè)的主題網(wǎng)站,適用的范圍非常大。#p# 配色:紅色+黑色
→ 紅色配色應(yīng)用網(wǎng)頁(yè)例圖:http:// www.pleasuredome.it
紅色與黑色的搭配在商業(yè)設(shè)計(jì)中,被譽(yù)為商業(yè)成功色,鮮亮的紅色多用于小面積的點(diǎn)綴色。
從數(shù)值上看,紅色添加了G和B飽和度稍降低,因此該紅色大面積使用不會(huì)覺(jué)得刺激或不舒服,這也與背景色藍(lán)色加入了適量漸變的技法,使得頁(yè)面的節(jié)奏呈現(xiàn)緩和。輔助色黑色的加入,與深紅色在明度拉大,頁(yè)面色彩元素相對(duì)活躍不少。
點(diǎn)睛色白色,所放的位置和面積,起到平衡黑色位置面積的作用,當(dāng)然也達(dá)到醒目的效果。
結(jié)論:
這里顏色位置的擺放,起到平衡頁(yè)面視覺(jué),突出主題效果。背景色加了漸變效果、整體與前景人物黑色對(duì)比呈淺色,前景人物黑色與背景深紅色、背景深紅與前景白色文字相互之間的關(guān)系,構(gòu)成空間環(huán)境的視覺(jué)效果。
這組配色中,紅色是降低了明度的深紅色,為主色調(diào)和背景色的大面積使用。紅黑搭配色,常用于較前衛(wèi)時(shí)尚、娛樂(lè)休閑、電子商務(wù)等等要求個(gè)性的網(wǎng)頁(yè)設(shè)計(jì)配色里,也又有用于部分政治、新聞的頁(yè)面。#p# 配色:紅色+黑色+灰色
→ 紅色配色應(yīng)用網(wǎng)頁(yè)例圖:http:// www.enjo.com.au
這組配色,達(dá)到最高純度的紅色做小面積的使用。雖然這里選取了紅色做為輔助色,但從整個(gè)頁(yè)面的功能和所表達(dá)的主題來(lái)看,紅色可以作為該頁(yè)面的點(diǎn)睛色,強(qiáng)烈的突出了主題。
紅色的數(shù)值顯示,HBS中的H為0度,達(dá)到紅色特性的最高值,S為最高飽和度100%,在明度最低的黑色背景的襯托下,其特性發(fā)揮到極致,頁(yè)面醒目而響亮。
紅色與黑色本是對(duì)比強(qiáng)烈的配色,但由于背景灰色的作用,緩和整個(gè)頁(yè)面的視覺(jué)刺激度。背景色灰色RGB數(shù)值變化不大,因此顏色純度較低、趨于平穩(wěn)柔和,輔助前景內(nèi)容的呈現(xiàn)。
白色讓前景和背景的劃分更明顯,活躍頁(yè)面中的色彩元素。
結(jié)論:
使用面積小的純度高的顏色在非色彩的黑色和灰色上,是產(chǎn)生變化頁(yè)面的顏色,達(dá)到容易突出主題的目的。
本部分小節(jié):
● 紅色在RGB數(shù)值的R為255左右,HSB數(shù)值的H中為0度左右,達(dá)到紅色最高值。隨著純度的提高、亮度的適度增加,它易于迅速的傳達(dá)、醒目性的特征發(fā)揮得越明顯。和其他顏色一樣,顏色相互混合的越多,明度越低,飽和度越低,視覺(jué)沖擊力越弱。
● 顏色的對(duì)比:對(duì)比色紅色綠色的搭配,紅色的特性發(fā)揮得越明顯。綠葉襯紅花的效果。另外紅與黑的搭配,也較能展現(xiàn)紅色的魅力。
● 根據(jù)主題的需要,除了對(duì)比色的應(yīng)用,還有面積上、位置上的對(duì)比應(yīng)用,也能很好的配合達(dá)到突出主題產(chǎn)品主體物的目的。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺(jué)觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁(yè)設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2006-10-27 08:01:00] 網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用實(shí)例剖析——橙色系
- [2007-01-09 09:37:00] 《網(wǎng)頁(yè)配色密碼》
- [2006-10-10 08:35:00] 網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用——色彩的調(diào)和
- [2006-10-09 10:25:00] 網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用——色彩的對(duì)比
- [2006-10-08 07:59:00] 網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用——色調(diào)
- [2005-12-28 13:59:00] 網(wǎng)頁(yè)配色之黃金分割法
- [2007-07-23 16:19:00] 網(wǎng)頁(yè)配色:正文中國(guó)傳統(tǒng)色彩名錄
- [2006-11-22 08:34:00] 網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用實(shí)例剖析——黃色系
- [2009-05-18 08:00:00] 網(wǎng)頁(yè)配色工具
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
膠南網(wǎng)站建設(shè)公司 H5專題頁(yè)面 青島高端網(wǎng)站建設(shè) 青島輪胎網(wǎng)站設(shè)計(jì)公司 建站常識(shí) 青島網(wǎng)頁(yè)制作 robots 網(wǎng)站規(guī)劃 海信網(wǎng)絡(luò)科技 青島網(wǎng)站建設(shè)公司哪家好 html和css 青島做網(wǎng)站多少錢(qián) 良好的導(dǎo)航 GOOGLE 青島好的網(wǎng)站優(yōu)化公司 青島網(wǎng)站制作 交互設(shè)計(jì) 版面布局 青島網(wǎng)站優(yōu)化 營(yíng)銷型網(wǎng)站 英文網(wǎng)站建設(shè) 外貿(mào)網(wǎng)站設(shè)計(jì) 青島網(wǎng)站案例 搜索引擎蜘蛛 網(wǎng)站優(yōu)化 SEO優(yōu)化 網(wǎng)站動(dòng)畫(huà) 網(wǎng)站品牌 網(wǎng)站策劃 企業(yè)網(wǎng)站建設(shè)