建站常識
網(wǎng)頁設計配色應用實例剖析——灰色系
2007-08-09 10:53:00
灰色是一種中立色,具有中庸、平凡、溫和、謙讓、中立和高雅的心理感受,也被稱為高級灰,是經(jīng)久不衰、最經(jīng)看的顏色。
任何色彩加入灰色都能顯得含蓄而柔和。但是灰色在給人高品味、含蓄、精致、雅致耐人尋味的同時,也容易給人頹廢、蒼涼、消極、沮喪、沉悶的感受,如果搭配不好頁面容易顯得灰暗、臟。
從色彩學上來說,灰色調(diào)又泛指所有含灰色度的復合色,而復合色又是三種以上顏色的調(diào)和色。色彩可以有紅灰、黃灰、藍灰等上萬種彩色灰,這都是灰色調(diào),而并不單指純正的灰色。
下面我們根據(jù)灰色搭配不同的顏色所表現(xiàn)出的視覺特性,做一些不同的舉例分析。
→ 灰******頁(明度淺灰色)例圖:http://www.canubia.com
灰色系分析:(明度淺灰色)
從頁面所呈現(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)生過多的印象。紅色的特性把以上的這些平淡的感受打破了,讓人愿意細品灰色所帶來的悠長韻味。
HSB模式的B也能看出淺灰色在明度上較高,部分漸變的深灰色在頁面上所占用的面積也不少,另一點睛色黑色的作用就是使明度色階跨度加深、明確,整個頁面呈現(xiàn)灰蒙蒙的感覺得以減弱。
結論:
該頁面整個看起來也可以說只有兩種色彩搭配,即非色彩系黑白灰和色彩系紅色,頁面顯得非常簡潔而含蓄。點睛色的加入減少了非色調(diào)淺灰色有可能產(chǎn)生的單調(diào)感覺。
#p# → 灰******頁(同類灰色系:灰色+橙色)例圖:http://www.hcreativos.com
灰色系分析:(同類灰色系:灰色+橙色)
該頁面主要以大面積的灰色系列為主,主色調(diào)為背景色非常明確。部分灰色只在明度上加深了,增強灰色的空間感。
從RGB所呈現(xiàn)的均衡數(shù)值及HSB模式的HS都為零來看,主色調(diào)的淺灰色屬于非常純凈的非色彩,沒有摻雜其他色系進去。而輔色調(diào)的兩個模式上就有些差異,HSB模式的H顯示180度色相上偏青藍色,有及其微弱的飽和度,明度也較低。點睛色壬獺SB顯示為正桔紅色且飽和度和明度都為100%,應該是及其耀眼的顏色,然而在大面積背景主色調(diào)下,此種耀眼的顏色得到緩解,這正是與灰色的配色后顯示出灰色最強烈的特性--削弱緩和刺激耀眼的顏色。
點睛色橙色和白色點綴下打破了平面平淡的配色格局,眼前頓時一亮的感覺。
結論:
灰色調(diào)非色彩所構成的頁面頗具有獨特的魅力,整個頁面呈現(xiàn)出平穩(wěn)緩和的氣質(zhì)。兩個點睛色橙色和白色起到調(diào)動配色頁面的作用。
#p# → 灰色應用(同類灰色+多種顏色)網(wǎng)頁例圖: http://www.kimbyungjin.com
灰色系分析:(同類灰色+多種顏色)
這是一個灰色階變化較多的頁面,形成較有節(jié)奏塊面分明的韻律美感。這一變化改善了灰色容易形成的呆板單調(diào)特性。
從HSB模式數(shù)值來看,主色調(diào)輔色調(diào)都是非色彩的正灰色,沒有摻雜其他色彩進去。點睛色黃色、綠色H數(shù)值上顯示有些色相偏移都略向暖色色環(huán)靠攏,這兩顏色的特性是屬于較顯眼的顏色。另外兩點睛色粉紅和粉藍色在色相上已經(jīng)較接近于正色系,明度較高飽和度降低。這四種顏色盡管所使用的面積非常少,但結合了面積上相對使用較多的非色彩白色,讓整個頁面配色雅致的同時不乏生動活躍。
結論:
不同灰色背景的變化,前景使用面積較少的純凈色點綴,這幾種顏色還同樣出現(xiàn)在右上角產(chǎn)生平衡色彩的呼應作用,整個頁面產(chǎn)生雅致和諧的視覺美感。
#p# → 灰色配色(灰色+對比色)網(wǎng)頁例圖:http://www.fantasy-interactive.com
灰色系分析:(灰色+對比色)
從RGB和HSB模式上可看出主色調(diào)不是純正的非色系,里面摻雜了其他色彩,肉眼識別及H色相為32范圍上都能看出含有微弱的黃色調(diào)在里面,S13%B46%分別顯示該種顏色含濃重的灰色,有少量的黃色加入結合整個頁面的配色是比較調(diào)和的搭配。輔色調(diào)則是運用了比較正的淺灰色。
點睛色主要是一組橙色、藍色對比色構成,從雙方的H色相上也能看出來。RGB模式上看到這兩種顏色都或多或少的摻雜了其他的顏色在里面,所以明度純度上呈灰色階傾向。另一點睛色淺黃色相上呈現(xiàn)正黃色,但由于明度非常高因此色彩呈不飽和狀態(tài),盡管如此在主色調(diào)灰色的背景下還是比較突出的。
結論:
該頁面依舊以灰色為主導位置,雖然主色調(diào)灰色少量摻雜了黃色,與頁面其他黃色色彩元素較統(tǒng)一調(diào)和。點睛色主要是以兩對比色做主導,相對其他顏色飽和度較高且面積使用得不少,較響亮和突出產(chǎn)品目的。在主色調(diào)灰黃色特性掌控下卻也到達醒目又和諧的目的。
#p# → 灰色配色(灰色+青藍色)應用網(wǎng)頁例圖:http://www.stylestation.net
灰色系分析:(灰色+青藍色)
肉眼看上去已經(jīng)能識別到了深灰色主色調(diào)有青藍色傾向,從HSB模式上能夠看到色相為180度,該深灰色飽和度和明度都比較低。
點睛色是淺青藍色,HSB模式H色相所呈現(xiàn)的色相與主色調(diào)的數(shù)值一致,屬高明度低飽和度色系。
主色調(diào)是明度較低的深灰色,是屬于較沉悶的顏色;而點睛色是淺青藍色,在深灰色的背景下略呈現(xiàn)有些暗淡,并沒有改善和帶來明快的感覺,輔助色是白色大面積的介入而因此使得整個頁面得到一定的透亮緩解,這是該頁面至關重要的一色。
結論:
該頁面用色不多,深灰、淺青藍、白,但合理的運用這三種顏色的配色角色,能使頁面煥發(fā)與眾不同的氣質(zhì)魅力?!?p# → 灰色配色(灰色+棕黃色)應用網(wǎng)頁例圖:http:// www.davychan.com
灰色系分析:(灰色+棕黃色)
主色調(diào)是由兩種明度較接近的灰色構成。從RGB和HSB模式上能看到這兩種灰色屬于純正的非色彩,沒有其他的顏色摻雜進去。
輔助色為復色,我們知道復色是由兩種間色或者原色和間色混合產(chǎn)生,通常所混合產(chǎn)生的顏色色相不明顯,當某種顏色所占的比重大時,該顏色的色相才相較突出。從H色相上看顏色稍偏黃色,由于混合其他顏色且明度較低,因此呈棕黃色。復色棕黃色在背景深灰的襯托下低調(diào)不張揚,能很好的與之融為一體。
點睛色H顯示120度是正綠色。該綠色選擇了明度適中純度不高的配色,既表達了主題又能與整個頁面灰調(diào)子很好的調(diào)和一起。另一點睛色白色讓所有的顏色的特性都得以很好的發(fā)揮并起到拉開色階層次的作用。
結論:
深灰色具有謙虛、平凡、沉默、中庸、寂寞、憂郁、消極的心理感受。
主色調(diào)主要集中在背景的運用和變化上,增強頁面的空間感,視覺元素頗有時尚現(xiàn)代的氣息,與前景的色彩明度純度稍有變化又在視覺上達到風格統(tǒng)一。
#p# → 灰色配色(無彩色搭配)應用網(wǎng)頁例圖:http://www.hejz.com
灰色系分析:(無彩色搭配)
就像回到了古老的黑白照年代。初看該頁面容易把背景的深灰色誤認為是黑色,再仔細觀看就感覺到了此種深灰色不凡的作用,假如背景色使用了黑色,頁面的主體人物和空間感的相互作用就變得僵硬且呆板。
從RGB和HSB模式上可知主色調(diào)深灰色為純正的非色彩,明度很低。但與人物的毛發(fā)對比下就能看出它們明度之間的差異。
輔助色這里取的是照片的膚色,也是純正的淺灰色,該人物占據(jù)了該頁面三分之一的面積,主次鮮明。
盡管點睛色是明度最高的白色,但是由于只在小文字上的小面積使用,因此只起到了點綴一下頁面細節(jié)突顯主次關系的作用。
結論:
根據(jù)前面最初講的網(wǎng)頁應用部分的第一節(jié)色調(diào),主色調(diào)、輔色調(diào)、點睛色所使用的面積比例來看,該頁的例子得到了很好的詮釋。
由于該頁面是非色彩黑白灰構成,頁面配色分析就變得簡單化了不少,因此在其他頁面實例里出現(xiàn)的主色調(diào)、輔色調(diào)、點睛色不同的色彩內(nèi)斂與張揚的特性在這里也就涉及不到了。
本部分小節(jié):
● 灰色謙和內(nèi)斂的特性決定了不同明度的灰色扮演的是輔佐陪襯的角色。
● 非色彩就是沒有彩度的顏色,而灰色相對黑色、白色要多些變化,因為它能的通過明度來表達不同的性格特征。
● 灰色與其他彩度色彩搭配時能降低張揚耀眼的顏色,調(diào)和色彩的方法之一。兩種或兩種以上的色彩混合,如能配上灰色,這兩個色調(diào)本身必能相互調(diào)和。
● 以上的例子中不難看出,都是非色彩系灰色為主色調(diào)點綴極少面積的色彩系,色彩運用的面積反差越大,頁面所呈現(xiàn)的獨特魅力也就越強烈?;疑奶匦栽谟谀馨汛碳ひ鄣念伾岷突?,這將是調(diào)和多個頁面配色的利器,但要也要注意不同明度灰色所起到的配色作用,不同明度的灰色搭配不同的彩度顏色時,所得到的結果差別是很大,根據(jù)整體頁面配色應在灰色明度上要反復的調(diào)整。
● 無彩度的黑白灰不同面積的使用,相對彩度色系來說是比較容易的顏色搭配,且能包容所有的彩度顏色。
(68design_2編輯)
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設計的五大特點
- [2023-04-27 14:05:55] Html 5 響應式網(wǎng)站設計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設計應該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設為什么要設置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應該如何選擇一家水平高的網(wǎng)站建設公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設計都有哪些新的趨勢?
延伸閱讀
- [2009-11-18 22:41:00] 為銷售服務的網(wǎng)頁設計思路
- [2009-09-07 08:11:00] 網(wǎng)頁設計趨勢之:”勾引”用戶的按鈕
- [2016-08-08 14:42:00] “定制”背后的智能模板建站的隱患
- [2010-05-11 10:50:00] 設計中的色彩:黑色
- [2006-12-28 16:41:00] 網(wǎng)頁設計不良損害健康
- [2009-04-26 22:33:00] 白色在網(wǎng)頁設計中的使用:貼士和趨勢
- [2010-03-28 21:39:00] 中國網(wǎng)頁設計沒有特點
- [2010-07-09 16:18:00] 科幻風格的多樣性及探索歷程
- [2007-05-19 17:44:00] 汽車網(wǎng)站的配色
- [2007-07-02 15:06:00] 網(wǎng)頁設計配色:原色
- [2006-08-21 14:02:00] 網(wǎng)頁設計配色基礎:RGB與HSB
- [2012-10-12 11:44:41] 根據(jù)用戶習慣的人性化網(wǎng)頁設計
解決方案
輪胎行業(yè)網(wǎng)站設計解決方案 機械行業(yè)網(wǎng)站設計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設計解決方案 科技企業(yè)網(wǎng)站設計解決方案 電子家電網(wǎng)站設計解決方案 食品行業(yè)網(wǎng)站設計解決方案 集團公司網(wǎng)站設計解決方案 企事業(yè)單位網(wǎng)站設計解決方案 外貿(mào)行業(yè)網(wǎng)站設計解決方案 健身運動網(wǎng)站設計解決方案 美容與化妝品網(wǎng)站設計解決方案 建筑設計行業(yè)網(wǎng)站設計解決方案 物流行業(yè)網(wǎng)站設計解決方案
TAGS關鍵字
如何做網(wǎng)站優(yōu)化 網(wǎng)站SEO 中小型企業(yè)網(wǎng)站建設 營銷型網(wǎng)站建設 搜索引擎蜘蛛 青島黃島、紅島網(wǎng)站建設公司 微信開發(fā) 海信網(wǎng)絡科技 H5定制設計 GOOGLE 微官網(wǎng)帶來的好處 網(wǎng)站建設的步驟有哪些 搜索引擎 青島好的網(wǎng)站優(yōu)化公司 集團公司網(wǎng)站建設 青島海洋投資集團 審美 青島高端網(wǎng)站建設 青島輪胎網(wǎng)站設計 青島IT資訊 網(wǎng)站推廣 青島網(wǎng)站建設公司哪家好 網(wǎng)頁設計 新的元素 外貿(mào)網(wǎng)站建設 良好的導航 網(wǎng)站的速度 企業(yè)建站 企業(yè)網(wǎng)站為什么要備案 外貿(mào)網(wǎng)站設計