建站常識
網(wǎng)頁設(shè)計配色應(yīng)用實例剖析——橙色系
2006-10-27 08:01:00
在整個色譜里,橙色具有興奮度,是最耀眼的色彩。給人以華貴而溫暖,興奮而熱烈的感覺,也是令人振奮的顏色。具有健康、富有活力、勇敢自由等象征意義,能給人有莊嚴(yán)、尊貴、神秘等感覺。橙色在空氣中的穿透力僅次于紅色,也是容易造成視覺疲勞的顏色。
在網(wǎng)頁顏色里,橙色適用于視覺要求較高的時尚網(wǎng)站,屬于注目、芳香的顏色,也常被用于味覺較高的食品網(wǎng)站,是容易引起食欲的顏色。
下面我們根據(jù)橙色系不同屬性鄰近色、同類色、對比色的搭配做不同的舉例分析。
橙色
→ 橙******頁例圖:http:// www.wastelink.co.uk
橙色系分析:
主色調(diào)橙色HSB數(shù)值的H表示色相,顯示的是30度,而30度正是橙色顯示特征最標(biāo)準(zhǔn)的顏色——正橙色。飽和度和亮度同時達到最高值,因此整個頁面的視覺刺激是極其耀眼強烈的。
這里選取了三種面積相當(dāng)又是整個頁面使用得最少的顏色為點睛色,使頁面生動的同時又運用于導(dǎo)航位置,從而達到突出主題的效果。從HSB數(shù)值上看它們的明度純度相對較低,與明度純度較高的背景正橙色形成鮮明的對比。
通過范圍較大的背景白色、前景圖片灰白色和小細節(jié)前景白色文字制造出明快氣氛的同時,又呼應(yīng)統(tǒng)一于整個頁面。
輔助色在這里是橙色與白色的過渡色。
結(jié)論:
飽和度與純度很高特性明顯的顏色,在達到視覺沖擊力的同時,可適當(dāng)采用少許對比色調(diào)和緩和于視覺,從而削弱視覺的疲勞度。#p# 深橙紅色系
→ 深橙紅******頁例圖:http:// www.matisserestaurant.ca
深橙紅色系分析:
從色相度中可以知道0度為正紅色,30度為正橙色,而主色調(diào)的HSB數(shù)值H顯示22度可知,該深橙紅色是橙色基礎(chǔ)上加入少許鄰近色紅色,整體上降低了明度而得,因為紅色本身較橙色明度低,因此這里橙紅色的明度呈現(xiàn)出較低狀態(tài)。
輔助色選取了明度相對于主色調(diào)更低的三種顏色,前面兩種飽和度都較高,最后一種灰藍色由于明度較高因此飽和度降低,是主色調(diào)與前面兩種輔助色的協(xié)調(diào)色。
這個頁面背景色運用了紋樣,是以目前選取的主色調(diào)顏色和明度較暗的深紅色結(jié)合而得,使得明度稍暗。
數(shù)值上看,主色調(diào)也就是背景色的飽和度較高,但是由于降低了明度,顏色變得較沉穩(wěn)。輔助色RGB數(shù)值顯示,添加了適量的其他顏色,G和B數(shù)值區(qū)別不大,因此飽和度降低,顏色趨于柔和穩(wěn)定。點睛色的加入和提亮,使頁面視覺效果得到強化。
結(jié)論:
前景色通常要較明顯的區(qū)別于背景色,達到臺前的宣傳目的。當(dāng)飽和度較低的前景色與背景色變化不明顯時,形成的是另外一種柔和統(tǒng)一的效果。#p#
→ 淺橙色同類******頁例圖: 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)空間距離,增強輔色調(diào)橙色的特性,使整個稍許有些發(fā)灰的頁面明快了不少。但也由于白色屬于非色彩,只在明度上呈最高數(shù)值而無彩度,不能給頁面帶來彩度所具有的鮮活靚麗的感覺,另一方面卻也呈現(xiàn)出質(zhì)樸的感受。
結(jié)論:
前面我們提到過同類色是在同一色相中不同的明度顏色變化。因此這類顏色相對其他類別顏色來說明凈而單純,配色上較容易達到協(xié)調(diào)統(tǒng)一,但也容易顯得單調(diào)。
初看該頁面配色協(xié)調(diào)舒服,但看多了的確有些單調(diào)乏味的感覺,這也是同類色搭配的特性。同時由于運用了漸變色這一調(diào)和方法,該頁面同時占有了前面我們提到的4種色彩中的調(diào)和方法的2種,整個頁面呈現(xiàn)出調(diào)和中的調(diào)和是勿庸置疑的,但也同時顯得有些單調(diào),沒有色彩亮點。#p# 橙色系鄰近色(黃色+橙色+橙紅色)
→ 鄰近色橙******頁例圖:http:// www.tide.com
橙色系鄰近色(黃色+橙色+橙紅色)分析:
雖然第一眼看上去似乎色調(diào)上變化很多,但該網(wǎng)頁的色彩構(gòu)成主要是由黃色和橙色這兩種鄰近色構(gòu)成的,通過不同的明度和純度的變化而得到更為豐富的色階,它們是淺黃色、黃色、橙色、橙紅通過不同的形狀面積,位置變化而得。從HSB數(shù)值中的H可以看出屬于暖色范疇,三個色相的傾向不是很明顯,以至于色彩呈現(xiàn)較規(guī)律、緩和。由于不同數(shù)值的明度表達,純度也做出了不同的數(shù)值變化。
淺色在這里主要起到更調(diào)和主色調(diào)和點睛色的色彩過渡作用。點睛色在這里起到強調(diào)整個頁面的華麗感,增強整個頁面彩度的作用。
結(jié)論:
橙色與鄰近色黃、紅暖色調(diào)的搭配組合,這是一種簡單又安全的方法,視覺韻律上處理得井然有序。整個頁面看起來艷澤華麗、新鮮充滿活力的感覺,符合Tide這一主題所要表達的目的。
#p#
→ 對比色橙紅色應(yīng)用網(wǎng)頁例圖: www.rastifilms.com.ar
橙色系對比色(橙色+藍色)分析
HSB數(shù)值中的H色相顯示主色調(diào)橙紅色為26,我們知道正紅色的H為0,正橙H為30,主色調(diào)橙紅色是往0偏移而得。正藍色是240,而該點睛色藍色為192,往綠度偏移,在RGB中的數(shù)值G160也能看出來,因此藍色的特性不是很強。但由于橙紅色的明度飽和度達到最高值,因此盡管藍色不是正藍,但它的特性得到了很大程度的發(fā)揮。
此種橙藍對比色中的藍色調(diào)配,比較少見,讓人很容易記住它。而橙紅色的飽和度明度都非常高,刺激度強,屬于讓人不可久視的顏色。
介于橙紅色和藍色之間,與藍色面積相當(dāng)?shù)陌咨?,起到調(diào)和對比色橙紅與藍色之間關(guān)系的作用。
結(jié)論:
這組對比色通過使用的面積位置的不同來反映主次之間的關(guān)系。對比色能相互強烈的突出色彩特性。這組對比色屬于是非常能突顯個性的顏色。#p# 橙色系低對比度(橙色+綠色)
→ 橙色低對比應(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è)計。#p# 橙色系高純度高對比度(橙紅色+綠色)
→ 橙色高純度對比應(yīng)用網(wǎng)頁例圖: www.aliveis.com
橙色系高純度高對比度(橙紅色+綠色)分析:
與上組的橙色綠色相比,這組顏色強烈而刺激,色彩傾向無疑明確了很多。主色調(diào)橙紅色往紅色傾向,而紅色的對比色是綠色,因此整組顏色有強烈的對比效果。從HSB數(shù)值H上看,除了藍色外,其余幾種顏色純度都非常高,加上又是近于紅綠對比色。頁面的刺激強度是可想而知的強烈。
黃色是中間色,起到過渡對比色作用,在這組色里屬于調(diào)和色。藍色出現(xiàn)在產(chǎn)品圖案上,引導(dǎo)主次關(guān)系,增強視覺的注目點。
結(jié)論:
橙色是注目容易引起食欲的顏色,在這里得到了較充分的應(yīng)用。
非色彩的白色和黑色在這里起到了非常重要的作用,拉大了色彩色階空間的距離。白色讓整個色調(diào)組合更加明快,而黑色增添色彩的厚重質(zhì)感——強烈中的強烈,增強對產(chǎn)品的視覺刺激。
本部分小節(jié):
● 橙色在HSB數(shù)值的H中為30度,是正橙色。橙色是一個非常響亮注目的顏色。橙色的對比色是藍色,當(dāng)這兩種顏色彩度傾向越明確,對比強度就越大。但我們也看到,除了正宗的對比色橙藍色外,橙色和綠色隨著純度的升高,達到的對比效果也很強烈。
在今后的配色設(shè)計中可以多些不同明度純度冷暖對比的嘗試,會有意想不到的收獲。
● 白色是所有網(wǎng)頁設(shè)計中屬于較通用的顏色,它容易突出彩度的特性,明快于整個頁面,當(dāng)一個頁面設(shè)計沒有使用白色時,空間感覺減弱,容易造成彩度不夠明確、頁面有些沉悶等反應(yīng),然而又相對來說增添頁面的厚重感覺,制造另外一種環(huán)境氣氛。黑色在色調(diào)組合的輔助角色里容易制造出厚重的色彩效果。
從這里我們又一次感受到色彩的相對性,即沒有絕對的配色組合,它們總是根據(jù)搭配不同的色彩組合或強或弱的表現(xiàn)出什么樣的特性。
● 同類色、鄰近色的組合,是非常調(diào)和的色彩組合,即使減少了色相的數(shù)量,一樣也可以調(diào)配出很多不同的調(diào)和色彩。對于初學(xué)者來說,這是一個非常實用的配色方法。
下一部分我們介紹網(wǎng)頁設(shè)計配色系列應(yīng)用部分的第六節(jié)——黃色系。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計的五大特點
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計應(yīng)該更看重框架搭建還是視覺觀感?
- [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)站首頁設(shè)計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應(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è)計都有哪些新的趨勢?
延伸閱讀
- [2005-12-28 13:59:00] 網(wǎng)頁配色之黃金分割法
- [2009-05-18 08:00:00] 網(wǎng)頁配色工具
- [2006-10-08 07:59:00] 網(wǎng)頁設(shè)計配色應(yīng)用——色調(diào)
- [2007-07-23 16:19:00] 網(wǎng)頁配色:正文中國傳統(tǒng)色彩名錄
- [2006-11-22 08:34:00] 網(wǎng)頁設(shè)計配色應(yīng)用實例剖析——黃色系
- [2006-10-09 10:25:00] 網(wǎng)頁設(shè)計配色應(yīng)用——色彩的對比
- [2007-01-09 09:37:00] 《網(wǎng)頁配色密碼》
- [2006-10-10 08:35:00] 網(wǎng)頁設(shè)計配色應(yīng)用——色彩的調(diào)和
- [2006-10-12 08:26:00] 網(wǎng)頁設(shè)計配色應(yīng)用實例剖析——紅色系
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè) 力圖 交互設(shè)計 html和css 蘋果系統(tǒng) 企業(yè)網(wǎng)站 網(wǎng)站制作 青島網(wǎng)站建設(shè)公司哪家好 企業(yè)網(wǎng)站為什么要備案 外貿(mào)網(wǎng)站設(shè)計 空白和簡潔的設(shè)計 H5專題頁面 中小型企業(yè)網(wǎng)站建設(shè) css 青島網(wǎng)站SEO 青島抖音小程序開發(fā) 互聯(lián)網(wǎng) 審美 微網(wǎng)站 青島flash網(wǎng)站 網(wǎng)站動畫 網(wǎng)站建設(shè),手機網(wǎng)站 海信網(wǎng)絡(luò)科技 膠南網(wǎng)站建設(shè)公司 青島SEO 輪胎網(wǎng)站設(shè)計 青島高端網(wǎng)站設(shè)計公司哪家好 青島網(wǎng)絡(luò)公司 外貿(mào)網(wǎng)站建設(shè) 網(wǎng)站的速度