橙色具有輕快、歡欣、收獲、溫馨、時尚的效果,是快樂、喜悅、能量的色彩。
在整個色譜里,橙色具有興奮度,是最耀眼的色彩。給人以華貴而溫暖,興奮而熱烈的感覺,也是令人振奮的顏色。具有健康、富有活力、勇敢自由等象征意義,能給人有莊嚴、尊貴、神秘等感覺。橙色在空氣中的穿透力僅次于紅色,也是容易造成視覺疲勞的顏色。
在網頁顏色里,橙色適用于視覺要求較高的時尚網站,屬于注目、芳香的顏色,也常被用于味覺較高的食品網站,是容易引起食欲的顏色。
下面我們根據橙色系不同屬性鄰近色、同類色、對比色的搭配做不同的舉例分析。
橙色
→ 橙色網頁例圖:http:// www.wastelink.co.uk

橙色系分析:
主色調橙色HSB數值的H表示色相,顯示的是30度,而30度正是橙色顯示特征最標準的顏色――正橙色。飽和度和亮度同時達到最高值,因此整個頁面的視覺刺激是極其耀眼強烈的。
這里選取了三種面積相當又是整個頁面使用得最少的顏色為點睛色,使頁面生動的同時又運用于導航位置,從而達到突出主題的效果。從HSB數值上看它們的明度純度相對較低,與明度純度較高的背景正橙色形成鮮明的對比。
通過范圍較大的背景白色、前景圖片灰白色和小細節前景白色文字制造出明快氣氛的同時,又呼應統一于整個頁面。
輔助色在這里是橙色與白色的過渡色。
結論:
飽和度與純度很高特性明顯的顏色,在達到視覺沖擊力的同時,可適當采用少許對比色調和緩和于視覺,從而削弱視覺的疲勞度。
?
深橙紅色系
?
→ 深橙紅色網頁例圖:http:// www.matisserestaurant.ca

深橙紅色系分析:
從色相度中可以知道0度為正紅色,30度為正橙色,而主色調的HSB數值H顯示22度可知,該深橙紅色是橙色基礎上加入少許鄰近色紅色,整體上降低了明度而得,因為紅色本身較橙色明度低,因此這里橙紅色的明度呈現出較低狀態。
輔助色選取了明度相對于主色調更低的三種顏色,前面兩種飽和度都較高,最后一種灰藍色由于明度較高因此飽和度降低,是主色調與前面兩種輔助色的協調色。
這個頁面背景色運用了紋樣,是以目前選取的主色調顏色和明度較暗的深紅色結合而得,使得明度稍暗。
數值上看,主色調也就是背景色的飽和度較高,但是由于降低了明度,顏色變得較沉穩。輔助色RGB數值顯示,添加了適量的其他顏色,G和B數值區別不大,因此飽和度降低,顏色趨于柔和穩定。點睛色的加入和提亮,使頁面視覺效果得到強化。
結論:
前景色通常要較明顯的區別于背景色,達到臺前的宣傳目的。當飽和度較低的前景色與背景色變化不明顯時,形成的是另外一種柔和統一的效果。
淺橙色同類色
→ 淺橙色同類色網頁例圖: http:// www.talentic.com

淺橙色同類色分析:
從主色調和輔色調在HSB數值H顯示的數值是36可以看出,該頁面色調是在同一種橙色的基礎上只在明度上發生了變化。由于主要色調是淺橙色,明度越高飽和度越低,頁面上減弱了飽和度較高的橙色特性,整個網頁呈現出柔和自然稍有些發灰的調子。
該網頁是在橙色這一個顏色上做不同明度黑白灰色階的柔和變化,屬于單色調,配色非常的單純。色階平穩,同時存在著不夠醒目的狀態。白色在這里是起到了拉開主色調和輔色調空間距離,增強輔色調橙色的特性,使整個稍許有些發灰的頁面明快了不少。但也由于白色屬于非色彩,只在明度上呈最高數值而無彩度,不能給頁面帶來彩度所具有的鮮活靚麗的感覺,另一方面卻也呈現出質樸的感受。
結論:
前面我們提到過同類色是在同一色相中不同的明度顏色變化。因此這類顏色相對其他類別顏色來說明凈而單純,配色上較容易達到協調統一,但也容易顯得單調。
初看該頁面配色協調舒服,但看多了的確有些單調乏味的感覺,這也是同類色搭配的特性。同時由于運用了漸變色這一調和方法,該頁面同時占有了前面我們提到的4種色彩中的調和方法的2種,整個頁面呈現出調和中的調和是勿庸置疑的,但也同時顯得有些單調,沒有色彩亮點。
? 橙色系鄰近色(黃色+橙色+橙紅色)
→ 鄰近色橙色網頁例圖:http:// www.tide.com

橙色系鄰近色(黃色+橙色+橙紅色)分析:
雖然第一眼看上去似乎色調上變化很多,但該網頁的色彩構成主要是由黃色和橙色這兩種鄰近色構成的,通過不同的明度和純度的變化而得到更為豐富的色階,它們是淺黃色、黃色、橙色、橙紅通過不同的形狀面積,位置變化而得。從HSB數值中的H可以看出屬于暖色范疇,三個色相的傾向不是很明顯,以至于色彩呈現較規律、緩和。由于不同數值的明度表達,純度也做出了不同的數值變化。
淺色在這里主要起到更調和主色調和點睛色的色彩過渡作用。點睛色在這里起到強調整個頁面的華麗感,增強整個頁面彩度的作用。
結論:
橙色與鄰近色黃、紅暖色調的搭配組合,這是一種簡單又安全的方法,視覺韻律上處理得井然有序。整個頁面看起來艷澤華麗、新鮮充滿活力的感覺,符合Tide這一主題所要表達的目的。
#p#副標題#e#
橙色系對比色(橙色+藍色)
→ 對比色橙紅色應用網頁例圖: www.rastifilms.com.ar

橙色系對比色(橙色+藍色)分析
HSB數值中的H色相顯示主色調橙紅色為26,我們知道正紅色的H為0,正橙H為30,主色調橙紅色是往0偏移而得。正藍色是240,而該點睛色藍色為192,往綠度偏移,在RGB中的數值G160也能看出來,因此藍色的特性不是很強。但由于橙紅色的明度飽和度達到最高值,因此盡管藍色不是正藍,但它的特性得到了很大程度的發揮。
此種橙藍對比色中的藍色調配,比較少見,讓人很容易記住它。而橙紅色的飽和度明度都非常高,刺激度強,屬于讓人不可久視的顏色。
介于橙紅色和藍色之間,與藍色面積相當的白色,起到調和對比色橙紅與藍色之間關系的作用。
結論:
這組對比色通過使用的面積位置的不同來反映主次之間的關系。對比色能相互強烈的突出色彩特性。這組對比色屬于是非常能突顯個性的顏色。
?
橙色系低對比度(橙色+綠色)
→ 橙色低對比應用網頁例圖:http:// www.colourpixel.com

橙色系低對比度(橙色+綠色)分析:
如果不看數值參數,剛一開始看會以為這是一組純度較低的顏色。HSB數值H顯示主色調為正橙色,而黃綠色的明度較低且色相傾向不夠明確,加之背景有少許的暗橙色紋樣,整個頁面沒有高亮度白色點綴襯托,使得純度的彩度不夠確切,就很容易造成了該頁面純度較低的錯覺。
整個頁面最亮的顏色除了“書本”最亮色淺黃色外,就是點睛色黃色了。我們知道黃色是所有彩度色中明度最高的顏色,不同明度純度的黃色系讓整個頁面明亮了不少,它是整個頁面明度色階的最高調。
黃綠色的出現,讓本只有鄰近色的橙色系列多了些內容,頁面配色豐富不少、視覺節奏多了些變化。
結論:
這類顏色的組合隨著不同色階明度的變暗,整個頁面沒有白色襯托,制造出另外一種古典的環境氛圍,有如娓娓道來的故事場景,也是一種不錯的主題配色方法。
本頁面的配色設計亮點是――無白色設計。
?
橙色系高純度高對比度(橙紅色+綠色)
→ 橙色高純度對比應用網頁例圖: www.aliveis.com

橙色系高純度高對比度(橙紅色+綠色)分析:
與上組的橙色綠色相比,這組顏色強烈而刺激,色彩傾向無疑明確了很多。主色調橙紅色往紅色傾向,而紅色的對比色是綠色,因此整組顏色有強烈的對比效果。從HSB數值H上看,除了藍色外,其余幾種顏色純度都非常高,加上又是近于紅綠對比色。頁面的刺激強度是可想而知的強烈。
黃色是中間色,起到過渡對比色作用,在這組色里屬于調和色。藍色出現在產品圖案上,引導主次關系,增強視覺的注目點。
結論:
橙色是注目容易引起食欲的顏色,在這里得到了較充分的應用。
非色彩的白色和黑色在這里起到了非常重要的作用,拉大了色彩色階空間的距離。白色讓整個色調組合更加明快,而黑色增添色彩的厚重質感――強烈中的強烈,增強對產品的視覺刺激。
本部分小節:
● 橙色在HSB數值的H中為30度,是正橙色。橙色是一個非常響亮注目的顏色。橙色的對比色是藍色,當這兩種顏色彩度傾向越明確,對比強度就越大。但我們也看到,除了正宗的對比色橙藍色外,橙色和綠色隨著純度的升高,達到的對比效果也很強烈。
在今后的配色設計中可以多些不同明度純度冷暖對比的嘗試,會有意想不到的收獲。
● 白色是所有網頁設計中屬于較通用的顏色,它容易突出彩度的特性,明快于整個頁面,當一個頁面設計沒有使用白色時,空間感覺減弱,容易造成彩度不夠明確、頁面有些沉悶等反應,然而又相對來說增添頁面的厚重感覺,制造另外一種環境氣氛。黑色在色調組合的輔助角色里容易制造出厚重的色彩效果。
從這里我們又一次感受到色彩的相對性,即沒有絕對的配色組合,它們總是根據搭配不同的色彩組合或強或弱的表現出什么樣的特性。
● 同類色、鄰近色的組合,是非常調和的色彩組合,即使減少了色相的數量,一樣也可以調配出很多不同的調和色彩。對于初學者來說,這是一個非常實用的配色方法。
