【專欄作者簡介】
黎芳:科班藝術(shù)設(shè)計專業(yè)高材生,從事網(wǎng)頁設(shè)計近十年;曾長期從事企業(yè)策劃工作;長期分析研究網(wǎng)頁設(shè)計、配色;2000年曾在天極設(shè)計在線(design.yesky.com)、《電腦報》發(fā)表過數(shù)篇文章,2001年開始在藍(lán)色經(jīng)典論壇任藝術(shù)設(shè)計版主ID:Redfall;2004年開始做自由職業(yè)、自由撰稿人;2005編著《網(wǎng)頁設(shè)計與配色實例分析》一書。2006年首都師大講師;目前在著手寫第二本書。Email: redlifang@163.com 注:本專題部分理論節(jié)選于本文作者黎芳(Redfall)的《網(wǎng)頁設(shè)計與配色實例分析》一書的第二部分第五章,由希望電子出版社出版。網(wǎng)上購買: China-Pub RGB與HSB 在實用美術(shù)中,常有"遠(yuǎn)看色彩近看花,先看顏色后看花,七分顏色三分花"的說法。
這也就說明,在任何設(shè)計中,色彩對視覺的刺激起到第一信息傳達(dá)的作用。因此,對色彩的基礎(chǔ)知識的良好掌控,在網(wǎng)頁設(shè)計中才能做到游刃有余。 為了使下面的網(wǎng)頁配色分析更易于理解,我們先來了解色彩的RGB模式和HSB模式。 ■ RGB RGB是表示紅色綠色藍(lán)色又稱為三原色光,英文為R(Red)、G(Green)、B(Blue),在電腦中,RGB的所謂"多少"就是指亮度,并使用整數(shù)來表示。 通常情況下,RGB各有256級亮度,用數(shù)字表示為從0、1、2至255。雖然數(shù)字最高是255,但0也是數(shù)值之一,因此共256級。按照計算,256級的RGB色彩總共能組合出約1678萬種色彩,即256×256×256=16777216。通常也被簡稱為1600萬色或千萬色。也稱為24位色(2的24次方)。 對于單獨(dú)的R或G或B而言,當(dāng)數(shù)值為0時,代表這種顏色不發(fā)光;如果為255,則該顏色為最高亮度。因此當(dāng)RGB三種色光都發(fā)到最強(qiáng)的亮度,純白的RGB值就為255,255,255。屏幕上黑的RGB值是0,0,0。R,意味著只有紅色存在,且亮度最強(qiáng),G和B都不發(fā)光。因此最紅色的數(shù)值是255,0,0。同理,最綠色就是0,255,0;而最藍(lán)色就是0,0,255。黃色較特殊,是由紅色加綠色而得就是255,255,0。(詳細(xì)分析請參考趙鵬所寫的《電腦美術(shù)設(shè)計中的色彩模式詳解》)
RGB模式是顯示器的物理色彩模式。這就意味著無論在軟件中使用何種色彩模式,只要是在顯示器上顯示的,圖像最終就是以RGB方式出現(xiàn)。 ■ HSB 是顏色分為色相、飽和度、明度三個因素。英文為H(Hue)、S(Saturation)B(Brightness)飽和度高色彩較艷麗。飽和度低色彩就接近灰色。亮度高色彩明亮,亮度低色彩暗淡,亮度最高得到純白,最低得到純黑。一般淺色的飽和度較低,亮度較高,而深色的飽和度高而亮度低。 色彩三屬性與實例剖析 許多初學(xué)者對色彩的屬性和原色概念模糊,容易混淆,下面我們就先從幾個概念入手。今天介紹色彩的三個屬性。
顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色,而其他所有顏色均屬于彩色。從心理學(xué)和視覺的角度出發(fā),彩色具有三個屬性:色相、明度、純度(彩度)。
■ 明度(Value): 也叫亮度,指顏色的深淺、明暗程度,沒有色相和飽和度的區(qū)別。不同的顏色,反射的光量強(qiáng)弱不一,因而會產(chǎn)生不同程度的明暗。非色彩的黒、灰、白較能形象的表達(dá)這一特質(zhì)。 明度的遞增
從上圖網(wǎng)頁所選取的4個主要色塊的RGB數(shù)值來看,這4塊色彩組合顯示的RGB數(shù)值很高,接近于最高值255。RGB相互間的數(shù)值相近,由于有RG的高數(shù)值與B高數(shù)值混合,整個網(wǎng)頁給人的感覺非常協(xié)調(diào),柔和雅致,心情愉悅。 結(jié)論: RGB同時呈現(xiàn)相近的高數(shù)值時,相近等量的色彩相互混合,頁面呈高明度灰色段,協(xié)調(diào)的柔和狀態(tài),令人遐想,對視覺刺激是緩慢的,適合長時間觀看。但由于數(shù)值接近,因此色階平穩(wěn),同時存在著不夠醒目的狀態(tài)。 ■ 純度(Chroma): 也叫飽和度,指色彩的鮮艷程度。原色最純,顏色的混合越多則純度逐漸減低。如某一鮮亮的顏色,加入了白色或者黑色,使得它的純度低,顏色趨于柔和、沉穩(wěn)。 加入黑色的純度變化和加入白色的純度變化
上圖網(wǎng)頁中選取了主要的兩種色系為組合。運(yùn)用HBS數(shù)值模式更易于理解分析該網(wǎng)頁的純度情況。 我們看到藍(lán)色S數(shù)值呈現(xiàn)99%具有相當(dāng)高的飽和度,B明度為79%,玫瑰色S飽和度數(shù)值為85%,B明度為97%。當(dāng)飽和度和明度同時呈最高值時,色彩對視覺的刺激強(qiáng)度到達(dá)最高狀態(tài)。由于藍(lán)色的明度稍低,飽和度較高,而玫瑰色的明度較高,該顏色純度隨之加強(qiáng),因此玫瑰色相對藍(lán)色對人的視覺刺激更強(qiáng)烈。 結(jié)論: HSB模式中S和B呈現(xiàn)的數(shù)值越高,飽和度明度越高,頁面色彩強(qiáng)烈艷麗,對視覺刺激是迅速的,醒目的效果,但不易于長時間的觀看。以上兩種顏色的S數(shù)值接近,是強(qiáng)烈的狀態(tài)。H顯示的度是代表在色輪表里某個角度所呈現(xiàn)的色相狀態(tài),相對于SB來說,意義不大。 常用配色基本概念及精彩相關(guān)實例剖析1紅黃藍(lán)三原色 配色及實例剖析
點擊查看《網(wǎng)頁設(shè)計配色基礎(chǔ)、應(yīng)用及實戰(zhàn)》完整專題 在實用美術(shù)中,常有"遠(yuǎn)看色彩近看花,先看顏色后看花,七分顏色三分花"的說法。 這也就說明,在任何設(shè)計中,色彩對視覺的刺激起到第一信息傳達(dá)的作用。因此,對色彩的基礎(chǔ)知識的良好掌控,在網(wǎng)頁設(shè)計中才能做到游刃有余。 前面我們介紹了常用的電腦色彩模式RGB、HSB,以及色彩的三大屬性,今天我們介紹常用配色的基本概念和相關(guān)實例剖析。
選取了主色調(diào)黃色為示例。我們看到RGB數(shù)值中RG呈現(xiàn)最高值255時,HSB數(shù)值中的SB也呈現(xiàn)最高值100%,頁面呈現(xiàn)最高純度亮度——純黃色。因此黃色在三原色中也是亮度最高的顏色。 結(jié)論: HSB中SB呈現(xiàn)的數(shù)值越高,飽和度明度越高,頁面色彩強(qiáng)烈艷麗,由于黃色是亮度最高的顏色這一特性,也給人視覺產(chǎn)生強(qiáng)烈刺激的狀態(tài),對視覺刺激是迅速的、警戒、醒目的效果,但不易于長時間觀看。
我們看到RGB中R的數(shù)值是227,混合了G30、B40,因此紅色的純度輕微降低,顏色稍偏深紅。HSB數(shù)值中S顯示的飽和度為87%,B為89%,因此顏色還是較為飽和明亮。 結(jié)論: 主色R227數(shù)值較高的時候,由于混合了G30、B40少許顏色,飽和度明度稍微降低,視覺刺激減弱,紅色特性顯得較沉穩(wěn)。但由于紅色是最溫暖最有視覺沖擊力的顏色特性,該網(wǎng)頁整體看來仍然厚重而熱烈的表達(dá)了主題。
RGB數(shù)值中B藍(lán)色的數(shù)值是131與 R2、G83相混合,藍(lán)色的純度降低。結(jié)合HSB中數(shù)值H色相目前顯示的是203°,而三原色的純藍(lán)為240°來看,藍(lán)色的色相偏離較大,加上B為51%的明度,顏色偏暗,因此視覺沖擊力較弱。頁面沉穩(wěn)、凝重。 結(jié)論: 當(dāng)藍(lán)色色相偏離于三原色的純藍(lán)時,視覺沖擊力削弱。頁面呈沉穩(wěn)、平靜的感受。藍(lán)色在三原色里是視覺傳遞速度最慢的顏色特性,適合用于表達(dá)成熟、穩(wěn)重、安靜的網(wǎng)頁設(shè)計主題。藍(lán)色在網(wǎng)頁設(shè)計里也是使用得較頻繁的顏色。 2間色、復(fù)色、補(bǔ)色
上網(wǎng)頁例圖4種間色搭配一起非常明快、鮮亮。 從RGB數(shù)值顯示上看,綠色含量較高達(dá)到208,混合了R189的黃色光,因此顏色偏黃綠色,由于添加了B18,飽和度相對降低。玫瑰色中R的含量最高,與B109混合為主要組成色,添加了少量的G27黃,純度偏高。橙色中R的含量很高為255,混合了G145黃為主要組成色,添加了第三色B34,飽和度稍降低。紫色是由藍(lán)色和紅色調(diào)配而成,B為170,R為148,混色份量相當(dāng)也就成為了組合紫色這一間色的主要成份,但是由于添加了G87,也是4組顏色中的間色混合第三色數(shù)值最高的,HSB中S數(shù)值相對其他三色,降低很多,因此顏色相對于其它3種較沉穩(wěn),緩和。 以上4組顏色RGB數(shù)值的共同點是以兩色混合為主,都是三位數(shù)值,另外一色份量較少,為兩為數(shù)值,因此飽和度較高,色相傾向明顯。HSB數(shù)值的共同點是,除了紫色,其他三色的S飽和度相當(dāng),屬較高數(shù)值,因此視覺刺激也強(qiáng)。 結(jié)論: 間色是由三原色中的兩原色調(diào)配而成的,因此在視覺刺激的強(qiáng)度相對三原色來說緩和不少。屬于較易搭配之色。 間色盡管是二次色,但仍有很強(qiáng)的視覺沖擊力,容易帶來輕松、明快、愉悅的氣氛。
以上4種顏色中深綠色和赭石色為復(fù)色,之所以還選擇其它2顏色,為的是更好的配合說明復(fù)色的特性,如果沒有另外兩種非復(fù)色搭配,頁面配色就可能出現(xiàn)骯等不舒服的感覺。 我們看到深綠及赭石這兩種復(fù)色的數(shù)值都以一個份量最多的三位數(shù),另外兩者成份相當(dāng),都為兩位數(shù)組合而得。RGB之間的數(shù)值差距較接近、不明顯,色階較趨于直線平穩(wěn),呈灰階。HSB中SB顯示的數(shù)值也非常接近,成為符合復(fù)色特性的必須條件。 結(jié)論: 復(fù)色是由兩種間色或原色與間色混合而成,因此色相傾向較微妙、不明顯,視覺刺激度緩和,如果搭配不當(dāng),頁面便呈現(xiàn)易臟或易灰朦朦的效果,沉悶、壓抑之感,屬于不好搭配之色。但有時復(fù)色加深色搭配能很好的表達(dá)神秘感、縱深感空間感;明度高的多復(fù)色(參看明度的網(wǎng)頁例圖)多用來表示寧靜柔和、細(xì)膩的情感,易于長時間的瀏覽。
選用了一組紅綠對比色,極賦視覺沖擊力、所表現(xiàn)出的性格異常鮮明。 我們看到RGB中綠色的數(shù)值顯示情況符合復(fù)色的條件,因此注定了該顏色明度稍暗、純度較低的特性,而紅色R數(shù)值118構(gòu)成了該色的主要成份,其他G72,B61數(shù)值接近,純度和亮度相對綠色較高,因此2色在構(gòu)成色彩空間差距上拉大。HSB中2色的S數(shù)值也顯示出,它們的飽和度相差較大。 結(jié)論: 補(bǔ)色最能傳達(dá)強(qiáng)烈、個性的情感。純度稍低的綠色為背景的大面積使用,對比并突出了前景純度明度較高的面積較小紅色的圖形,形成了視覺中心重點突出,達(dá)到主次分明的主題效果。 紅綠、橙藍(lán)、黃紫這三組補(bǔ)色中,前兩種使用得最頻繁。這三組補(bǔ)色搭配出的最終效果和目的,可以用兩個字來概括——強(qiáng)烈! 3鄰近色、同類色
上圖選用了紅色、黃色為鄰近色示例,主要在色相上做區(qū)別豐富了頁面色彩上的變化。 RGB數(shù)值上看,以上5色R的數(shù)值都很高,僅是微妙的不同。其中淺黃色的B為138,因此在HSB數(shù)值中純度S顯示最低,為46%;5色RGB中G的數(shù)值都不同,色相、明度也產(chǎn)生相應(yīng)的不同。從數(shù)值上分析整體看來,5色都有在同一頻率的變化。 結(jié)論: 由于是相鄰色系,視覺反差不大,統(tǒng)一、調(diào)和,形成協(xié)調(diào)的視覺韻律美,相較顯得安定、穩(wěn)重的同時不失活力,是一種恰到好處的配色類型。
選用紅色系4種同類色示例,主要在明度上做區(qū)別變化。 由于是紅色系,4色RGB數(shù)值中的R,數(shù)值都很高,且相當(dāng)。從HSB數(shù)值看出,明度越高的顏色飽和度越低。 這4種同類色相來看,明度在強(qiáng)中弱的節(jié)奏中的緩和的進(jìn)行變化。 結(jié)論: 第一眼看上去給人溫柔、雅致、安寧的心理感受,便可知該組同類色系非常調(diào)和統(tǒng)一。只運(yùn)用同類色系配色,是十分謹(jǐn)慎穩(wěn)妥的做法,但是有時會有單調(diào)感。添加少許相鄰或?qū)Ρ壬?,可以體現(xiàn)出頁面的活躍感和強(qiáng)度。 4冷色、暖色
由于是暖色系,以上3種顏色RGB數(shù)值中R的含量為主導(dǎo),B都為0,暖度強(qiáng)度傾向在G的添加黃色成份變化中可以看到,較規(guī)律的數(shù)值變化、較有視覺節(jié)奏感。HSB中純度S和明度B都達(dá)到最高值,是鮮艷奪目的搭配色組合。 結(jié)論: 高明度高純度的色彩搭配,把頁面表達(dá)得鮮艷炫目,有非常強(qiáng)烈刺激的視覺表現(xiàn)力。 充分體現(xiàn)了暖色系的飽和度越高,其溫暖特性越明顯的性格。
冷色分析: 該網(wǎng)頁示例主要選用了鄰近色系藍(lán)色綠色和同類色的明度變化。其中3種藍(lán)色系的RGB數(shù)值從二位數(shù)到三位數(shù),隨著明度的遞增的同時,由低到高在有規(guī)律有節(jié)奏的變化。HSB的數(shù)值SB也相對隨著同比變化,純度S的含量都不大,因此這幾組色彩相對含蓄柔和。 綠色系RGB數(shù)值G的色相明顯,相應(yīng)添加了高亮度的黃色R,使色彩較鮮艷明快。HSB數(shù)值SB也顯示出其高純度高亮度的特性。 結(jié)論: 冷色系的亮度越高,其特性越明顯。單純冷色系搭配視覺感比暖色系舒適,不易造成視覺疲勞。藍(lán)色、綠色是冷色系的主要系,是設(shè)計中較常用的顏色,也是大自然之色,帶來一股清新、祥和安寧的空氣。 本部分小結(jié): 網(wǎng)頁設(shè)計配色應(yīng)用——色調(diào) 前面我們介紹了常用的電腦色彩模式RGB、HSB,以及色彩的三大屬性,還有常用配色的基本概念和相關(guān)實例剖析。今天開始我們介紹應(yīng)用部分,本節(jié)介紹調(diào)色。
網(wǎng)頁頁面中總是由具有某種內(nèi)在聯(lián)系的各種色彩,組成一個完整統(tǒng)一的整體,形成畫面色彩總的趨向,稱為色調(diào)。也可以理解為色彩狀態(tài)。色彩給人的感覺與氛圍,是影響配色視覺效果的決定因素。 為了使網(wǎng)頁的整體畫面呈現(xiàn)穩(wěn)定協(xié)調(diào)的感覺,以便充分的掌握其規(guī)律來更好的分析學(xué)習(xí),我們把視覺角色主次位置分為如下幾個概念,以便在網(wǎng)頁設(shè)計配色時更容易操縱主動權(quán)。 ■ 主色調(diào) 網(wǎng)頁設(shè)計配色應(yīng)用——色彩的對比 網(wǎng)頁頁面中總是由具有某種內(nèi)在聯(lián)系的各種色彩,組成一個完整統(tǒng)一的整體,形成畫面色彩總的趨向,稱為色調(diào)。也可以理解為色彩狀態(tài)。色彩給人的感覺與氛圍,是影響配色視覺效果的決定因素。
為了使網(wǎng)頁的整體畫面呈現(xiàn)穩(wěn)定協(xié)調(diào)的感覺,以便充分的掌握其規(guī)律來更好的分析學(xué)習(xí),上次我們介紹了視覺角色主次位置的幾個概念,本節(jié)我們介紹色彩的對比。
2純度對比、補(bǔ)色對比 是指不同色彩之間純度的差別而形成的對比。色彩純度可大致分為高純度、中純度、低純度三種。未經(jīng)調(diào)和過的原色純度是最高的,而間色多屬中純度的色彩,復(fù)色其本身純度偏低而屬低純度的色彩范圍。純度的對比會使色彩的效果更明確肯定。 → 純度對比網(wǎng)頁例圖:http:// www.havaianas.com 純度對比分析: 整個頁面看起來異常艷麗刺激然而又非常的協(xié)調(diào)。以上數(shù)值主要選取了幾種較有代表性的顏色。 大家注意看,以上色彩除了粉紅色,其他幾組顏色都是高飽和度高亮度的顏色,因此充分的發(fā)揮出了色彩的艷麗程度。包括粉紅色在內(nèi)的幾種灰色階,在中間起到了和諧作用。白色能拉開相近色階的空間及明快頁面的作用,在這里可以說是功不可沒。 結(jié)論: 頁面實際上用了不少顏色,配色大膽。抓住顏色主次冷暖的安排,適度再加上和諧的過渡色灰色,實現(xiàn)了作者對該頁面的輕松配色。從多種高純度的搭配協(xié)調(diào)能力上看,足可見作者對色彩設(shè)計搭配不一般的功底。 這類網(wǎng)頁配色非常能夠體現(xiàn)出一個網(wǎng)站頁面產(chǎn)品個性,配色難度大。讓人過目難忘。 ■ 補(bǔ)色對比 將紅與綠、黃與紫、藍(lán)與橙等具有補(bǔ)色關(guān)系的色彩彼此并置,使色彩感覺更為鮮明,純度增加,稱為補(bǔ)色對比。 → 補(bǔ)色對比網(wǎng)頁例圖:http:// www.forthosewholovelife.co.uk 補(bǔ)色對比分析: 由冷色系的綠色、藍(lán)色組成大背景環(huán)境,純度較低。前景主要是突出產(chǎn)品、文字信息內(nèi)容的大紅色形成補(bǔ)色對比效果,RGB的R255數(shù)值與HSB是H為零,數(shù)值顯示非常明確,標(biāo)準(zhǔn)的大紅色。純度亮度非常高,達(dá)到最高值,加之白色的勾邊,使得紅色更為凸顯,更易于視覺對信息的迅速捕捉。 結(jié)論: 對比色的合理搭配,能拉開前景與背景的空間感,突出頁面主體物。尤其是紅色在主體物的運(yùn)用,能迅速傳遞視覺的效果。 3冷暖對比 是指不同色彩之間的冷暖差別形成的對比。色彩分為冷、暖兩大色系,以紅、橙、黃為暖色體系,藍(lán)、綠、紫則代表著冷色系,兩者基本上互為補(bǔ)色關(guān)系。另外,色彩的冷暖對比還受明度與純度的影響,白光反射高而感覺冷,黑色吸收率高而感覺暖。 → 冷暖對比網(wǎng)頁例圖:http:// disney.go.com 冷暖對比分析: 以上這幾組顏色乍一看感覺鮮艷程度都差不多,但是通過觀察它們的數(shù)值發(fā)現(xiàn)飽和度都有相差,然而明度相近,因此它們給人造成的視覺感受幾乎是相同的。該頁面冷暖顏色較為豐富,橙和藍(lán)是對比最強(qiáng)烈的補(bǔ)色,其次是傾向不夠明顯的補(bǔ)色黃、紫。明度不同的兩個綠色起到了冷暖視覺的過渡作用。主色調(diào)的淺藍(lán)色亮度較高,讓頁面不易給人沉悶的感覺。 結(jié)論: 冷暖對比的應(yīng)用,通常在休閑娛樂網(wǎng)站、食品網(wǎng)站出現(xiàn)比較多。 將這兩個色系的色彩安排在同一畫面時,其對比效果極為強(qiáng)烈。通常初學(xué)者較容易使兩色相互排斥,導(dǎo)致畫面色調(diào)不諧調(diào)。一般我們采用兩種調(diào)和的方法。
純度調(diào)整 純度調(diào)整分析: 主色調(diào)的橙色,添入了少許黑色做漸變背景色,降低了純度。輔助色的藍(lán)色是橙色的補(bǔ)色,主要起的是使得整個頁面過多的暖色降低協(xié)調(diào)于整體的效果,及背景色的棕色都分別提暗降低純度。而左上角的黃色則通過提高了亮度來降低純度。一個頁面里應(yīng)有少量純度較高的顏色而不至于使整個頁面過于壓抑,純度亮度很高的點睛色紅色就起到了這個作用。 結(jié)論: 純度的調(diào)整主要是通過明度黑、白、灰變化來調(diào)整畫面的層次,適當(dāng)?shù)募尤胙a(bǔ)色也是其中的一個辦法。 面積調(diào)整 主次的面積區(qū)分。根據(jù)設(shè)計主題的需要,在畫面的面積上以一方為主色,于是就掌控畫面的色調(diào)作用,其他的顏色在使用面積上拉開距離,使畫面的主次關(guān)系更突出,在統(tǒng)一的同時富有變化。 → 面積調(diào)整網(wǎng)頁例圖:http:// www.upstairz.com 面積調(diào)整分析: 作為大面積使用的主色調(diào)--飽和度和亮度為最高值的橙色,通過適當(dāng)面積的白色加入?yún)f(xié)調(diào)和平衡了視覺的作用外,主體物的深紅紋樣的圖片點綴著純度、亮度較高的紅色有醒目作用,縮小面積而卻又能突出于視覺中心點,疏密構(gòu)圖的對比效果。 結(jié)論: 大面積的顏色和小面積使用的顏色可以拉開主次關(guān)系,位置的正確安排也是一個方面。 4面積對比 同一種色彩,面積越大,明度、純度越強(qiáng),面積越小,明度、純度越低。面積大的時候,亮的色顯得更輕,暗的色顯得更重。這種現(xiàn)象稱為色彩的面積效果。面積對比是指頁面中各種色彩在面積上多與少、大與小的差別,影響到頁面主次關(guān)系。 面積的對比,可以是中高低明度差的面積變化及中高低純度差的面積變化?!?/p>→ 面積對比網(wǎng)頁例圖:http:// www.parkpack.ru 網(wǎng)頁設(shè)計配色應(yīng)用——色彩的調(diào)和 網(wǎng)頁頁面中總是由具有某種內(nèi)在聯(lián)系的各種色彩,組成一個完整統(tǒng)一的整體,形成畫面色彩總的趨向,稱為色調(diào)。也可以理解為色彩狀態(tài)。色彩給人的感覺與氛圍,是影響配色視覺效果的決定因素。
為了使網(wǎng)頁的整體畫面呈現(xiàn)穩(wěn)定協(xié)調(diào)的感覺,以便充分的掌握其規(guī)律來更好的分析學(xué)習(xí),我們前面介紹了色調(diào)的視覺角色主次位置的幾個概念,也介紹了色彩的對比。今天我們介紹色彩的調(diào)和。 調(diào)和就是統(tǒng)一,下面介紹的四種方法能夠達(dá)到調(diào)和頁面色彩的目的。 ■ 同種色的調(diào)和 同種色的調(diào)和分析: 同種色給人的感覺是相當(dāng)協(xié)調(diào)的。它們通常在同一個色相里,通過明度的黑白灰或者純度的不同來稍微加以區(qū)別的,產(chǎn)生了及其微妙的韻律美。為了不至于讓整個頁面呈現(xiàn)過于單調(diào)平淡,有些頁面則是加入極其小的其他顏色做點綴。該頁面使用了同種色的黃色系,淡黃、檸檬黃、中黃、通過明度、純度的微妙變化產(chǎn)生緩和的節(jié)奏美感。 結(jié)論: 同種色被稱為最穩(wěn)妥的色彩搭配方法。 2類似色的調(diào)和 在色環(huán)中,色相越靠近越調(diào)和。主要靠類似色之間的共同色來產(chǎn)生作用。 → 類似色的調(diào)和網(wǎng)頁例圖:http://www. solar1.org 類似色的調(diào)和分析: 類似色相較于同類色色彩之間的可搭配度要大些,顏色豐富、富于變化。 以上頁面主要取的是色環(huán)中的黃色、綠色、藍(lán)色通過明度、純度、面積上的不同實現(xiàn)變化和統(tǒng)一的。雖然主色調(diào)的米黃色在頁面中使用面積最大,但是我們看到由于它的明度非常高,飽和度就降低了,因此在頁面中處在不明顯的角色。而綠色的純度最高,且使用面積次之,頁面顯示較顯眼,因此用于次級導(dǎo)航位置上。整個頁面主次的視覺引導(dǎo)分明。 結(jié)論: 不是每種主色調(diào)都是極其顯眼的位置,通常多扮演著用于突出主體的輔助性配角。而重要角色往往在頁面中用的份量極少,卻又起到突出主體的作用。 3對比色的調(diào)和 調(diào)和方法有: 1、提高或降低對比色的純度; 2、在對比色之間插入分割色(金、銀、黑、白、灰等); 3、采用雙方面積大小不同的處理方法; 4、對比色之間加入相近的類似色。 → 對比色的調(diào)和網(wǎng)頁例圖:http:// www.snapple.com 對比色的調(diào)和分析: 基本上可以說是黃色和紫色的對比色做頁面的主要色調(diào)。黃色紫色組合在網(wǎng)頁中使用率較低,原因是這組顏色適用范圍相對其他兩組對比色要小很多,配色難度也較兩組大。 這里黃色加入了紅色呈中黃色,紫色加入了紅色,偏玫瑰色,所以這組顏色不是嚴(yán)格意義上的對比色,也因此使這組顏色看起來協(xié)調(diào)、舒服。這個頁面都調(diào)低了亮度使整體降低了純度,緩和視覺刺激。白色是這組對比色里加入的協(xié)調(diào)色。 結(jié)論: 從上面的分析我們可以知道,通過上面的這些色值調(diào)配--當(dāng)需要使用這組對比色配色時候該如何達(dá)到協(xié)調(diào)的目的。 不是對比色為主色調(diào)的頁面就一定會有不舒服的感覺的,主要可以通過調(diào)低亮度、降低飽和度、加入少許白色來調(diào)和。 4漸變色的調(diào)和 漸變色實際是一種調(diào)和方法的運(yùn)用。是顏色按層次逐漸變化的現(xiàn)象。色彩漸變就像兩種顏色間的混色,可以有規(guī)律地在多種顏色中進(jìn)行。暗色和亮色之間的漸變會產(chǎn)生遠(yuǎn)近感和三維的視覺效果。 → 漸變色的調(diào)和網(wǎng)頁例圖:http:// www.macromedia.com 漸變色的調(diào)和分析: 該頁面背景使用了漸變的效果,增加了視覺空間感。在導(dǎo)航欄、廣告區(qū)域、產(chǎn)品技術(shù)的大標(biāo)題塊,都使用了漸變的技術(shù)手法來表達(dá),產(chǎn)生三維的視覺效果,統(tǒng)一了整個頁面的設(shè)計語言,也是區(qū)別于其他網(wǎng)站頁面的個性體現(xiàn),達(dá)到讓人印象深刻的目的。 結(jié)論: 漸變色能夠柔和視覺,增強(qiáng)空間感,體現(xiàn)節(jié)奏和韻律美感,統(tǒng)一整個頁面的目的。 除了統(tǒng)一當(dāng)然也可以起到變化頁面視覺形式的作用。該設(shè)計語言可做需要的時候適當(dāng)?shù)氖褂谩? 本部分小結(jié): 本節(jié)主要對色彩的對比與調(diào)和做了實例分析。例如當(dāng)頁面平淡單調(diào),需要用對比手法做些變化來豐富頁面的色彩設(shè)計;當(dāng)頁面變化過多,顯得刺眼、凌亂,可以通過以上介紹的調(diào)和方法進(jìn)行調(diào)整,使得頁面看起來更統(tǒng)一協(xié)調(diào)。 ● 主要是通過面積大小、冷暖對比來表達(dá)體現(xiàn)頁面的主次關(guān)系、中心思想。 ● 顏色平淡可加入適當(dāng)類似色對比色來使頁面產(chǎn)生變化。顏色凌亂可以適當(dāng)加入同類色或者類似色、白色、黑色、灰色做到統(tǒng)一調(diào)配的目的。 ● 對比色的搭配并不是就是說是絕對值的紅或者綠,藍(lán)或橙、黃或紫。對比色的第一視覺傾向越明顯配色難度就越大,也就是說越難調(diào)和;反之,傾向越不明顯的對比色越容易調(diào)和。請參照剛才對比色調(diào)和頁面分析例子方法。 ● 不是一種色彩面積用得越多或者越少、純度、明度越高就是能突出主體的主角色,主要是根據(jù)色彩相互之間的搭配關(guān)系來體現(xiàn)的。 ● 一個頁面中單純絕對的使用某種顏色或是使用絕對非常多種顏色搭配,容易產(chǎn)生個性效果,那叫玩色彩了,限于色彩運(yùn)用得非常熟練的朋友,但不推薦初學(xué)者使用。 網(wǎng)頁設(shè)計配色應(yīng)用實例剖析——紅色系 紅色的色感溫暖,性格剛烈而外向,是一種對人刺激性很強(qiáng)的顏色。紅色容易引起人的注意,也容易使人興奮、激動、緊張、沖動、還是一種容易造成人視覺疲勞的顏色。
在眾多顏色里,紅色是最鮮明生動的、最熱烈的顏色。因此紅色也是代表熱情的情感之色。鮮明紅色極容易吸引人們的目光。 紅色在不同的明度、純度的狀態(tài)(粉紅、鮮紅、深紅)里,給人表達(dá)的情感是不一樣的。 在網(wǎng)頁顏色的應(yīng)用機(jī)率中,根據(jù)網(wǎng)頁主題內(nèi)容的需求,純粹使用紅色為主色調(diào)的網(wǎng)站相對較少,多用于輔助色、點睛色,達(dá)到陪襯、醒目的效果。通常都配以其他顏色調(diào)和。 紅色相對于其他顏色,視覺傳遞速度最快。由于以上的這些紅色傳達(dá)出的特性,因此人們喜歡用紅色作為警示符號的顏色,例如:消防、驚嘆號、錯誤提示等等。 為了讓大家對紅色的理解做更好的區(qū)別,下面我們分別對紅色系根據(jù)鄰近色、同類色、對比色的搭配做不同的舉例分析。 朱紅色 → 朱紅色網(wǎng)頁例圖:http://www. 朱紅色在紅色系里傾向黃色方向,是大紅色加入黃色而得。在色環(huán)表中,純紅色在HSB里為0度,往360度方向呈現(xiàn)的是冷紅色系,0度方向為黃色系。 整個頁面里,主色調(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)用了輔助色深紅、黑色壓住并牽制朱紅色搶眼的個性,也同樣能達(dá)到突出前景主要圖片內(nèi)容的目的。點睛色主要用于標(biāo)志的突出上,其他導(dǎo)航文字、圖片的部分運(yùn)用等,調(diào)和并達(dá)到了不至于使得整個頁面刺激中又透出的沉悶感。 這類顏色的組合比較容易使人提升興奮度,紅色特性明顯,這一醒目的特殊屬性,比較被廣泛的應(yīng)用于食品、時尚休閑等等類型的網(wǎng)站。 2深紅色 → 深紅色網(wǎng)頁例圖:http:// www.sisley.com 深紅色在原有的紅色基礎(chǔ)上降低了明度而得,是紅色系中的明度變化。通過上圖的數(shù)值顯示看出明度較低。 這類顏色的組合隨著明度的變暗,比較容易制造深邃、幽怨的故事氣氛。傳達(dá)的是穩(wěn)重、成熟、高貴、消極的心理感受。 這個頁面背景色運(yùn)用了紋樣,是以目前選取的主色調(diào)顏色和明度較暗的深紅色結(jié)合而的,使得明度稍暗。 數(shù)值上看,主色調(diào)也就是背景色的飽和度較高,但是由于降低了明度,顏色變得較沉穩(wěn)。輔助色RGB添加了適量的其他顏色,G和B數(shù)值區(qū)別不大,因此飽和度降低,顏色趨于柔和穩(wěn)定。點睛色的加入提亮,頁面視覺效果強(qiáng)化。 結(jié)論: 前景色通常要較明顯的區(qū)別于背景色,達(dá)到臺前的宣傳目的。當(dāng)飽和度較低的前景色與背景色變化不明顯時形成的是另外一種柔和統(tǒng)一的效果。 3玫瑰紅色 → 玫瑰紅色網(wǎng)頁例圖:http://www. 玫瑰紅色在色環(huán)上實際已經(jīng)接近冷色,是紅色系中的色相的微妙變化,是紅色系里的冷色系。我們在HSB中H數(shù)值可看出,0度為紅色的最高值,越接近0度數(shù)值紅色特性越明顯,否則逐漸冷色傾斜,而該數(shù)值偏離0度稍遠(yuǎn)。 這個頁面主要由兩種不同明度、純度的玫瑰色調(diào)組成。兩色數(shù)值顯示,我們看到RGB數(shù)值中R呈現(xiàn)的數(shù)值最高,紅色特性較明顯。輔助色調(diào)的玫瑰色,加入少許G,色調(diào)向冷色稍微偏移,也由于加入了G,在HSB數(shù)值里,飽和度輕微減弱,但隨著明度增加,色彩趨于艷麗,符合突出前景的目的。主色調(diào)雖然純度達(dá)到最高飽和,但由于明度降低,相對于輔色調(diào)較沉穩(wěn),適合做背景色。 數(shù)值上看,由于背景色和前景色的明度較為接近,加入白色邊框,強(qiáng)烈了前景色于背景色的區(qū)分,加強(qiáng)視覺強(qiáng)化效果。 結(jié)論: 背景色和前景色的明度較接近,顏色給人的視覺表象較悶,加入少量白色劃分使得色彩引導(dǎo)的主次塊面更分明,頁面明快許多。 這類顏色的組合多用于女性主題,例如:化妝品、服裝等,容易營造出嬌媚、誘惑、艷麗等氣氛。 4明度粉紅色 → 明度粉紅色網(wǎng)頁例圖:http:// www.enjo.com.au 粉紅色主要是紅色系中的明度的高亮度的變化。是紅色系里的冷色系。RGB數(shù)值顯示明度較高,因此HSB中S純度下降,幾乎呈最低值。 主色調(diào)和輔助色調(diào)數(shù)值對比可知:主色調(diào)混合的G的份量較多且明度較高,因此純度較低,色調(diào)柔和,在框架區(qū)域內(nèi)較適合做類似背景色的輔助性崗位。輔助色R數(shù)值比主色調(diào)的R數(shù)值稍高,紅色性稍明顯,加入的G相對少,B明度稍低,因此相對純度要高,輔色位置應(yīng)用在框架區(qū)域的導(dǎo)航位置,起到突出導(dǎo)航作用。點睛色突出標(biāo)志及購物主體的作用。 背景白色除了突出前面粉紅色主體的作用,在前景也有出現(xiàn),背景色與前景色的相互牽制,減少空間距離的效果。 結(jié)論: RGB數(shù)值中,數(shù)值同時呈現(xiàn)相近的高數(shù)值時,色彩越柔和協(xié)調(diào),純度相對降低,頁面呈高明度灰色段,視覺刺激緩慢。這里以粉紅色為主色調(diào)的頁面,女性主題內(nèi)容特征傾向明顯。這組粉紅色頁面里,由于純度都較低,任何一個純度高小面積使用的顏色都能起到點睛的效果。 這類顏色的組合多用于女性主題,例如:化妝品、服裝等,鮮嫩而充滿誘惑,傳達(dá)著柔情、嬌媚、溫柔、甜蜜、純真、誘惑的心理感受。 5對比色:橙紅色+藍(lán)色 → 對比色橙紅色應(yīng)用網(wǎng)頁例圖:http://www. tostitos.com 嚴(yán)格上來說,橙色是藍(lán)色的對比色,這組對比色中的橙紅色傾向于紅色。 該頁面的背景色使用紋理圖形由深至淺的制造空間范圍,模擬真實環(huán)境。這里的數(shù)值選取其中間色值來分析,由于背景藍(lán)色B的明度較低,又由于冷色比暖色視覺傳遞速度慢的特點,很適合作為輔助角色突出前景的應(yīng)用。主色調(diào)橙紅色R的數(shù)值達(dá)到最高值255,SB都達(dá)到了最高值100%,視覺刺激非常強(qiáng)烈,運(yùn)用大面積高純度來突出藍(lán)色產(chǎn)品主體物,又形成了一次頁面上的視覺對比--背景藍(lán)色與前景橙紅色,前景橙紅色與產(chǎn)品主體物藍(lán)色的二次對比。 點睛色白色,使這組對比色在頁面中表現(xiàn)得更協(xié)調(diào),調(diào)和的作用。 結(jié)論: 顏色的深淺除了能營造空間感的效果,也能輔助性的制造主次效果。顏色除了性能對比,面積對比、位置安排也是制造主次效果的關(guān)鍵。 這組橙色藍(lán)色對比色在網(wǎng)頁上比其他兩組對比色紅色綠色,黃色紫色應(yīng)用得多,能迅速的傳達(dá)網(wǎng)站主題內(nèi)容、網(wǎng)頁主體,容易增添強(qiáng)烈的興奮度,多用于食品、休閑娛樂、產(chǎn)品等,但卻又是跨越于各行業(yè)的主題網(wǎng)站,適用的范圍非常大。 6配色:紅色+黑色 → 紅色配色應(yīng)用網(wǎng)頁例圖:http:// www.pleasuredome.it 紅色與黑色的搭配在商業(yè)設(shè)計中,被譽(yù)為商業(yè)成功色,鮮亮的紅色多用于小面積的點綴色。 從數(shù)值上看,紅色添加了G和B飽和度稍降低,因此該紅色大面積使用不會覺得刺激或不舒服,這也與背景色藍(lán)色加入了適量漸變的技法,使得頁面的節(jié)奏呈現(xiàn)緩和。輔助色黑色的加入,與深紅色在明度拉大,頁面色彩元素相對活躍不少。 點睛色白色,所放的位置和面積,起到平衡黑色位置面積的作用,當(dāng)然也達(dá)到醒目的效果。 結(jié)論: 這里顏色位置的擺放,起到平衡頁面視覺,突出主題效果。背景色加了漸變效果、整體與前景人物黑色對比呈淺色,前景人物黑色與背景深紅色、背景深紅與前景白色文字相互之間的關(guān)系,構(gòu)成空間環(huán)境的視覺效果。 這組配色中,紅色是降低了明度的深紅色,為主色調(diào)和背景色的大面積使用。紅黑搭配色,常用于較前衛(wèi)時尚、娛樂休閑、電子商務(wù)等等要求個性的網(wǎng)頁設(shè)計配色里,也又有用于部分政治、新聞的頁面。 7配色:紅色+黑色+灰色 → 紅色配色應(yīng)用網(wǎng)頁例圖:http:// www.enjo.com.au 這組配色,達(dá)到最高純度的紅色做小面積的使用。雖然這里選取了紅色做為輔助色,但從整個頁面的功能和所表達(dá)的主題來看,紅色可以作為該頁面的點睛色,強(qiáng)烈的突出了主題。 紅色的數(shù)值顯示,HBS中的H為0度,達(dá)到紅色特性的最高值,S為最高飽和度100%,在明度最低的黑色背景的襯托下,其特性發(fā)揮到極致,頁面醒目而響亮。 紅色與黑色本是對比強(qiáng)烈的配色,但由于背景灰色的作用,緩和整個頁面的視覺刺激度。背景色灰色RGB數(shù)值變化不大,因此顏色純度較低、趨于平穩(wěn)柔和,輔助前景內(nèi)容的呈現(xiàn)。 白色讓前景和背景的劃分更明顯,活躍頁面中的色彩元素。 結(jié)論: 使用面積小的純度高的顏色在非色彩的黑色和灰色上,是產(chǎn)生變化頁面的顏色,達(dá)到容易突出主題的目的。 本部分小節(jié): ● 紅色在RGB數(shù)值的R為255左右,HSB數(shù)值的H中為0度左右,達(dá)到紅色最高值。隨著純度的提高、亮度的適度增加,它易于迅速的傳達(dá)、醒目性的特征發(fā)揮得越明顯。和其他顏色一樣,顏色相互混合的越多,明度越低,飽和度越低,視覺沖擊力越弱。 ● 顏色的對比:對比色紅色綠色的搭配,紅色的特性發(fā)揮得越明顯。綠葉襯紅花的效果。另外紅與黑的搭配,也較能展現(xiàn)紅色的魅力。 ● 根據(jù)主題的需要,除了對比色的應(yīng)用,還有面積上、位置上的對比應(yīng)用,也能很好的配合達(dá)到突出主題產(chǎn)品主體物的目的。 網(wǎng)頁設(shè)計配色應(yīng)用實例剖析——橙色系 橙色具有輕快、歡欣、收獲、溫馨、時尚的效果,是快樂、喜悅、能量的色彩。 在整個色譜里,橙色具有興奮度,是最耀眼的色彩。給人以華貴而溫暖,興奮而熱烈的感覺,也是令人振奮的顏色。具有健康、富有活力、勇敢自由等象征意義,能給人有莊嚴(yán)、尊貴、神秘等感覺。橙色在空氣中的穿透力僅次于紅色,也是容易造成視覺疲勞的顏色。 在網(wǎng)頁顏色里,橙色適用于視覺要求較高的時尚網(wǎng)站,屬于注目、芳香的顏色,也常被用于味覺較高的食品網(wǎng)站,是容易引起食欲的顏色。 下面我們根據(jù)橙色系不同屬性鄰近色、同類色、對比色的搭配做不同的舉例分析。 橙色 → 橙色網(wǎng)頁例圖:http:// www.wastelink.co.uk 橙色系分析: 主色調(diào)橙色HSB數(shù)值的H表示色相,顯示的是30度,而30度正是橙色顯示特征最標(biāo)準(zhǔn)的顏色——正橙色。飽和度和亮度同時達(dá)到最高值,因此整個頁面的視覺刺激是極其耀眼強(qiáng)烈的。 這里選取了三種面積相當(dāng)又是整個頁面使用得最少的顏色為點睛色,使頁面生動的同時又運(yùn)用于導(dǎo)航位置,從而達(dá)到突出主題的效果。從HSB數(shù)值上看它們的明度純度相對較低,與明度純度較高的背景正橙色形成鮮明的對比。 通過范圍較大的背景白色、前景圖片灰白色和小細(xì)節(jié)前景白色文字制造出明快氣氛的同時,又呼應(yīng)統(tǒng)一于整個頁面。 輔助色在這里是橙色與白色的過渡色。 結(jié)論: 飽和度與純度很高特性明顯的顏色,在達(dá)到視覺沖擊力的同時,可適當(dāng)采用少許對比色調(diào)和緩和于視覺,從而削弱視覺的疲勞度。 2深橙紅色系 → 深橙紅色網(wǎng)頁例圖:http:// www.matisserestaurant.ca 深橙紅色系分析: 從色相度中可以知道0度為正紅色,30度為正橙色,而主色調(diào)的HSB數(shù)值H顯示22度可知,該深橙紅色是橙色基礎(chǔ)上加入少許鄰近色紅色,整體上降低了明度而得,因為紅色本身較橙色明度低,因此這里橙紅色的明度呈現(xiàn)出較低狀態(tài)。 輔助色選取了明度相對于主色調(diào)更低的三種顏色,前面兩種飽和度都較高,最后一種灰藍(lán)色由于明度較高因此飽和度降低,是主色調(diào)與前面兩種輔助色的協(xié)調(diào)色。 這個頁面背景色運(yùn)用了紋樣,是以目前選取的主色調(diào)顏色和明度較暗的深紅色結(jié)合而得,使得明度稍暗。 數(shù)值上看,主色調(diào)也就是背景色的飽和度較高,但是由于降低了明度,顏色變得較沉穩(wěn)。輔助色RGB數(shù)值顯示,添加了適量的其他顏色,G和B數(shù)值區(qū)別不大,因此飽和度降低,顏色趨于柔和穩(wěn)定。點睛色的加入和提亮,使頁面視覺效果得到強(qiáng)化。 結(jié)論: 前景色通常要較明顯的區(qū)別于背景色,達(dá)到臺前的宣傳目的。當(dāng)飽和度較低的前景色與背景色變化不明顯時,形成的是另外一種柔和統(tǒng)一的效果。 3淺橙色同類色 → 淺橙色同類色網(wǎng)頁例圖: http:// www.talentic.com 淺橙色同類色分析: 從主色調(diào)和輔色調(diào)在HSB數(shù)值H顯示的數(shù)值是36可以看出,該頁面色調(diào)是在同一種橙色的基礎(chǔ)上只在明度上發(fā)生了變化。由于主要色調(diào)是淺橙色,明度越高飽和度越低,頁面上減弱了飽和度較高的橙色特性,整個網(wǎng)頁呈現(xiàn)出柔和自然稍有些發(fā)灰的調(diào)子。 該網(wǎng)頁是在橙色這一個顏色上做不同明度黑白灰色階的柔和變化,屬于單色調(diào),配色非常的單純。色階平穩(wěn),同時存在著不夠醒目的狀態(tài)。白色在這里是起到了拉開主色調(diào)和輔色調(diào)空間距離,增強(qiáng)輔色調(diào)橙色的特性,使整個稍許有些發(fā)灰的頁面明快了不少。但也由于白色屬于非色彩,只在明度上呈最高數(shù)值而無彩度,不能給頁面帶來彩度所具有的鮮活靚麗的感覺,另一方面卻也呈現(xiàn)出質(zhì)樸的感受。 結(jié)論: 前面我們提到過同類色是在同一色相中不同的明度顏色變化。因此這類顏色相對其他類別顏色來說明凈而單純,配色上較容易達(dá)到協(xié)調(diào)統(tǒng)一,但也容易顯得單調(diào)。 初看該頁面配色協(xié)調(diào)舒服,但看多了的確有些單調(diào)乏味的感覺,這也是同類色搭配的特性。同時由于運(yùn)用了漸變色這一調(diào)和方法,該頁面同時占有了前面我們提到的4種色彩中的調(diào)和方法的2種,整個頁面呈現(xiàn)出調(diào)和中的調(diào)和是勿庸置疑的,但也同時顯得有些單調(diào),沒有色彩亮點。 4橙色系鄰近色(黃色+橙色+橙紅色) → 鄰近色橙色網(wǎng)頁例圖:http:// www.tide.com 橙色系鄰近色(黃色+橙色+橙紅色)分析: 雖然第一眼看上去似乎色調(diào)上變化很多,但該網(wǎng)頁的色彩構(gòu)成主要是由黃色和橙色這兩種鄰近色構(gòu)成的,通過不同的明度和純度的變化而得到更為豐富的色階,它們是淺黃色、黃色、橙色、橙紅通過不同的形狀面積,位置變化而得。從HSB數(shù)值中的H可以看出屬于暖色范疇,三個色相的傾向不是很明顯,以至于色彩呈現(xiàn)較規(guī)律、緩和。由于不同數(shù)值的明度表達(dá),純度也做出了不同的數(shù)值變化。 淺色在這里主要起到更調(diào)和主色調(diào)和點睛色的色彩過渡作用。點睛色在這里起到強(qiáng)調(diào)整個頁面的華麗感,增強(qiáng)整個頁面彩度的作用。 結(jié)論: 橙色與鄰近色黃、紅暖色調(diào)的搭配組合,這是一種簡單又安全的方法,視覺韻律上處理得井然有序。整個頁面看起來艷澤華麗、新鮮充滿活力的感覺,符合Tide這一主題所要表達(dá)的目的。 5橙色系對比色(橙色+藍(lán)色) → 對比色橙紅色應(yīng)用網(wǎng)頁例圖: www.rastifilms.com.ar 橙色系對比色(橙色+藍(lán)色)分析 HSB數(shù)值中的H色相顯示主色調(diào)橙紅色為26,我們知道正紅色的H為0,正橙H為30,主色調(diào)橙紅色是往0偏移而得。正藍(lán)色是240,而該點睛色藍(lán)色為192,往綠度偏移,在RGB中的數(shù)值G160也能看出來,因此藍(lán)色的特性不是很強(qiáng)。但由于橙紅色的明度飽和度達(dá)到最高值,因此盡管藍(lán)色不是正藍(lán),但它的特性得到了很大程度的發(fā)揮。 此種橙藍(lán)對比色中的藍(lán)色調(diào)配,比較少見,讓人很容易記住它。而橙紅色的飽和度明度都非常高,刺激度強(qiáng),屬于讓人不可久視的顏色。 介于橙紅色和藍(lán)色之間,與藍(lán)色面積相當(dāng)?shù)陌咨鸬秸{(diào)和對比色橙紅與藍(lán)色之間關(guān)系的作用。 結(jié)論: 這組對比色通過使用的面積位置的不同來反映主次之間的關(guān)系。對比色能相互強(qiáng)烈的突出色彩特性。這組對比色屬于是非常能突顯個性的顏色。 6橙色系低對比度(橙色+綠色) → 橙色低對比應(yīng)用網(wǎng)頁例圖:http:// www.colourpixel.com 橙色系低對比度(橙色+綠色)分析: 如果不看數(shù)值參數(shù),剛一開始看會以為這是一組純度較低的顏色。HSB數(shù)值H顯示主色調(diào)為正橙色,而黃綠色的明度較低且色相傾向不夠明確,加之背景有少許的暗橙色紋樣,整個頁面沒有高亮度白色點綴襯托,使得純度的彩度不夠確切,就很容易造成了該頁面純度較低的錯覺。 整個頁面最亮的顏色除了“書本”最亮色淺黃色外,就是點睛色黃色了。我們知道黃色是所有彩度色中明度最高的顏色,不同明度純度的黃色系讓整個頁面明亮了不少,它是整個頁面明度色階的最高調(diào)。 黃綠色的出現(xiàn),讓本只有鄰近色的橙色系列多了些內(nèi)容,頁面配色豐富不少、視覺節(jié)奏多了些變化。 結(jié)論: 這類顏色的組合隨著不同色階明度的變暗,整個頁面沒有白色襯托,制造出另外一種古典的環(huán)境氛圍,有如娓娓道來的故事場景,也是一種不錯的主題配色方法。 本頁面的配色設(shè)計亮點是——無白色設(shè)計。 7橙色系高純度高對比度(橙紅色+綠色) → 橙色高純度對比應(yīng)用網(wǎng)頁例圖: www.aliveis.com 橙色系高純度高對比度(橙紅色+綠色)分析: 與上組的橙色綠色相比,這組顏色強(qiáng)烈而刺激,色彩傾向無疑明確了很多。主色調(diào)橙紅色往紅色傾向,而紅色的對比色是綠色,因此整組顏色有強(qiáng)烈的對比效果。從HSB數(shù)值H上看,除了藍(lán)色外,其余幾種顏色純度都非常高,加上又是近于紅綠對比色。頁面的刺激強(qiáng)度是可想而知的強(qiáng)烈。 黃色是中間色,起到過渡對比色作用,在這組色里屬于調(diào)和色。藍(lán)色出現(xiàn)在產(chǎn)品圖案上,引導(dǎo)主次關(guān)系,增強(qiáng)視覺的注目點。 結(jié)論: 橙色是注目容易引起食欲的顏色,在這里得到了較充分的應(yīng)用。 非色彩的白色和黑色在這里起到了非常重要的作用,拉大了色彩色階空間的距離。白色讓整個色調(diào)組合更加明快,而黑色增添色彩的厚重質(zhì)感——強(qiáng)烈中的強(qiáng)烈,增強(qiáng)對產(chǎn)品的視覺刺激。 本部分小節(jié): ● 橙色在HSB數(shù)值的H中為30度,是正橙色。橙色是一個非常響亮注目的顏色。橙色的對比色是藍(lán)色,當(dāng)這兩種顏色彩度傾向越明確,對比強(qiáng)度就越大。但我們也看到,除了正宗的對比色橙藍(lán)色外,橙色和綠色隨著純度的升高,達(dá)到的對比效果也很強(qiáng)烈。 在今后的配色設(shè)計中可以多些不同明度純度冷暖對比的嘗試,會有意想不到的收獲。 ● 白色是所有網(wǎng)頁設(shè)計中屬于較通用的顏色,它容易突出彩度的特性,明快于整個頁面,當(dāng)一個頁面設(shè)計沒有使用白色時,空間感覺減弱,容易造成彩度不夠明確、頁面有些沉悶等反應(yīng),然而又相對來說增添頁面的厚重感覺,制造另外一種環(huán)境氣氛。黑色在色調(diào)組合的輔助角色里容易制造出厚重的色彩效果。 從這里我們又一次感受到色彩的相對性,即沒有絕對的配色組合,它們總是根據(jù)搭配不同的色彩組合或強(qiáng)或弱的表現(xiàn)出什么樣的特性。 ● 同類色、鄰近色的組合,是非常調(diào)和的色彩組合,即使減少了色相的數(shù)量,一樣也可以調(diào)配出很多不同的調(diào)和色彩。對于初學(xué)者來說,這是一個非常實用的配色方法。 網(wǎng)頁設(shè)計配色應(yīng)用實例剖析——黃色系黃色是陽光的色彩,具有活潑與輕快的特點,給人十分年輕的感覺。象征光明、希望、高貴、愉快。淺黃色表示柔弱,灰黃色表示病態(tài)。它的亮度最高,和其他顏色配合很活潑,有溫曖感,具有快樂、希望、智慧和輕快的個性,有希望與功名等象征意義。黃色也代表著土地、象征著權(quán)力,并且還具有神秘的宗教色彩。黃色的性格冷漠、高傲、敏感、具有擴(kuò)張和不安寧的視覺印象。 淺黃色系明朗、愉快、希望、發(fā)展,它的雅致,清爽屬性,較適合用于女性及化妝品類網(wǎng)站。 中黃色有崇高,尊貴,輝煌、注意、擴(kuò)張的心理感受。 深黃色給人高貴、溫和、內(nèi)斂、穩(wěn)重的心理感受。 下面我們根據(jù)黃色系不同屬性鄰近色、同類色的高純度低純度色彩搭配做不同的舉例分析。 → 黃色系網(wǎng)頁例圖:www.bernhardwolff.com
2中黃色、黃綠色調(diào) 中黃色系分析: 背景中黃色上點綴多種艷度較高的顏色,都是屬于跳躍的顏色,渲染整個網(wǎng)站的熱鬧環(huán)境氣氛,符合該網(wǎng)站的設(shè)計主題。 從HSB數(shù)值上看,該中黃色的明度和飽和度呈最高值,屬于明亮耀眼的顏色。輔助色是黃綠色和紅色,黃綠色在中黃背景下呈冷色調(diào),輕快單薄的亮色;紅色的HSB數(shù)值H色相上看是正紅色,明度稍低,這里屬于厚重沉穩(wěn)的顏色,在中黃色背景下呈現(xiàn)暖色調(diào);背景中黃色在黃綠色和紅色兩者中這時呈中間色,是很好的整體頁面視覺過渡色。 加之商品圖片多種亮艷的色澤混合在同一頁面上,點睛色白色在這里起到了調(diào)和多種顏色的作用,減少、透氣于整個頁面的多種配色噪音。 結(jié)論: 當(dāng)背景色起到中間色的作用時,頁面少量冷暖色彩搭配較容易調(diào)和。 通常商品網(wǎng)站志在渲染熱鬧氣氛,比較適合活潑跳躍、色彩絢麗的配色方案,但色彩的調(diào)和難度較大。 → 黃綠色調(diào)網(wǎng)頁例圖: www.jpggrupo.com.ar 黃綠色調(diào)分析: 主色調(diào)為黃綠色,單純而看,黃綠色是通常的暖色的起始色、色彩中亮度最高的黃色與冷色的起始色、綠色相結(jié)合而得,因此該顏色看起來非常明快清新。 處于輔助色的非色彩黑色,中間的點綴色是主色調(diào)黃綠色,很容易讓人一時以為該顏色就是點睛色。實際主色調(diào)黃綠色的明度非常高,飽和度這時也很高,在明度最低的黑色襯映下就異常顯眼。 背景色使用略有些漸變的效果,正是黃綠和黑(灰)顏色的柔和過渡,頁面調(diào)和。 點睛色在這里混色較多,RGB、HSB數(shù)值差距都不大,因此顏色偏灰色階,仔細(xì)分析是黃綠色與少許黑色混合而得,起到了調(diào)和背景色與輔助色明度差異過大的作用。 結(jié)論: 點睛色可以是少許耀眼的顏色,也可以是少許協(xié)調(diào)于視覺的混合灰色,無論是耀眼的顏色還是謙遜沉穩(wěn)的灰色,都是不可缺少的角色,有著不可替代的作用。 整個頁面配色較單純,只有三種色,非色彩來說分別起到黑(輔助黑)白(主色黃綠)灰(點睛混合色)的作用,所以頁面配色較有層次感,并不顯得單調(diào)。 3黃色鄰近色、高純度黃色鄰近色 黃色鄰近色配色(黃色+紅色)分析: 選取的上圖三組色里HSB數(shù)值的B明度雖然都有些變化,但S飽和度分毫沒有受到影響,仍都呈最高值100%,因此頁面配色異常耀眼。好在其間有少量不同明度飽和度的紅色系色塊做壓制,頁面顯得沉穩(wěn)許多,頁面色彩層次也豐富了許多,塊面交織設(shè)計富有節(jié)奏韻律美,卻也有雀躍的感覺。 頁面照片人物也經(jīng)過了雙色調(diào)處理,與頁面色彩風(fēng)格一致。 整個頁面屬于明暗反差較大的色調(diào),所以頁面響亮明快,極賦視覺沖擊力、感染力。 結(jié)論: 耀眼的顏色有深色塊壓制,也是很好的調(diào)和方法。 該頁面里的不少小色塊混合了暗灰色,因此頁面飽和度刺激程度得到少許降低并調(diào)和。 同類色系、類似色系不同純度明度的深淺變化搭配,增添現(xiàn)代美感。 → 高純度黃色鄰近色應(yīng)用網(wǎng)頁例圖:www.mudbubble.com 高純度黃色鄰近色配色(黃色+紅色)分析: 全頁選取的幾個色彩組合是高純度高明度的鄰近色正黃、淡黃(這里的淡黃色不是指淺黃色,而是色彩顏料色里的稱呼。)、中黃及正紅色。 我們知道,黃色是色彩系里明度最高的耀眼色,HSB數(shù)值H色相60度是正黃色,特性越高明度越高。H色相度往60度前是接近紅色,而紅色明度相較于黃色低,背景色HSB數(shù)值H色相為48度,往紅色靠近,因此色度較深,呈現(xiàn)為中黃色。使用中黃背景正是烘托突出前景的淡黃色。淡黃色的前景上設(shè)計少許中黃色帶進(jìn)入,頁面的色彩層次感生動了不少。 另一個輔助色紅色HSB數(shù)值的H色相是0度,顯示正紅色且高純度高亮度,放在最顯眼的標(biāo)志廣告區(qū)域,實現(xiàn)視覺引導(dǎo)作用,主次感增強(qiáng)了。 白色也是輔助色三色之一,在頂部面積較大的使用,使整個頁面的純度緩和了許多,起到提亮并拉開空間的作用。 點睛色用于導(dǎo)航欄,提示導(dǎo)航區(qū)域的醒目與重要性。 結(jié)論: 高純度高明度的顏色調(diào)子耀眼響亮,通常對視覺的刺激程度較大。 鄰近色由正黃到最后的正紅色是色輪表的協(xié)調(diào)過渡色,因此頁面調(diào)和。 鄰近色與同類色一樣,是調(diào)和色,但較同類色更生動更多變化。 4黃色低純度配色 低純度黃色配色(黃色+藍(lán)色)分析: 該頁面是屬于純度較低的多組配色頁面,配色難度似乎較大,但是按主色調(diào)、輔助色、點睛色來細(xì)細(xì)分析就會發(fā)現(xiàn)容易多了。 主色調(diào)的中黃色,從RGB數(shù)值B明度48來看,提高了明度,RGB數(shù)值的變化HSB也相應(yīng)變化,該色調(diào)純度降低,黃色的耀眼特性相應(yīng)緩和。 該頁面輔助色比較多,這里選了主要的三種淺黃、淺藍(lán)、棕紅色,明度純度不同的變化來分析。淺黃色的RGB三個數(shù)值接近,因此呈現(xiàn)偏灰的柔和狀態(tài)。正藍(lán)色的RGB數(shù)值R為0,G為255,B為255,該藍(lán)色RGB數(shù)值上看,混合了R紅色11,G的綠色數(shù)值較低,B藍(lán)色的數(shù)值較高,因此飽和度降低,顏色呈淺色調(diào)。棕紅色的RGB的三數(shù)值上看,R的數(shù)值最高為124,加入了對比色G綠色67,因此顏色變暗發(fā)烏,調(diào)入了適量B藍(lán)色24,因此該顏色飽和度亮度降低,也是該頁面沉穩(wěn)的主要色調(diào),牽制艷度較高的幾種顏色。 點睛色的HSB數(shù)值H色相為356度,幾乎呈正紅色,只是調(diào)入了少許B藍(lán)色18,因此顏色在明度上稍偏暗。另一點睛白色的作用除了提亮整個頁面,同時也突出標(biāo)志圖像。 標(biāo)志是紅色,下面的綠色是紅色的對比色,目的是突出標(biāo)志的作用,同時也是黃色與藍(lán)色的中間視覺過渡色。 結(jié)論: 多種輔助色份量相當(dāng)冷暖搭配時,有飽和度稍低的主色調(diào)牢牢把握住,整個頁面容易調(diào)和。 由于頁面顏色較豐富,點睛色在這里起到拉開各個色彩層次的作用,明確主次角色。 本部分小節(jié): ● 黃色是色彩系里明度最高的耀眼顏色,尤其是HSB數(shù)值H色相為60度正黃色時,它的特性越明顯。由于黃色的特性,在頁面配色的時候可適當(dāng)添加明度較深的顏色,色階層拉開,并起到協(xié)調(diào)刺眼的艷度作用。黃色飽和度、明度的不同變化傳達(dá)不同的意義和作用。 ● 無論是高純度低純度還是多色彩的頁面配色,白色起到關(guān)鍵的作用。 ● 點睛色不一定就是非常顯眼的顏色,也有起到調(diào)和整體頁面配色的作用。 ● 中間色通常被大面積的使用為主色調(diào)、輔助色,是調(diào)和輔助色(有可能是同時幾種)與點睛色(有可能是幾種)的色彩,是調(diào)和色、調(diào)和方法的關(guān)鍵。 網(wǎng)頁設(shè)計配色應(yīng)用實例剖析——綠色系 綠色在黃色和藍(lán)色(冷暖)之間,屬于較中庸的顏色,這樣使得綠色的性格最為平和、安穩(wěn)、大度、寬容。是一種柔順、恬靜、滿足、優(yōu)美、受歡迎之色。也是網(wǎng)頁中使用最為廣泛的顏色之一。 綠色系分析: 從上圖的主色調(diào)、輔色調(diào)HSB模式的數(shù)值可看出,這兩中顏色只是在明度上有區(qū)別,其顯示的色相與飽和度是一樣的。正綠色是120度,這兩種顏色從RGB數(shù)值上看,都不同程度的混合了其他少許顏色,因此離正綠色稍有些偏差。由于綠色本身的特性,所以整個網(wǎng)頁看起來很安穩(wěn)舒適。 輔助色只在明度上降低,讓頁面多了些層次感、空間感。 白色塊面使得綠色的特性發(fā)揮到最好的狀態(tài)并增強(qiáng)了視覺節(jié)奏感。 點睛色恰到好處的體現(xiàn)出了"點睛"這一妙筆,極盡誘惑力,整個頁面頓時生動提神起來,增強(qiáng)了頁面主題的表達(dá)力。 結(jié)論: 主、輔色調(diào)是屬于同類色綠色系,通過不同明度的變化,能較遞增緩和變化同時卻也較明顯的體現(xiàn)出頁面的色彩層次感來。如果不是通過數(shù)值來分析判斷,可能會有些朋友憑經(jīng)驗判斷,容易誤認(rèn)為這兩種顏色除了明度外有可能純度會有所不同,這時候適當(dāng)?shù)氖褂脭?shù)值模式會很容易得到正確的結(jié)論的。 整個頁面配色很少:最大色塊的翠綠,第二面積的白色,第三面積的深綠色,但得到的效果卻是強(qiáng)烈的、顯眼的,達(dá)到充分展現(xiàn)產(chǎn)品主題的目的。 深綠色給人茂盛、健康、成熟、穩(wěn)重、生命、開闊的心理感受。 2綠色高純度網(wǎng)頁例圖分析
綠色系分析: (高純度配色:綠色+對比色組合) HSB數(shù)值H顯示60度為正黃色,該主、輔色調(diào)只向綠色傾斜了一丁點--H為75度。大面積明度稍低的黃綠色為主要色調(diào),飽和度卻非常高,達(dá)到了100%,輔助色使用了提高明度的嫩綠色和白色,這兩種輔色除了增加頁面的層次感的同時,還能讓整個頁面配色有透亮的感覺,增強(qiáng)了綠色的特性。背景深褐色無疑把前景的所有純色烘托得都耀眼于舞臺上。 該頁面有兩組小小的對比色,一組是黃綠與橙紅色,一組是橙黃色與天藍(lán)色,這兩組配色嚴(yán)格的來說不算對比色,因為色彩多少有些偏差。雖然它們的飽和度降低,但在這個頁面中足以構(gòu)成了最響亮的色調(diào),把整個頁面烘托得非?;钴S、鮮明。 結(jié)論: 主、輔色調(diào)黃綠色大面積使用并不刺目,反而使得頁面看起來很有朝氣、活力。 適當(dāng)運(yùn)用不同純度的不是相當(dāng)嚴(yán)格意義上的對比色系組合時,通常能起到的主要作用是主次關(guān)系明確。不"標(biāo)準(zhǔn)"的對比色系對比特性雖然減弱,頁面色彩看起來容易協(xié)調(diào)、柔和,但一樣能突出主題。 3同類色淺綠色網(wǎng)頁例圖分析
綠色系分析:(同類色淺綠色) 主色調(diào)綠色屬性是明度很高的淺綠色,前面提到過,通常情況下明度高飽和度就降低,飽和度低頁面色彩度就降低,除非顏色本身有自己的特性,加上大面積的輔助色白色,整個頁面看起來很清淡、柔和、寧靜,甚至有溫馨的感覺。 頁面中使用了漸變的淺綠色,使得整個頁面視覺上更加柔和舒適。 盡管點睛色只在主要標(biāo)志上出現(xiàn),按鈕也只有少許一點,但也給整個頁面的色彩帶來些亮筆。尤其是紅色的HSB模式的H數(shù)值顯示顏色接近于正紅色,飽和度達(dá)到最高值。另一個點睛色中黃色,在頁面視覺上呈綠色與紅色這一組對比色起到緩和視覺的作用。因為在色輪表上,黃色正是在綠色和紅色之間的過渡色。 結(jié)論: 淺綠色系有優(yōu)雅、休息、安全、和睦、寧靜、柔和的感覺。 漸變的效果更能加深這種印象。但頁面配色上淺色過多時,整個頁面容易呈現(xiàn)發(fā)"灰"的感受,這就需要適量的添加純度稍高的顏色例如左下角的輔助色綠色塊,適當(dāng)?shù)孽r艷的點睛都能很好的解決這一問題。 4綠色弱對比網(wǎng)頁例圖分析
綠色系分析:(黃綠色+弱對比) 從HSB模式的數(shù)值上看,主色調(diào)是接近于黃色的基礎(chǔ)上加入了少許綠色在里面,飽和度和明度降低,色彩看起來較柔和。輔色調(diào)墨綠色的綠色的傾向稍高,飽和度也較高,只是明度降低,該色看起來踏實沉穩(wěn)。 點睛色紅色H數(shù)值為零度,呈正紅色,但是該顏色飽和度和明度降低,而紅色本身的色度比黃綠色要暗不少,因此顏色穩(wěn)重。另一點睛色藍(lán)綠色,明度飽和度都很低,在頁面配色里似乎沒有點睛感覺,更多的是呈輔助狀態(tài)。 結(jié)論: 主色調(diào)是相對比較鮮亮的顏色,而輔助色和點睛色是屬于比較沉穩(wěn)的顏色,頁面通過大小色塊的對比提高視覺的反差力度,增強(qiáng)頁面的感染力。 由于整個頁面的飽和度整體稍微降低,因此該頁面配色較協(xié)調(diào)、緩和。 5同類綠色+多種點睛色例圖分析
綠色系分析:(綠色配色:同類綠色+多種點睛色) 主要色調(diào)HSB模式H數(shù)值顯示75度,依舊是色輪表里傾向于黃色區(qū)域方位邊緣的綠色,呈現(xiàn)出的黃綠色調(diào)。輔色調(diào)在明度上有些提亮,與主色調(diào)形成較強(qiáng)的對比。 點睛色里所使用的對比色組合有兩組,紅色與綠色,藍(lán)色與橙黃色,其中黃色是介于暖色(橙黃、紅色)和冷色(綠色、藍(lán)色)的過渡色也是調(diào)和色。 結(jié)論: 通過上面的分析大家可以看到,該網(wǎng)頁的配色不少,而且還有兩組對比色在內(nèi),但是頁面配色也很協(xié)調(diào)。原因之一,從下面抽取的色塊可以看出來,是一個過渡柔和的色輪表:以黃色為中界一邊是較淺的黃綠到綠色再到藍(lán)色,另一邊是橙黃再到紅色。原因之二,點睛色畢竟是扮演著點睛色的角色,有主色調(diào)和輔色調(diào)大面積的控制,即便再多些點睛色也不至于很快干擾到頁面的整體配色。 整個頁面保證了協(xié)調(diào)、不凌亂的步調(diào),但是又能把商業(yè)網(wǎng)站的熱鬧氛圍體現(xiàn)得很好的渲染。此種配色方法值得我們學(xué)習(xí)借鑒。 6綠色鄰近色應(yīng)用網(wǎng)頁例圖分析
綠色系分析:(鄰近色配色:綠色+藍(lán)色) 全頁使用的主要色調(diào)基本上是屬于明度較高飽和度較低的顏色,其中還使用了漸變色緩和的過渡,因此頁面看起來舒服協(xié)調(diào)。 主色調(diào)是飽和度較高的翠綠色運(yùn)用于背景色,幾乎是調(diào)節(jié)于整個頁面的關(guān)鍵色。如果沒有這一背景色塊,整個頁面容易發(fā)灰。還有右邊的粉綠大塊面積稍多,有些灰的感覺,好在前景的文章使用了色度明度稍深的藍(lán)色壓住,稍顯好些,關(guān)鍵還是有白色的箭頭很好的把粉綠和藍(lán)色文字的色階拉開了距離。左邊的照片清晰且純度較高也對整個頁面配色起到一定的調(diào)節(jié)作用。 點睛色主要是標(biāo)志的顏色,如果可以忽略不計,頁面配色更趨于平淡。 結(jié)論: 明度較高飽和度較低的顏色,如果沒有明度較深飽和度較高的顏色進(jìn)行勾勒或者點綴,這個頁面配色看起來容易發(fā)灰。 7綠色對比色網(wǎng)頁例圖分析
綠色系分析:(對比色配色:綠色+紅色) 主色調(diào)是有點黃色傾向的綠色,從HSB數(shù)值上可以看到H為98度,綠色特性較明顯了。 輔助色則是三個淺色系,起到調(diào)和整個頁面色彩的作用。粉紅和粉綠色分別取的是頁面綠色紅色通過提高明度而得,因此整個頁面色彩前后呼應(yīng)、配色調(diào)和。 點睛色紅色的HBS模式H數(shù)值351度,在色輪表上偏向于紫色方位,因此傾向于冷紅色,色度上稍有些刺目和艷麗。 主色調(diào)綠色和點睛色紅色所放置的位置,讓頁面導(dǎo)航區(qū)域和內(nèi)容區(qū)域視覺引導(dǎo)較為分明:主色調(diào)綠色的設(shè)計亮點既用于導(dǎo)航又很流暢自然的融合到背景,渾然一體;這里尤其是點睛色紅色放置于背景的處理很獨(dú)到,烘托突出于前景內(nèi)容,在眾多網(wǎng)頁設(shè)計中并不多見。 結(jié)論: 整個頁面的配色取色于標(biāo)志色,量身定做的感覺。 適當(dāng)?shù)倪\(yùn)用對比色有強(qiáng)調(diào)的感覺,但頁面配色處理上并不強(qiáng)烈、耀眼,因為使用了白色及其相應(yīng)的提高明度的粉色做視覺的緩和處理。 本部分小節(jié): ● 綠色是緩和健康的顏色, HSB數(shù)值H色相為120度時是正綠色。大家通過以上的網(wǎng)頁實例可以看到,偏向于黃色方位的綠色運(yùn)用得最多,也就更受到大眾的歡迎。純正的正綠色在視覺感受上可能稍微顯得有些色度較低的生硬,配色難度稍大。不同的黃綠色飽和度、明度的不同變化可以表達(dá)不同主題的頁面效果。 ● 點睛色可以是幾種,也可以是不同對比色的組合,有的起到豐富并活躍頁面配色的視覺節(jié)奏,有的起到調(diào)和整體頁面配色的作用。 輔助色通常是同類色系或者鄰近色系,起到輔助并烘托主色調(diào)的作用。輔色調(diào)和主色調(diào)分別在不同的頁面做為唯一高純度色的時候,能夠起到挽救于整個頁面發(fā)灰的作用。 ● 當(dāng)整個頁面配色明度太高色度降低時候,頁面容易呈現(xiàn)發(fā)灰的感覺,可以適當(dāng)?shù)氖褂蒙僭S純度較高或者明度較低的色系來加以改善。 網(wǎng)頁設(shè)計配色應(yīng)用實例剖析——藍(lán)色系 藍(lán)色是色彩中比較沉靜的顏色。象征著永恒與深邃、高遠(yuǎn)與博大、壯闊與浩渺,是令人心境暢快的顏色。
藍(lán)色的樸實、穩(wěn)重、內(nèi)向性格,襯托那些性格活躍、具有較強(qiáng)擴(kuò)張力的色彩,運(yùn)用對比手法,同時也活躍頁面。另一方面又有消極、冷淡、保守等意味。藍(lán)色與紅、黃等色運(yùn)用得當(dāng),能構(gòu)成和諧的對比調(diào)和關(guān)系。 藍(lán)色是冷色調(diào)最典型的代表色,是網(wǎng)站設(shè)計中運(yùn)用得最多的顏色,也是許多人鐘愛的顏色。 下面我們根據(jù)藍(lán)色系不同屬性的同類色、鄰近色、高純度對比、相對對比色等色彩搭配做不同的舉例分析。 → 藍(lán)色高純度對比網(wǎng)頁例圖:http://www.
藍(lán)色系分析:(高純度對比:藍(lán)色+玫瑰色) 結(jié)論:響亮、強(qiáng)烈刺激的詞語似乎都適用于上圖頁面,源于高純度烘托、微妙的冷暖變化配色上,體現(xiàn)出現(xiàn)代都市張揚(yáng)時尚的氣息。白色塊面的線型使得這種高純度高強(qiáng)度的配色變得響亮卻也緩和。 2同類色淺藍(lán)色 → 藍(lán)色淺藍(lán)色網(wǎng)頁例圖:http://www./start.html
藍(lán)色系分析: (同類色:淺藍(lán)色) 結(jié)論:
3深藍(lán)色
藍(lán)色系分析:(深藍(lán)色) 結(jié)論: 4藍(lán)色純度對比 → 藍(lán)色純度對比網(wǎng)頁例圖:http://www.
藍(lán)色系分析:(純度對比) 結(jié)論: 5藍(lán)色鄰近配色:藍(lán)色+綠色 → 藍(lán)色鄰近色網(wǎng)頁例圖:http://www.
藍(lán)色系分析:(藍(lán)色鄰近配色:藍(lán)色+綠色) 結(jié)論: 6藍(lán)色系強(qiáng)對比:藍(lán)色+紅色 → 藍(lán)色強(qiáng)對比網(wǎng)頁例圖:http://www.
藍(lán)色系強(qiáng)對比:藍(lán)色+紅色 結(jié)論: 7藍(lán)色同類色對比:藍(lán)色+暖色 → 藍(lán)色對比網(wǎng)頁例圖:http://www.
藍(lán)色同類色對比:藍(lán)色+暖色 結(jié)論: 本部分小節(jié): ● HSB數(shù)值H色相為240度時是正藍(lán)色,它的特性這個時候也就揮灑得越明顯。從以上不同屬性的藍(lán)色頁面色調(diào)上能看到,不同色相、飽和度、明度的藍(lán)色本身色彩特性表現(xiàn)得不是非常特殊,這也是低調(diào)沉穩(wěn)的藍(lán)色所具備的特征之一。關(guān)鍵在于該種藍(lán)色都與哪種哪幾種顏色襯托、對比的。 ● 冷色系以藍(lán)色為最典型的代表,因此就產(chǎn)生了廣義的相對暖色,例如當(dāng)與玫瑰紫色做對比時,玫瑰紫就呈現(xiàn)出微妙的暖色,當(dāng)與綠色做對比色,綠色就呈出了相對的暖色,但是此種特性呈現(xiàn)得非常的微弱,應(yīng)根據(jù)不同的主題頁面做具體分析。 ● 當(dāng)在藍(lán)色色相、明度上暗色亮色非常明朗的情況下,可以考慮添加中間色,減弱可能造成的單調(diào)感,豐富兩極色階的過渡,調(diào)和頁面的視覺感受。 ● 同一種RGB、HSB數(shù)值的藍(lán)色與不同的顏色搭配時,所反映出的特性與主題是不一樣的。例如與同類色(根據(jù)色相明度純度面積等同類色里得到很多種不同的藍(lán)色),與鄰近色(根據(jù)色相明度純度面積等衍生出更多顏色),與對比色(根據(jù)色相明度純度面積等產(chǎn)生出的廣義對比狹義對比)…… 應(yīng)多多思考、多做嘗試。
網(wǎng)頁設(shè)計配色應(yīng)用實例剖析——紫色系 紫色是一種在自然界中比較少見的顏色。象征著女性化,代表著高貴和奢華、優(yōu)雅與魅力,也象征著神秘與莊重、神圣和浪漫。另一方面又有孤獨(dú)等意味。紫色在西方宗教世界中是一種代表尊貴的顏色,大主教身穿的教袍便采用了紫色。 紫色的明度在有彩色的色度中是最低的。紫色的低明度給人一種沉悶、神秘的感覺。在紫色中紅的成份較多時,顯得華麗和諧。紫色中加入少量的黑,沉重、傷感、恐怖、莊嚴(yán)的感覺。紫色中加入白,變得優(yōu)雅、嬌氣,并充滿女性的魅力。 紫色通常用于以女性為對象或以藝術(shù)作品介紹為主的站點,但很多大公司的站點中也喜歡使用包含神秘色彩的紫色,但都很少做大面積使用。 不同色調(diào)的紫色可以營造非常濃郁的女性化氣息,在白色的背景色和灰色的突出顏色的襯托下,紫色可以顯示出更大的魅力。 下面我們根據(jù)紫色系不同屬性的鄰近色、高純度低純度配色、相對對比色等色彩搭配做不同的舉例分析。 → 紫色高純度網(wǎng)頁例圖:http:// www.everythinggirl.com 紫色系分析:(高純度對比:同類紫色+同類對比色) 紫色的HSB數(shù)值H色相為300度時是正紫色。上圖的HSB模式S數(shù)值顯示,上組顏色飽和度基本都比較高,加上部分較高的明度組合,使該頁面異常奢華艷麗。 輔色調(diào)之一的黃色是紫色強(qiáng)度最高的對比色,主、輔色面積的大小不同是形成視覺沖擊力最大的主要原因。值得一提的是右下腳的淺藍(lán)色的運(yùn)用,它在整個頁面配色上是很謙遜的角色,但卻既突出上面的文字內(nèi)容,又不張揚(yáng)的壓抑住其他顏色的配色,屬于豐富于頁面的輔助作用。如果把它試換成別的顏色似乎還是沒有這個淺藍(lán)色效果好。 另一輔助色淺紫紅色又稱粉紅色,粉紅色主要用于包含少女在內(nèi)的女性站點。因為從明亮到淺白色調(diào)的粉紅色能夠表現(xiàn)出可愛、乖巧的感覺,這里只做少量運(yùn)用。 其他點睛色使用得雖多但面積很小,主要是主色調(diào)紫色附近的過渡色,例如群青、青蓮、玫瑰、紅色等點綴,閃亮耀眼,增強(qiáng)頁面的視覺感染力,有渲染出華麗凸顯現(xiàn)代氣息的作用。 結(jié)論: 紫色結(jié)合紅色的紫紅色是非常女性化的顏色,它給人的感覺通常都是浪漫、柔和、華麗、高貴優(yōu)雅,特別是粉紅色可以說是女性化的代表顏色。高彩度的紫紅色可以表現(xiàn)出超凡的華麗,而低彩度的粉紅色可以表現(xiàn)出高雅的氣質(zhì)。 紫紅色并不能隨意在所有的站點中使用,但使用恰當(dāng)?shù)淖霞t色會給人留下深刻的印象。高彩度的紫色和粉紅色之間的搭配通常都能得到較好的效果。 該頁面具有非常強(qiáng)烈的現(xiàn)代奢華感。時尚張揚(yáng)的配色組合,符合該頁面主題所要表達(dá)的環(huán)境,讓人容易記住它。 2淺紫色 紫色系分析:(淺紫色) 該頁面使用特性最高的紫色提亮為100%高明度的主色調(diào),很容易抓住人們的視線成為聚焦點,是非常大膽又時尚的配色。 輔色調(diào)則是使用冷色系代表的深藍(lán)色,明度較低。主要是為了烘托左邊導(dǎo)航菜單,凸顯上面的內(nèi)容信息,由于人們對網(wǎng)頁已然形成了視覺慣性,也起到了很好的視覺引導(dǎo)作用。 主、輔色的搭配運(yùn)用構(gòu)成了較強(qiáng)烈的視覺對比效果。 另一輔色調(diào)淺藍(lán)色,在主色調(diào)淺紫色的烘托下呈現(xiàn)稚嫩的感受,里面的白色塊起到淺紫的背景和淺藍(lán)色調(diào)和、明快的作用。 點睛色的使用實際有不少,這里只選幾種起到主要作用的顏色做舉例分析。中黃色運(yùn)用得很珍貴,只在左上區(qū)域出現(xiàn),旨在突出主題文字的效果。其他配色主要是根據(jù)左下文字字母而來,紅和綠色出現(xiàn)在頁面的淺紫色較為寬敞的位置,小范圍的做色彩對比效果。其他點睛色則極少的零星分布,既調(diào)和呼應(yīng)又起到活躍于頁面的角色作用,以上這些都是點綴和渲染頁面氣氛不可缺少的配色元素。 結(jié)論: 在紫色中加入白色,可使紫色略顯沉悶的特征消失,變得清秀、優(yōu)雅、嬌氣,并充滿女性的魅力。 白色、粉紫色、天藍(lán)色的顏色搭配,是比較稚嫩的配色,同時也是最受少女歡迎的配色方案,這里運(yùn)用也較得體。 使用高明度高飽和的主色調(diào)非常個性,讓人很容易記住它,但是色彩都有兩面性,此種顏色略顯驕躁感過于刺激視覺,不易于長時間的注目瀏覽。 3深紫色 紫色系分析:(深紫色) 以略有漸變色為背景主色調(diào),漸變色是調(diào)和方法之一,起到增加層次感空間感柔和視覺的作用。背景色左上最亮處的特殊處理,主要起到突出了標(biāo)志的作用。 從HSB模式H色相數(shù)值上看到輔助色依舊以主色調(diào)延伸而成,僅在明度上做了些變化,屬于同類色的調(diào)和色系。 點睛色皆選用了色彩色系中明度最高的黃色及相近色黃綠、玫瑰紅。黃色和黃綠色真就點睛之筆——黃色是紫色的對比色,深紫色背景上的高明度黃色被襯托得異常跳躍。黃綠色既和諧又增添了頁面配色的高強(qiáng)度節(jié)奏。玫瑰紅在這里是最溫暖的顏色,協(xié)調(diào)且增強(qiáng)了頁面配色的層次感。根據(jù)各顏色的特質(zhì),在視覺上成功做了先后次序的引導(dǎo)。白色雖是非色彩,但也起到拉大色彩之間色階層次的作用,增強(qiáng)了頁面空間感,也使以上配色更調(diào)和。 結(jié)論: 深紫色給人華貴、深遠(yuǎn)、神秘、孤寂、珍貴的心理感受。較暗色調(diào)的紫色可以表現(xiàn)出成熟沉穩(wěn)的感覺,創(chuàng)造、謎、忠誠、神秘、稀有。 整個頁面配色尤其是點睛色的妙用,使得整個頁面非常新穎別致,極賦現(xiàn)代都市氣息。 根據(jù)面積的大小對比,適當(dāng)?shù)膶Ρ壬茏岉撁嬗谢钴S、明快的氣氛。 4紫色配色:紫色+綠色 紫色系分析:(紫色配色:紫色+綠色) 綠色被譽(yù)為紫色的絕配色。主色調(diào)是飽和度降低明度較低的紫色,輔色調(diào)是色彩明度較高的草綠色及沉穩(wěn)的深藍(lán)色。 點睛色雖然被稱為點睛色,但在整個頁面中使用的面積極小,與其他色系所占的比重來看,這兩種點睛色小到幾乎給忽略。盡管從HSB模式數(shù)值上看到,橙黃色為高純度高明度色,只在主題文字上有些體現(xiàn)。另一藍(lán)綠色所處的位置在顯眼的網(wǎng)站名稱后方,謙遜程度幾乎不為人們注意到,盡管它才是網(wǎng)站背后所要表達(dá)的真正主題。 草綠色和深藍(lán)色把大面積的白色框起來,襯托起前景,但也許由于白色面積使用過大,為了不至于讓它太突出,在白色的背景上點綴較淺的紋樣來降低這種感覺。 背景色紫色由于色彩特質(zhì)明度較低的緣故,與明度較高的輔助色草綠色形成較明快的效果。 結(jié)論: 點睛色根據(jù)頁面所占的面積因素,也有的僅起到輔助的作用。相反草綠色或許由于色彩特質(zhì)的原因,這里起到比較強(qiáng)調(diào)的強(qiáng)勢目的,在該頁面配色里起到非常關(guān)鍵的作用。 5紫色鄰近色配色:紫色+紫紅色 紫色系分析:(紫色鄰近色配色:紫色+紫紅色) 嚴(yán)格來說,該頁面配色的色組和紫色關(guān)聯(lián)上稍有些偏移,之所以做為案例選擇,是因為整體配色上依舊給人有紫色系配色的錯覺。 HSB的H色相數(shù)值上顯示的260來看,正紫色數(shù)值為300,主色調(diào)整個往藍(lán)色系稍偏移,構(gòu)成較有視覺感染力的藍(lán)紫色。藍(lán)紫色在色相環(huán)中位于藍(lán)色和紫色之間,所以它也蘊(yùn)含著紫色的一些神秘感。盡管飽和度不是很高60%,但明度達(dá)到最高狀態(tài)為100%,使得該色彩艷度很強(qiáng),較高亮度的藍(lán)紫色顯得非常高雅,契合網(wǎng)站主題。 輔色調(diào)HSB的H色相數(shù)值為270,已經(jīng)稍往紫色偏移,紫色特征較明顯,明度較高且較明快的感覺。另一輔助色粉紅色H色相數(shù)值為331,稍往紅色系偏移,明度極高為100%,更增添了明快的氣息。 點睛色在這里起到了不可忽視的作用,由于淺紫紅較有女性氣質(zhì)特征,增添了該頁面的女性溫柔細(xì)膩的美感。另一點睛色深藍(lán)色由于色彩特質(zhì)所致,這里只是輔助性的做些點綴。 結(jié)論: 淺紫色系給人嫵媚、優(yōu)雅、嬌氣、清秀、夢幻,充滿女性魅力。 上面的配色除了點睛色深藍(lán)色明度較低,其他的色彩組合都在不同的程度上提高了明度,增強(qiáng)了頁面所要表達(dá)的主題效果。 6紫色配色:紫色+紅色 紫色系分析:(紫色配色:紫色+紅色) 這是一組非常簡潔精干的配色頁面。主要使用了主、輔兩色調(diào)為界,點綴小配色,整體疏密得當(dāng),色塊分明的色彩構(gòu)成。主色調(diào)紫HBS模式的H色相數(shù)值是283,稍向藍(lán)色方位偏移,以致于此種紫色略呈現(xiàn)冷色特征。點睛色主要選擇紅藍(lán)黃三種,其中紅色的H色相顯示為347,色值向藍(lán)色偏移略呈冷調(diào),因此該顏色在這里顯示沒有僵硬的感覺。另一點睛色橙黃色使用面積非常之小,幾乎讓人忽略。 右上角多個線條的小色塊的修飾增強(qiáng)了頁面的視覺感染力。 背景黑色不是孤立使用,既響亮的突出前景,又與前景的線條、文字呼應(yīng)起來,讓整個頁面高品位高層次的特質(zhì)更明顯。 結(jié)論: 主色調(diào)紫色在這里既有沉靜又顯高貴的感覺,提升產(chǎn)品的檔次。點睛色紅色的加入讓這種高貴又檔次的感覺更加明顯。藍(lán)色有穩(wěn)住紫色和紅色的效果。 該頁面大色塊的構(gòu)圖及配色極其簡約,獨(dú)具魅力。 7低純度配色:紫色+綠色 紫色系分析:(低純度配色:紫色+綠色) 該頁面除了點睛色外,整體配色飽和度都很低,所以在視覺上呈柔和狀態(tài)。 主色調(diào)紫色的HSB模式H色相為308,數(shù)值稍向紅色傾斜,由于飽和度及明度降低,顏色呈現(xiàn)很平和,空間感增強(qiáng)。輔助色綠色H色相為167,數(shù)值稍向藍(lán)色偏移,從RGB模式上看,G為125(正綠色時為255,R為0,B為0),R為82,B116,有這兩色混合,因此飽和度和明度都很低,然而在雅致的紫色背景的烘托下,較為突出了綠色的產(chǎn)品這一主角,達(dá)到配色目的。另一輔助色灰色,為整體的柔和狀態(tài)增添了雅致的氣息。 點睛色黃色的特質(zhì)因素,無疑是這頁面最響亮耀眼的顏色盡管使用的面積較小,它是紫色的對比色,高純度的黃色與低純度的紫色形成較強(qiáng)烈的視覺反差對比效果,也因此使得頁面的沉悶得到一定程度的緩解,提升頁面配色的空間透亮感。 結(jié)論: 整體柔和的配色調(diào)子較吻合的體現(xiàn)了尊貴高雅的服飾感覺,并透露出寧靜、安穩(wěn)、雅致的環(huán)境氛圍,充分體現(xiàn)出了紫色運(yùn)用的最大魅力。 本部分小節(jié): ● HSB數(shù)值H色相為300度時是正紫色,它的特性這個時候也就揮灑得越明顯。從上面的網(wǎng)頁配色實例中我們較全面的看到了不同角色紫色的性格體現(xiàn)。 ● 紫色是色彩系里明度最低的顏色。盡管如此,高純度的紫色與高級灰度的紫色都透出不同的氣質(zhì)。神秘、高雅在這里配色是它普遍的詮釋。 紫色的純色明度很低,因此它與淺色在一起,從明度關(guān)系上就分出了涇渭。為了不與黑白對比混淆,適當(dāng)?shù)貙⒆仙影咨Ч麜谩?由于紫色發(fā)冷,紫色配暖色時,暖色不能直接介入,需要調(diào)整純度或明度才能形成比較和諧的配色。 ● 綠色被譽(yù)為紫色的絕配色,也是一對復(fù)色對比色,它比三原色的對比色要溫和含蓄,由于它們都帶有一點共同成分,相互配合也會協(xié)調(diào)得多。各自的特質(zhì)原因,對比之下綠色通常起到比較關(guān)鍵的作用。 紫色對比色組通常是較小面積的做對比使用,不同面積不同明度飽和度的使用所表達(dá)的感受是不一樣的。 ● 紫色傳達(dá)著高貴、優(yōu)雅、幻想、神秘、莊重的心理感受。藍(lán)紫色可以用來創(chuàng)造出都市化的成熟美,且藍(lán)紫色可以使心情浮躁的人冷靜下來。明亮的色調(diào)直至灰亮的藍(lán)紫色有一種與眾不同的神秘美感。低亮度的藍(lán)紫色顯得沉穩(wěn),高亮度的藍(lán)紫色顯得非常高雅。在網(wǎng)頁中,藍(lán)紫色通常與藍(lán)色一起搭配使用。 網(wǎng)頁設(shè)計配色應(yīng)用實例剖析——黑色系 黑色是暗色,是純度、色相、明度最低的非彩色。象征著力量,有時感覺沉默、虛空,有時感覺莊嚴(yán)肅穆,有時又意味著不吉祥和罪惡。自古以來,世界各族都公認(rèn)黑色代表死亡、悲哀黑色具有能吸收光線的特性,別有一種變幻無常的感覺。 黑色能和許多色彩構(gòu)成良好的對比調(diào)和關(guān)系,運(yùn)用范圍很廣。 黑色給人深沉、神秘、寂靜、悲哀、壓抑的感受。 黑色是最有力的搭配色。 黑色也常用來表示英俊的男人。 下面我們根據(jù)黑色系搭配不同的顏色所表現(xiàn)出的特性做不同的舉例分析。 → 黑色網(wǎng)頁例圖:http://www.chanel.com 黑色系分析:(明度對比:黑色+白色) 從RGB和HBS模式可以看出,三組數(shù)字顯示沒有摻雜任何的數(shù)字,都統(tǒng)一到最高級0到255,即純黑和純白。 黑色白色屬于沒有色相和飽和度、只在明度兩極的非色彩。兩種極端強(qiáng)烈對比的只在明度上有區(qū)別的顏色,與前面我們所說的三原色、對比色的對比還是有較大區(qū)別的。 該頁面只有兩種非色彩搭配,即黑色白色,襯映得該頁面的設(shè)計元素也非常干凈簡練,旁邊點綴大小得當(dāng)?shù)奈淖衷販p小該頁面有可能因此產(chǎn)生的單調(diào)感覺。 結(jié)論: 黑白純色在明度上反差非常大,視覺沖擊強(qiáng)烈,主次分明,全站的貫穿運(yùn)用,構(gòu)成特色鮮明的設(shè)計風(fēng)格,散發(fā)迷人的高品位的貴族氣息。 黑白兩種顏色的搭配使用通常可以表現(xiàn)出都市化的感覺,常用于現(xiàn)代派頁面設(shè)計中。 2非色彩系:黑白深灰色 黑色系分析:(非色彩系:黑白深灰色) 該頁面與上頁配色類似,只是多了一組輔助色——灰色,黑、灰、白這三種非色彩在該頁面里都運(yùn)用到了。大家從該頁整體可以看到,多了輔助色灰色,令該頁面層次感更豐富,過渡更柔和,空間感覺增強(qiáng)。左上部點睛色白色塊面的運(yùn)用,使得這種空間感差距拉大,增強(qiáng)視覺層次感,同時突出標(biāo)志品牌、主題思想。另一作用在于突出文字的功能運(yùn)用。 背景深灰色明度非常低,接近于黑色,稍不留心有可能會被忽略。結(jié)合輔助色灰色再整體上看該色配色,主要起到豐富視覺層次感,緩和主色調(diào)黑色有可能帶來的僵硬感。 結(jié)論: 黑白灰非色彩色調(diào)所構(gòu)成的頁面較具特色,尤其灰色的加入更增添層次感。 結(jié)合黑白圖形,營造出一段古典的故事場景。契合該網(wǎng)站所體現(xiàn)的內(nèi)容思想。 3黑色背景 黑色系分析:黑色背景 背景黑色下,除了白色,還有其他三種顏色綠色、紫色、紅色分布在不同的位置。其中綠色和紫色雖然被稱之為輔助色,但它們使用的面積仍然不多,只是相對于點睛色紅色來說。綠色主要是用于文字方面,紫色用于圖形方面,所指向的分工明確。從RGB模式RGB三個數(shù)值上看到紫色混合數(shù)值上較接近,因此純度降低,相對于綠色紅色來說為中間色,色彩性能上呈低調(diào)緩和狀態(tài)。 HSB模式S數(shù)值來看,綠色雖然純度上比紅色稍低些,也許是因為使用面積較多的原因,看起來似乎比紅色醒目些。紅色在這里主要起到的是點明目前所屬的狀態(tài)這一功能性作用,在黑色的背景下盡管使用面積非常小,但依舊容易被瀏覽者注意到。 結(jié)論: 黑色的背景下所使用的顏色面積雖然不多,但由于黑色這一襯托放大的特性,其他顏色較容易引起瀏覽者的注意,充分發(fā)揮其設(shè)計意圖。 4黑白淺灰 黑色系分析:(黑白淺灰) 從RGB數(shù)值都是234來上看可知,255為白色,背景色234只是在明度上稍做變化得到的淺灰色。背景的淺灰色把前景的白黑對視覺的刺激力變得柔和協(xié)調(diào)很多。雖為背景灰色,實際在整個頁面配色作用上起到了點睛之筆,使得頁面煥發(fā)出另外一種神秘且特殊的氣息。 該頁面無論從設(shè)計上還是配色上都非常簡潔,主要是以黑白文字為重點,背后的白黑色塊面粗、白色邊框線條無不是為了突出前景文字的作用。 結(jié)論: 該頁面設(shè)計風(fēng)格極其簡約,除了方形塊面邊框,沒有多余的圖形修飾,主要是以文字的大小粗細(xì)、疏密間距排版為設(shè)計元素。 淺灰色的加入讓本來具強(qiáng)烈沖突色的黑白變得素雅些了,也頗具高層次格調(diào)許多。 5黑色+少量彩色 黑色系分析:黑色+少量彩色 該頁面基本上還是以黑色為主色調(diào),雖然似乎多了不少顏色的加入,但是由于使用面積都較少,除了少許修飾外主要運(yùn)用于功能文字方面的強(qiáng)調(diào)。 輔助色藍(lán)色正藍(lán)色的HSB模式的H應(yīng)該是240,目前這顯示的是215可看出色相上稍向綠色靠攏,S93%B43%來看純度和明度都不高,因此該藍(lán)色在黑色上顯示不明顯。 這里的點睛色主要都運(yùn)用在文字功能上,紅色幾乎是正紅,由于降低了純度和明度,該顏色不明顯。綠色H數(shù)值為149,正綠色為120,色相上稍向藍(lán)色傾斜,純度和明度不高,因此該顏色也不明顯。 結(jié)論: 低純度低飽和度的色彩在黑色背景下,較易使整體色彩達(dá)到統(tǒng)一的目的,顏色變得柔和而含蓄。 6黑色配色:黑色+橙色 黑色系分析:(黑色配色:黑色+橙色) 橙色的HSB模式H色值顯示是25,而正橙色是30可以知道,該橙色色相上稍往黃色傾斜。我們通過前面的學(xué)習(xí)可以知道橙色適用于視覺要求較高的時尚網(wǎng)站,運(yùn)用于該網(wǎng)站主題設(shè)計再適合不過了。另一點睛橙色在色相上稍偏橙紅色,是基于橙色的一個過渡或者說是增加視覺節(jié)奏感的一個小方法。右邊文字在不同程度上也使用了橙色做為點睛,稍平衡了左右視覺,起到色彩左右呼應(yīng)的作用。 輔色調(diào)白色使得黑色和橙色的搭配上不至于太生硬,增強(qiáng)頁面視覺的愉悅感。 結(jié)論: 橙色在黑色的背景上顯得很鮮亮,它的特性得到了最大化的發(fā)揮。 7黑色配色:黑色+紅色 黑色系分析:(黑色配色:黑色+紅色) 輔助色紅色從HBS模式上的H為0度看出,該紅色為正紅色且純度明度都為最高值100%,在黑色這一背景的襯托下,高純度高明度的正紅色遇到黑色搭配結(jié)合而得的特性簡直發(fā)揮到了極致。因此該頁面色彩配色具有極強(qiáng)的視覺沖擊力。 點睛色白色是讓這兩種顏色配合起來更透亮,緩和對人視覺不適的壓迫力。 盡管頁面的設(shè)計元素為噪音效果,顏色在不同面積分配上也參差不齊的感覺,但是由于黑色主色調(diào)為背景,牢牢掌控了全局,頁面設(shè)計及配色上也能達(dá)到統(tǒng)一的目的。 結(jié)論: 紅色和黑色的搭配被譽(yù)為商業(yè)的成功色。一是因為紅色是一種對人刺激性很強(qiáng)的顏色,是最鮮明生動的、最熱烈的顏色。在黑色的反襯下鮮明紅色極容易吸引人們的目光。紅色相對于其他顏色,視覺傳遞速度最快。 紅黑這兩種配色也被廣泛的運(yùn)用于較能體現(xiàn)個性的時尚類網(wǎng)站,讓人印象強(qiáng)烈的深刻。 本部分小節(jié):
● 黑色是最暗的顏色,是純度、色相、明度最低的非彩色。因此它較容易起到襯托和發(fā)揮起其他顏色的特性,是最有力的搭配色。 ● 黑白色的搭配較充滿個性,合理運(yùn)用能散發(fā)出另外一種迷人的高品位高格調(diào)的貴族氣質(zhì)。黑色與橙色搭配較容易營造視覺要求較高的時尚網(wǎng)站。黑色與紅色的搭配被譽(yù)為是商業(yè)的成功色,具有極強(qiáng)的視覺沖擊力。 ● 無論頁面上使用或者色相跨度大的多種顏色、或是高純度低純度、或者高對比的顏色,只要有黑色這一最得力的色彩為主色調(diào)掌控著,頁面設(shè)計配色上能得到和諧統(tǒng)一的效果。 網(wǎng)頁設(shè)計配色應(yīng)用實例剖析——灰色系 灰色介于灰色和白色之間,中性色、中等明度、無色彩、極低色彩的顏色。灰色能夠吸收其他色彩的活力,削弱色彩的對立面,而制造出融合的作用。 灰色是一種中立色,具有中庸、平凡、溫和、謙讓、中立和高雅的心理感受,也被稱為高級灰,是經(jīng)久不衰、最經(jīng)看的顏色。 任何色彩加入灰色都能顯得含蓄而柔和。但是灰色在給人高品味、含蓄、精致、雅致耐人尋味的同時,也容易給人頹廢、蒼涼、消極、沮喪、沉悶的感受,如果搭配不好頁面容易顯得灰暗、臟。 從色彩學(xué)上來說,灰色調(diào)又泛指所有含灰色度的復(fù)合色,而復(fù)合色又是三種以上顏色的調(diào)和色。色彩可以有紅灰、黃灰、藍(lán)灰等上萬種彩色灰,這都是灰色調(diào),而并不單指純正的灰色。 下面我們根據(jù)灰色搭配不同的顏色所表現(xiàn)出的視覺特性,做一些不同的舉例分析。 → 灰色網(wǎng)頁(明度淺灰色)例圖:http://www. 灰色系分析:(明度淺灰色) 從頁面所呈現(xiàn)的明度色調(diào)來看,整個頁面偏淺灰色調(diào),柔美高雅的灰調(diào)子。 主色調(diào)及背景色是接近于明度白色且非常淺的灰調(diào),輔色調(diào)的灰調(diào)子明度上較主色調(diào)稍深些,另一輔色調(diào)為白色。 RGB模式顯示點睛色紅色R217及G9來看不是正紅色,在如此灰調(diào)子的頁面來看,如果不參考RGB模式肉眼幾乎看不出來。如果沒有點睛色的加入整個頁面呈毫無生氣的灰色系,略有些臟的感覺,平淡且乏味,沒能使大家對它產(chǎn)生過多的印象。紅色的特性把以上的這些平淡的感受打破了,讓人愿意細(xì)品灰色所帶來的悠長韻味。 HSB模式的B也能看出淺灰色在明度上較高,部分漸變的深灰色在頁面上所占用的面積也不少,另一點睛色黑色的作用就是使明度色階跨度加深、明確,整個頁面呈現(xiàn)灰蒙蒙的感覺得以減弱。 結(jié)論: 該頁面整個看起來也可以說只有兩種色彩搭配,即非色彩系黑白灰和色彩系紅色,頁面顯得非常簡潔而含蓄。點睛色的加入減少了非色調(diào)淺灰色有可能產(chǎn)生的單調(diào)感覺。 2同類灰色系:灰色+橙色 → 灰色網(wǎng)頁(同類灰色系:灰色+橙色)例圖:http://www. 灰色系分析:(同類灰色系:灰色+橙色) 該頁面主要以大面積的灰色系列為主,主色調(diào)為背景色非常明確。部分灰色只在明度上加深了,增強(qiáng)灰色的空間感。 從RGB所呈現(xiàn)的均衡數(shù)值及HSB模式的HS都為零來看,主色調(diào)的淺灰色屬于非常純凈的非色彩,沒有摻雜其他色系進(jìn)去。而輔色調(diào)的兩個模式上就有些差異,HSB模式的H顯示180度色相上偏青藍(lán)色,有及其微弱的飽和度,明度也較低。點睛色壬獺SB顯示為正桔紅色且飽和度和明度都為100%,應(yīng)該是及其耀眼的顏色,然而在大面積背景主色調(diào)下,此種耀眼的顏色得到緩解,這正是與灰色的配色后顯示出灰色最強(qiáng)烈的特性--削弱緩和刺激耀眼的顏色。 點睛色橙色和白色點綴下打破了平面平淡的配色格局,眼前頓時一亮的感覺。 結(jié)論: 灰色調(diào)非色彩所構(gòu)成的頁面頗具有獨(dú)特的魅力,整個頁面呈現(xiàn)出平穩(wěn)緩和的氣質(zhì)。兩個點睛色橙色和白色起到調(diào)動配色頁面的作用。 3同類灰色+多種顏色 → 灰色應(yīng)用(同類灰色+多種顏色)網(wǎng)頁例圖: http://www. 灰色系分析:(同類灰色+多種顏色) 這是一個灰色階變化較多的頁面,形成較有節(jié)奏塊面分明的韻律美感。這一變化改善了灰色容易形成的呆板單調(diào)特性。 從HSB模式數(shù)值來看,主色調(diào)輔色調(diào)都是非色彩的正灰色,沒有摻雜其他色彩進(jìn)去。點睛色黃色、綠色H數(shù)值上顯示有些色相偏移都略向暖色色環(huán)靠攏,這兩顏色的特性是屬于較顯眼的顏色。另外兩點睛色粉紅和粉藍(lán)色在色相上已經(jīng)較接近于正色系,明度較高飽和度降低。這四種顏色盡管所使用的面積非常少,但結(jié)合了面積上相對使用較多的非色彩白色,讓整個頁面配色雅致的同時不乏生動活躍。 結(jié)論: 不同灰色背景的變化,前景使用面積較少的純凈色點綴,這幾種顏色還同樣出現(xiàn)在右上角產(chǎn)生平衡色彩的呼應(yīng)作用,整個頁面產(chǎn)生雅致和諧的視覺美感。 4灰色+對比色 → 灰色配色(灰色+對比色)網(wǎng)頁例圖:http://www. 灰色系分析:(灰色+對比色) 從RGB和HSB模式上可看出主色調(diào)不是純正的非色系,里面摻雜了其他色彩,肉眼識別及H色相為32范圍上都能看出含有微弱的黃色調(diào)在里面,S13%B46%分別顯示該種顏色含濃重的灰色,有少量的黃色加入結(jié)合整個頁面的配色是比較調(diào)和的搭配。輔色調(diào)則是運(yùn)用了比較正的淺灰色。 點睛色主要是一組橙色、藍(lán)色對比色構(gòu)成,從雙方的H色相上也能看出來。RGB模式上看到這兩種顏色都或多或少的摻雜了其他的顏色在里面,所以明度純度上呈灰色階傾向。另一點睛色淺黃色相上呈現(xiàn)正黃色,但由于明度非常高因此色彩呈不飽和狀態(tài),盡管如此在主色調(diào)灰色的背景下還是比較突出的。 結(jié)論: 該頁面依舊以灰色為主導(dǎo)位置,雖然主色調(diào)灰色少量摻雜了黃色,與頁面其他黃色色彩元素較統(tǒng)一調(diào)和。點睛色主要是以兩對比色做主導(dǎo),相對其他顏色飽和度較高且面積使用得不少,較響亮和突出產(chǎn)品目的。在主色調(diào)灰黃色特性掌控下卻也到達(dá)醒目又和諧的目的。 5灰色+青藍(lán)色 → 灰色配色(灰色+青藍(lán)色)應(yīng)用網(wǎng)頁例圖:http://www. 灰色系分析:(灰色+青藍(lán)色) 肉眼看上去已經(jīng)能識別到了深灰色主色調(diào)有青藍(lán)色傾向,從HSB模式上能夠看到色相為180度,該深灰色飽和度和明度都比較低。 點睛色是淺青藍(lán)色,HSB模式H色相所呈現(xiàn)的色相與主色調(diào)的數(shù)值一致,屬高明度低飽和度色系。 主色調(diào)是明度較低的深灰色,是屬于較沉悶的顏色;而點睛色是淺青藍(lán)色,在深灰色的背景下略呈現(xiàn)有些暗淡,并沒有改善和帶來明快的感覺,輔助色是白色大面積的介入而因此使得整個頁面得到一定的透亮緩解,這是該頁面至關(guān)重要的一色。 結(jié)論: 該頁面用色不多,深灰、淺青藍(lán)、白,但合理的運(yùn)用這三種顏色的配色角色,能使頁面煥發(fā)與眾不同的氣質(zhì)魅力。 6灰色+棕黃色 灰色系分析:(灰色+棕黃色) 主色調(diào)是由兩種明度較接近的灰色構(gòu)成。從RGB和HSB模式上能看到這兩種灰色屬于純正的非色彩,沒有其他的顏色摻雜進(jìn)去。 輔助色為復(fù)色,我們知道復(fù)色是由兩種間色或者原色和間色混合產(chǎn)生,通常所混合產(chǎn)生的顏色色相不明顯,當(dāng)某種顏色所占的比重大時,該顏色的色相才相較突出。從H色相上看顏色稍偏黃色,由于混合其他顏色且明度較低,因此呈棕黃色。復(fù)色棕黃色在背景深灰的襯托下低調(diào)不張揚(yáng),能很好的與之融為一體。 點睛色H顯示120度是正綠色。該綠色選擇了明度適中純度不高的配色,既表達(dá)了主題又能與整個頁面灰調(diào)子很好的調(diào)和一起。另一點睛色白色讓所有的顏色的特性都得以很好的發(fā)揮并起到拉開色階層次的作用。 結(jié)論: 深灰色具有謙虛、平凡、沉默、中庸、寂寞、憂郁、消極的心理感受。 主色調(diào)主要集中在背景的運(yùn)用和變化上,增強(qiáng)頁面的空間感,視覺元素頗有時尚現(xiàn)代的氣息,與前景的色彩明度純度稍有變化又在視覺上達(dá)到風(fēng)格統(tǒng)一。 7無彩色搭配 灰色系分析:(無彩色搭配) 就像回到了古老的黑白照年代。初看該頁面容易把背景的深灰色誤認(rèn)為是黑色,再仔細(xì)觀看就感覺到了此種深灰色不凡的作用,假如背景色使用了黑色,頁面的主體人物和空間感的相互作用就變得僵硬且呆板。 從RGB和HSB模式上可知主色調(diào)深灰色為純正的非色彩,明度很低。但與人物的毛發(fā)對比下就能看出它們明度之間的差異。 輔助色這里取的是照片的膚色,也是純正的淺灰色,該人物占據(jù)了該頁面三分之一的面積,主次鮮明。 盡管點睛色是明度最高的白色,但是由于只在小文字上的小面積使用,因此只起到了點綴一下頁面細(xì)節(jié)突顯主次關(guān)系的作用。 結(jié)論: 根據(jù)前面最初講的網(wǎng)頁應(yīng)用部分的第一節(jié)色調(diào),主色調(diào)、輔色調(diào)、點睛色所使用的面積比例來看,該頁的例子得到了很好的詮釋。 由于該頁面是非色彩黑白灰構(gòu)成,頁面配色分析就變得簡單化了不少,因此在其他頁面實例里出現(xiàn)的主色調(diào)、輔色調(diào)、點睛色不同的色彩內(nèi)斂與張揚(yáng)的特性在這里也就涉及不到了。 本部分小節(jié): ● 灰色謙和內(nèi)斂的特性決定了不同明度的灰色扮演的是輔佐陪襯的角色。 ● 非色彩就是沒有彩度的顏色,而灰色相對黑色、白色要多些變化,因為它能的通過明度來表達(dá)不同的性格特征。 ● 灰色與其他彩度色彩搭配時能降低張揚(yáng)耀眼的顏色,調(diào)和色彩的方法之一。兩種或兩種以上的色彩混合,如能配上灰色,這兩個色調(diào)本身必能相互調(diào)和。 ● 以上的例子中不難看出,都是非色彩系灰色為主色調(diào)點綴極少面積的色彩系,色彩運(yùn)用的面積反差越大,頁面所呈現(xiàn)的獨(dú)特魅力也就越強(qiáng)烈?;疑奶匦栽谟谀馨汛碳ひ鄣念伾岷突?,這將是調(diào)和多個頁面配色的利器,但要也要注意不同明度灰色所起到的配色作用,不同明度的灰色搭配不同的彩度顏色時,所得到的結(jié)果差別是很大,根據(jù)整體頁面配色應(yīng)在灰色明度上要反復(fù)的調(diào)整。 ● 無彩度的黑白灰不同面積的使用,相對彩度色系來說是比較容易的顏色搭配,且能包容所有的彩度顏色。 |
|