網(wǎng)頁配色教程實(shí)例剖析-灰色系
灰色,中性色、中等明度、無色彩、極低色彩的顏色。灰色能夠吸收其他色彩的活力,削弱色彩的對(duì)立面,而制造出融合的作用。
灰色是一種中立色,具有中庸、平凡、溫和、謙讓、中立和高雅的心理感受,也被稱為高級(jí)灰,是經(jīng)久不衰、最經(jīng)看的顏色。
任何色彩加入灰色都能顯得含蓄而柔和。但是灰色在給人高品味、含蓄、精致、雅致耐人尋味的同時(shí),也容易給人頹廢、蒼涼、消極、沮喪、沉悶的感受,如果搭配不好頁面容易顯得灰暗、臟。
從色彩學(xué)上來說,灰色調(diào)又泛指所有含灰色度的復(fù)合色,而復(fù)合色又是三種以上顏色的調(diào)和色。色彩可以有紅灰、黃灰、藍(lán)灰等上萬種彩色灰,這都是灰色調(diào),而并不單指純正的灰色。
下面我們根據(jù)灰色搭配不同的顏色所表現(xiàn)出的視覺特性,做一些不同的舉例分析。
1、灰色配色(灰色+青藍(lán)色)應(yīng)用網(wǎng)頁例圖:http://www.stylestation.net
灰色系分析:(灰色+青藍(lán)色)
肉眼看上去已經(jīng)能識(shí)別到了深灰色主色調(diào)有青藍(lán)色傾向,從HSB模式上能夠看到色相為180度,該深灰色飽和度和明度都比較低。
點(diǎn)睛色是淺青藍(lán)色,HSB模式H色相所呈現(xiàn)的色相與主色調(diào)的數(shù)值一致,屬高明度低飽和度色系。
主色調(diào)是明度較低的深灰色,是屬于較沉悶的顏色;而點(diǎn)睛色是淺青藍(lán)色,在深灰色的背景下略呈現(xiàn)有些暗淡,并沒有改善和帶來明快的感覺,輔助色是白色大面積的介入而因此使得整個(gè)頁面得到一定的透亮緩解,這是該頁面至關(guān)重要的一色。
結(jié)論:
該頁面用色不多,深灰、淺青藍(lán)、白,但合理的運(yùn)用這三種顏色的配色角色,能使頁面煥發(fā)與眾不同的氣質(zhì)魅力。
2、灰色配色(灰色+棕黃色)應(yīng)用網(wǎng)頁例圖:http:// www.davychan.com
灰色系分析:(灰色+棕黃色)
主色調(diào)是由兩種明度較接近的灰色構(gòu)成。從RGB和HSB模式上能看到這兩種灰色屬于純正的非色彩,沒有其他的顏色摻雜進(jìn)去。
輔助色為復(fù)色,我們知道復(fù)色是由兩種間色或者原色和間色混合產(chǎn)生,通常所混合產(chǎn)生的顏色色相不明顯,當(dāng)某種顏色所占的比重大時(shí),該顏色的色相才相較突 出。從H色相上看顏色稍偏黃色,由于混合其他顏色且明度較低,因此呈棕黃色。復(fù)色棕黃色在背景深灰的襯托下低調(diào)不張揚(yáng),能很好的與之融為一體。
點(diǎn)睛色H顯示120度是正綠色。該綠色選擇了明度適中純度不高的配色,既表達(dá)了主題又能與整個(gè)頁面灰調(diào)子很好的調(diào)和一起。另一點(diǎn)睛色白色讓所有的顏色的特性都得以很好的發(fā)揮并起到拉開色階層次的作用。
結(jié)論:
深灰色具有謙虛、平凡、沉默、中庸、寂寞、憂郁、消極的心理感受。
主色調(diào)主要集中在背景的運(yùn)用和變化上,增強(qiáng)頁面的空間感,視覺元素頗有時(shí)尚現(xiàn)代的氣息,與前景的色彩明度純度稍有變化又在視覺上達(dá)到風(fēng)格統(tǒng)一。
3、灰色配色(無彩色搭配)應(yīng)用網(wǎng)頁例圖:http://www.hejz.com
灰色系分析:(無彩色搭配)
就像回到了古老的黑白照年代。初看該頁面容易把背景的深灰色誤認(rèn)為是黑色,再仔細(xì)觀看就感覺到了此種深灰色不凡的作用,假如背景色使用了黑色,頁面的主體人物和空間感的相互作用就變得僵硬且呆板。
從RGB和HSB模式上可知主色調(diào)深灰色為純正的非色彩,明度很低。但與人物的毛發(fā)對(duì)比下就能看出它們明度之間的差異。
輔助色這里取的是照片的膚色,也是純正的淺灰色,該人物占據(jù)了該頁面三分之一的面積,主次鮮明。
盡管點(diǎn)睛色是明度最高的白色,但是由于只在小文字上的小面積使用,因此只起到了點(diǎn)綴一下頁面細(xì)節(jié)突顯主次關(guān)系的作用。
結(jié)論:
根據(jù)前面最初講的網(wǎng)頁應(yīng)用部分的第一節(jié)色調(diào),主色調(diào)、輔色調(diào)、點(diǎn)睛色所使用的面積比例來看,該頁的例子得到了很好的詮釋。
由于該頁面是非色彩黑白灰構(gòu)成,頁面配色分析就變得簡單化了不少,因此在其他頁面實(shí)例里出現(xiàn)的主色調(diào)、輔色調(diào)、點(diǎn)睛色不同的色彩內(nèi)斂與張揚(yáng)的特性在這里也就涉及不到了。
4、灰色配色(灰色+對(duì)比色)網(wǎng)頁例圖:http://www.fantasy-interactive.com
灰色系分析:(灰色+對(duì)比色)
從 RGB和HSB模式上可看出主色調(diào)不是純正的非色系,里面摻雜了其他色彩,肉眼識(shí)別及H色相為32范圍上都能看出含有微弱的黃色調(diào)在里 面,S13%B46%分別顯示該種顏色含濃重的灰色,有少量的黃色加入結(jié)合整個(gè)頁面的配色是比較調(diào)和的搭配。輔色調(diào)則是運(yùn)用了比較正的淺灰色。
點(diǎn)睛色主要是一組橙色、藍(lán)色對(duì)比色構(gòu)成,從雙方的H色相上也能看出來。RGB模式上看到這兩種顏色都或多或少的摻雜了其他的顏色在里面,所以明度純度上 呈灰色階傾向。另一點(diǎn)睛色淺黃色相上呈現(xiàn)正黃色,但由于明度非常高因此色彩呈不飽和狀態(tài),盡管如此在主色調(diào)灰色的背景下還是比較突出的。
結(jié)論:
該頁面依舊以灰色為主導(dǎo)位置,雖然主色調(diào)灰色少量摻雜了黃色,與頁面其他黃色色彩元素較統(tǒng)一調(diào)和。點(diǎn)睛色主要是以兩對(duì)比色做主導(dǎo),相對(duì)其他顏色飽和度較高且面積使用得不少,較響亮和突出產(chǎn)品目的。在主色調(diào)灰黃色特性掌控下卻也到達(dá)醒目又和諧的目的。
本文地址:http://m.likemindfilms.com/tutorial/di1175.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏