網站設計色彩搭配之橙色頁面配色
橙色具有輕快、歡欣、收獲、溫馨、時尚的效果．是快樂、喜悅、能量的色彩。在整個色譜里．橙色具有興奮度，是最耀眼的色彩。給人以華貴而溫暖，興奮而熱烈的感覺，也是令人振奮的顏色。具有健康、富有活力、勇敢自由等象征意義，能給人有莊嚴、尊貴、神秘等感覺。橙色在空氣中的穿透力僅次于紅色，也是容易造成視覺疲勞的顏色。深圳網站制作公司認為在網頁顏色里，橙色適用于視覺要求較高的時尚網站，屬于注目、芳香的顏色，也常被用于味覺較高的食品網站，是容易引起食欲的顏色。
1.網頁設計色彩搭配經驗之橙色
【示例】橙色頁面配色示意圖10-66
分析
主色調橙色HSB數(shù)值的H表示色相，顯示的是30度，而30度正是橙色顯示特征最標準的顏色正橙色。飽和度和亮度同時達到最兩值，因此整個頁面的視覺刺激是極其耀眼強烈的。這里選取了3種面積相當又是整個頁面使用得最少的顏色為點睛色，使頁面生動的同時又運用于導航位置，從而達到突出主題的效果從HSB數(shù)值上看它們的明度純度相對較低，與明度純度較而的背景正橙色形成鮮明的對比。
通過范圍較大的背景白色、前景圖片灰白色和小細節(jié)前景白色文字制造出明快氣氛的同時又呼應統(tǒng)于整個頁面。輔助色在這里是橙色與白色的過渡色。
【網站設計師點評】
飽和度與純度很兩特性明顯的顏色，在達到視覺沖擊力的同時，可適當采用少許對比色調和緩和于視覺，從而削弱視覺的疲勞度。
2.網站設計色彩搭配經驗之深橙色
【示例】深橙色網頁設計配色示例圖10-67
分析
從色相度中可以知道。度為正紅色，30度為正橙色，而主色調的HSB數(shù)值H顯示22度可知，該深橙紅色是橙色基礎上加入少許鄰近色紅色整體上降低了明度而得，因為紅色本身較橙色明度低，因此這里橙紅色的明度呈現(xiàn)出較低狀態(tài)。這個頁面背景色運用了紋樣，是以目前選取的主色調顏色和明度較暗的深紅色結合而得，使得明度稍暗。
輔助色選取了明度相對于主色調更低的3種顏色，前面兩種飽和度都較高，最后種灰藍色由于明度較高因此飽和度降低，是主色調與前面兩種輔助色的協(xié)調色。從數(shù)值上看，主色調也就是背景色的飽和度較高，但是由于降低了明度，顏色變得較沉穩(wěn)。輔助色RGB數(shù)值顯示，添加了適量的其他顏色．G和B數(shù)值區(qū)別不大，因此飽和度降低，顏色趨于柔和穩(wěn)定。點睛色的加入和提亮，使頁面視覺效果得到強化。
【網站設計師點評】
前景色通常要較明顯地區(qū)別于背景色，達到臺前的宣傳目的。當飽和度較低的前景色與背景色變化不明顯時，形成的是另外種柔和統(tǒng)的效果。
3.網站設計色彩搭配經驗之淺橙色
【示例】淺橙色同類色網頁設計配色示例圖10-68
分析
從主色調和輔色調在HSB數(shù)值H顯示的數(shù)值是36可以看出，該頁面色調是在同種橙色的基礎上只在明度上發(fā)生了變化。由于主要色調是淺橙色，明度越高飽和度越低，頁面上減弱了飽和度較高的橙色特性，整個網頁呈現(xiàn)出柔和自然稍有些發(fā)灰的調子。
該網頁是在橙色這個顏色上做不同明度黑白灰色階的柔和變化，屬于單色調．配色非常的單純。色階平穩(wěn)，同時存在著不夠醒目的狀態(tài)。白色在這里是起到了拉開主色調和輔色調空間距離，增強輔色調橙色的特性，使整個稍許有些發(fā)灰的頁面明快了不少。但也由于白色屬于非色彩，只在明度上呈最高數(shù)值而無彩度，不能給頁面帶來彩度所具有的鮮活靚麗的感覺，另方面卻也呈現(xiàn)出質樸的感受。
【網站設計師點評】
同類色是在同色相中不同的明度顏色變化。因此這類顏色相對其他類別顏色來說明凈而單純，配色上較容易達到協(xié)調統(tǒng)，但也容易顯得單調。初看該頁面配色協(xié)調舒服，但看多了的確有些單調乏味的感覺，這也是同類色搭配的特性。同時由于運用了漸變色這調和方法，該頁面同時占有了前面提到的4種色彩中的調和方法的兩種，整個頁面呈現(xiàn)出調和中的調和是毋庸置疑的，但也同時顯得有些單調，沒有色彩亮點。
4.網站設計色彩搭配經驗之黃色+橙色+橙紅色
【示例】橙色系鄰近色網頁示例截圖如圖10-69所示
分析
頁面第眼看上去似乎色調上變化很多，但該網頁的色彩構成主要是由黃色和橙色這兩種鄰近色構成的．通過不同的明度和純度的變化而得到更為豐富的色階，它們是淺黃色、黃色、橙色、橙紅通過不同的形狀面積，位置變化而得。從HSB數(shù)值中的H可以看出屬于暖色范疇，3個色相的傾向不是很明顯，以至于色彩呈現(xiàn)較規(guī)律、緩和。由于不同數(shù)值的明度表達，純度也做出了不同的數(shù)值變化。
淺色在這里主要起到調和主色調和點睛色的色彩過渡作用。點睛色在這里起到強調整個頁面的華麗感，增強整個頁面彩度的作用。
【網站設計師點評】
橙色與鄰近色黃、紅暖色調的搭配組合，是種簡單又安全的方法，視覺韻律上處理得井然有序。整個頁面看起來艷澤華麗、新鮮充滿活力的感覺，符合Tide這主題所要表達的目的。
5.網站設計色彩搭配之橙色+藍色
【示例】橙色系對比色應用網頁示例如圖10-70所示
分析
HSB數(shù)值中的H色相顯示主色調橙紅色為26，因為正紅色的H為。，正橙H為30，主色調橙紅色是往。偏移而得。正藍色是240．而該點睛色藍色為192．往綠度偏移，在RGB中的數(shù)值G160也能看出來，因此藍色的特性不是很強。但由于橙紅色的明度和飽和度達到最高值，因此盡管藍色不是正藍，但它的特性得到了很大程度的發(fā)揮。
此種橙藍對比色中的藍色調配，比較少見，讓人很容易記住它。而橙紅色的飽和度明度都非常高，刺激度強，屬于讓人不可久視的顏色。介于橙紅色和藍色之間，與藍色面積相當?shù)陌咨?，起到調和對比色橙紅與藍色之間關系的作用。
【網站設計師點評】
這組對比色通過使用的面積位置的不同來反映主次之間的關系。對比色能相互強烈地突出色彩特性。這組對比色屬于非常能凸顯個性的顏色。
6.網站設計色彩搭配經驗之橙色+綠色
【示例】橙色系低對比度應用網頁示例如圖l0-7l所示
分析
如果不看數(shù)值參數(shù)，直觀分析這是組純度較低的顏色。HSB數(shù)值H顯示主色調為正橙色，而黃綠色的明度較低且色相傾向不夠明確，加之背景有少許的暗橙色紋樣，整個頁面沒有高亮度白色點綴襯托，使得純度的彩度不夠確切，就很容易造成該頁面純度較低的錯覺。整個頁面最亮的顏色除了“書本”最亮色淺黃色外，就是點睛色黃色了。我們知道黃色是所有彩度色中明度最高的顏色，不同明度純度的黃色系讓整個頁面明亮了不少，它是整個頁面明度色階的最高調。黃綠色的出現(xiàn)，讓本只有鄰近色的橙色系列多了些內容，頁面配色豐富不少、視覺節(jié)奏多了些變化。
【網站設計師點評】
這類顏色的組合隨著不同色階明度的變暗，整個頁面沒有白色襯托，制造出另外種古典的環(huán)境氛圍，有如娓娓道來的故事場景，也是一種不錯的主題配色方法。本頁面的配色設計亮點是無白色設計。
7.網站設計色彩搭配之橙紅色+綠色
【示例】橙色系兩純度高對比度應用網頁示例截圖如圖10-72所示
分析
黃色是中間色，起到過渡對比色作用，在這組色里屬于調和色。藍色出現(xiàn)在產品圖案上，引導主次關系，增強視覺的注目點。與上組的橙色綠色相比，這組顏色強烈而刺激，色彩傾向無疑明確了很多。主色調橙紅色往紅色傾向，而紅色的對比色是綠色，因此整組顏色有強烈的對比效果。從HSB數(shù)值H上看，除了藍色外，其余幾種顏色純度都非常高，加上又是近于紅綠對比色。頁面的刺激強度是可想而知的強烈。
【網站設計師點評】
橙色是容易引起食欲的顏色，在這里得到了較充分的應用。非色彩的白色和黑色在這里起到了非常重要的作用，拉大了色彩色階空間的距離。白色讓整個色調組合更加明快，而黑色增添色彩的厚重質感強烈中的強烈，增強對產品的視覺刺激。
網站制作公司總結
橙色在HSB數(shù)值的H中為30度．是正橙色。橙色是個非常響亮注目的顏色。橙色的對比色是藍色，當這兩種顏色彩度傾向越明確，對比強度就越大。但我們也看到，除了正宗的對比色橙藍色外，橙色和綠色隨著純度的升高，達到的對比效果也很強烈。
在配色設計中可以多些不同明度、純度玲暖對比的嘗試，會有意想不到的收獲。白色是所有網頁設計中屬于較通用的顏色，它容易突出彩度的特性，明快于整個頁面，當個頁面設計沒有使用白色時，空間感覺減弱，容易造成彩度不夠明確、頁面有些沉悶等反應，相對來說增添頁面的厚重感覺，制造另外種環(huán)境氣氛。黑色在色調組合的輔助角色里容易制造出厚重的色彩效果。好了，網站制作公司前端設計師關于網頁設計時對于色彩搭配處理技巧以及方法本文就介紹到這里，謝謝關注。博納網絡編輯整理。
