建站常識
網(wǎng)頁設(shè)計(jì)配色應(yīng)用實(shí)例剖析——綠色系
2007-01-04 15:10:00
綠色在黃色和藍(lán)色(冷暖)之間,屬于較中庸的顏色,這樣使得綠色的性格最為平和、安穩(wěn)、大度、寬容。是一種柔順、恬靜、滿足、優(yōu)美、受歡迎之色。也是網(wǎng)頁中使用最為廣泛的顏色之一。
綠色與人類息息相關(guān),是永恒的欣欣向榮是的自然之色,代表了生命與希望,也充滿了青春活力,綠色象征著和平與安全、發(fā)展與生機(jī)、舒適與安寧、松弛與休息,有緩解眼部疲勞的作用。
它本身具有一定的與自然、健康相關(guān)的感覺,所以也經(jīng)常用于與自然、健康相關(guān)的站點(diǎn)。綠色還經(jīng)常用于一些公司的公關(guān)站點(diǎn)或教育站點(diǎn)。
綠色能使我們的心情變得格外明朗。黃綠色代表清新、平靜、安逸、和平、柔和、春天、青春、升級的心理感受。
下面我們根據(jù)綠色系不同屬性鄰近色、同類色的高純度低純度、對比色等色彩搭配做不同的舉例分析。
→ 綠******頁例圖:http://www.bacardimojito.com
綠色系分析:
從上圖的主色調(diào)、輔色調(diào)HSB模式的數(shù)值可看出,這兩中顏色只是在明度上有區(qū)別,其顯示的色相與飽和度是一樣的。正綠色是120度,這兩種顏色從RGB數(shù)值上看,都不同程度的混合了其他少許顏色,因此離正綠色稍有些偏差。由于綠色本身的特性,所以整個(gè)網(wǎng)頁看起來很安穩(wěn)舒適。
輔助色只在明度上降低,讓頁面多了些層次感、空間感。
白色塊面使得綠色的特性發(fā)揮到最好的狀態(tài)并增強(qiáng)了視覺節(jié)奏感。
點(diǎn)睛色恰到好處的體現(xiàn)出了"點(diǎn)睛"這一妙筆,極盡誘惑力,整個(gè)頁面頓時(shí)生動(dòng)提神起來,增強(qiáng)了頁面主題的表達(dá)力。
結(jié)論:
主、輔色調(diào)是屬于同類色綠色系,通過不同明度的變化,能較遞增緩和變化同時(shí)卻也較明顯的體現(xiàn)出頁面的色彩層次感來。如果不是通過數(shù)值來分析判斷,可能會(huì)有些朋友憑經(jīng)驗(yàn)判斷,容易誤認(rèn)為這兩種顏色除了明度外有可能純度會(huì)有所不同,這時(shí)候適當(dāng)?shù)氖褂脭?shù)值模式會(huì)很容易得到正確的結(jié)論的。
整個(gè)頁面配色很少:最大色塊的翠綠,第二面積的白色,第三面積的深綠色,但得到的效果卻是強(qiáng)烈的、顯眼的,達(dá)到充分展現(xiàn)產(chǎn)品主題的目的。
深綠色給人茂盛、健康、成熟、穩(wěn)重、生命、開闊的心理感受。#p# → 綠色高純度網(wǎng)頁例圖:http://www.marocfruitboard.com
綠色系分析: (高純度配色:綠色+對比色組合)
HSB數(shù)值H顯示60度為正黃色,該主、輔色調(diào)只向綠色傾斜了一丁點(diǎn)--H為75度。大面積明度稍低的黃綠色為主要色調(diào),飽和度卻非常高,達(dá)到了100%,輔助色使用了提高明度的嫩綠色和白色,這兩種輔色除了增加頁面的層次感的同時(shí),還能讓整個(gè)頁面配色有透亮的感覺,增強(qiáng)了綠色的特性。背景深褐色無疑把前景的所有純色烘托得都耀眼于舞臺上。
該頁面有兩組小小的對比色,一組是黃綠與橙紅色,一組是橙黃色與天藍(lán)色,這兩組配色嚴(yán)格的來說不算對比色,因?yàn)樯识嗌儆行┢睢km然它們的飽和度降低,但在這個(gè)頁面中足以構(gòu)成了最響亮的色調(diào),把整個(gè)頁面烘托得非?;钴S、鮮明。
結(jié)論:
主、輔色調(diào)黃綠色大面積使用并不刺目,反而使得頁面看起來很有朝氣、活力。
適當(dāng)運(yùn)用不同純度的不是相當(dāng)嚴(yán)格意義上的對比色系組合時(shí),通常能起到的主要作用是主次關(guān)系明確。不"標(biāo)準(zhǔn)"的對比色系對比特性雖然減弱,頁面色彩看起來容易協(xié)調(diào)、柔和,但一樣能突出主題。#p# → 同類色淺綠******頁例圖 :http://shehouse.we.tv
綠色系分析:(同類色淺綠色)
主色調(diào)綠色屬性是明度很高的淺綠色,前面提到過,通常情況下明度高飽和度就降低,飽和度低頁面色彩度就降低,除非顏色本身有自己的特性,加上大面積的輔助色白色,整個(gè)頁面看起來很清淡、柔和、寧靜,甚至有溫馨的感覺。
頁面中使用了漸變的淺綠色,使得整個(gè)頁面視覺上更加柔和舒適。
盡管點(diǎn)睛色只在主要標(biāo)志上出現(xiàn),按鈕也只有少許一點(diǎn),但也給整個(gè)頁面的色彩帶來些亮筆。尤其是紅色的HSB模式的H數(shù)值顯示顏色接近于正紅色,飽和度達(dá)到最高值。另一個(gè)點(diǎn)睛色中黃色,在頁面視覺上呈綠色與紅色這一組對比色起到緩和視覺的作用。因?yàn)樵谏啽砩希S色正是在綠色和紅色之間的過渡色。
結(jié)論:
淺綠色系有優(yōu)雅、休息、安全、和睦、寧靜、柔和的感覺。
漸變的效果更能加深這種印象。但頁面配色上淺色過多時(shí),整個(gè)頁面容易呈現(xiàn)發(fā)"灰"的感受,這就需要適量的添加純度稍高的顏色例如左下角的輔助色綠色塊,適當(dāng)?shù)孽r艷的點(diǎn)睛都能很好的解決這一問題。
#p# → 綠色弱對比網(wǎng)頁例圖:http://www.visualade.com
綠色系分析:(黃綠色+弱對比)
從HSB模式的數(shù)值上看,主色調(diào)是接近于黃色的基礎(chǔ)上加入了少許綠色在里面,飽和度和明度降低,色彩看起來較柔和。輔色調(diào)墨綠色的綠色的傾向稍高,飽和度也較高,只是明度降低,該色看起來踏實(shí)沉穩(wěn)。
點(diǎn)睛色紅色H數(shù)值為零度,呈正紅色,但是該顏色飽和度和明度降低,而紅色本身的色度比黃綠色要暗不少,因此顏色穩(wěn)重。另一點(diǎn)睛色藍(lán)綠色,明度飽和度都很低,在頁面配色里似乎沒有點(diǎn)睛感覺,更多的是呈輔助狀態(tài)。
結(jié)論:
主色調(diào)是相對比較鮮亮的顏色,而輔助色和點(diǎn)睛色是屬于比較沉穩(wěn)的顏色,頁面通過大小色塊的對比提高視覺的反差力度,增強(qiáng)頁面的感染力。
由于整個(gè)頁面的飽和度整體稍微降低,因此該頁面配色較協(xié)調(diào)、緩和。#p# → 同類綠色+多種點(diǎn)睛色例圖 :http://www.girlshop.com
綠色系分析:(綠色配色:同類綠色+多種點(diǎn)睛色)
主要色調(diào)HSB模式H數(shù)值顯示75度,依舊是色輪表里傾向于黃色區(qū)域方位邊緣的綠色,呈現(xiàn)出的黃綠色調(diào)。輔色調(diào)在明度上有些提亮,與主色調(diào)形成較強(qiáng)的對比。
點(diǎn)睛色里所使用的對比色組合有兩組,紅色與綠色,藍(lán)色與橙黃色,其中黃色是介于暖色(橙黃、紅色)和冷色(綠色、藍(lán)色)的過渡色也是調(diào)和色。
結(jié)論:
通過上面的分析大家可以看到,該網(wǎng)頁的配色不少,而且還有兩組對比色在內(nèi),但是頁面配色也很協(xié)調(diào)。原因之一,從下面抽取的色塊可以看出來,是一個(gè)過渡柔和的色輪表:以黃色為中界一邊是較淺的黃綠到綠色再到藍(lán)色,另一邊是橙黃再到紅色。原因之二,點(diǎn)睛色畢竟是扮演著點(diǎn)睛色的角色,有主色調(diào)和輔色調(diào)大面積的控制,即便再多些點(diǎn)睛色也不至于很快干擾到頁面的整體配色。
整個(gè)頁面保證了協(xié)調(diào)、不凌亂的步調(diào),但是又能把商業(yè)網(wǎng)站的熱鬧氛圍體現(xiàn)得很好的渲染。此種配色方法值得我們學(xué)習(xí)借鑒。
#p# → 綠色鄰近色應(yīng)用網(wǎng)頁例圖 :http://www.codcefngwlad.org.uk
綠色系分析:(鄰近色配色:綠色+藍(lán)色)
全頁使用的主要色調(diào)基本上是屬于明度較高飽和度較低的顏色,其中還使用了漸變色緩和的過渡,因此頁面看起來舒服協(xié)調(diào)。
主色調(diào)是飽和度較高的翠綠色運(yùn)用于背景色,幾乎是調(diào)節(jié)于整個(gè)頁面的關(guān)鍵色。如果沒有這一背景色塊,整個(gè)頁面容易發(fā)灰。還有右邊的粉綠大塊面積稍多,有些灰的感覺,好在前景的文章使用了色度明度稍深的藍(lán)色壓住,稍顯好些,關(guān)鍵還是有白色的箭頭很好的把粉綠和藍(lán)色文字的色階拉開了距離。左邊的照片清晰且純度較高也對整個(gè)頁面配色起到一定的調(diào)節(jié)作用。
點(diǎn)睛色主要是標(biāo)志的顏色,如果可以忽略不計(jì),頁面配色更趨于平淡。
結(jié)論:
明度較高飽和度較低的顏色,如果沒有明度較深飽和度較高的顏色進(jìn)行勾勒或者點(diǎn)綴,這個(gè)頁面配色看起來容易發(fā)灰。
#p# → 綠色對比******頁例圖:http://www.fitintercambio.com.br
綠色系分析:(對比色配色:綠色+紅色)
主色調(diào)是有點(diǎn)黃色傾向的綠色,從HSB數(shù)值上可以看到H為98度,綠色特性較明顯了。
輔助色則是三個(gè)淺色系,起到調(diào)和整個(gè)頁面色彩的作用。粉紅和粉綠色分別取的是頁面綠色紅色通過提高明度而得,因此整個(gè)頁面色彩前后呼應(yīng)、配色調(diào)和。
點(diǎn)睛色紅色的HBS模式H數(shù)值351度,在色輪表上偏向于紫色方位,因此傾向于冷紅色,色度上稍有些刺目和艷麗。
主色調(diào)綠色和點(diǎn)睛色紅色所放置的位置,讓頁面導(dǎo)航區(qū)域和內(nèi)容區(qū)域視覺引導(dǎo)較為分明:主色調(diào)綠色的設(shè)計(jì)亮點(diǎn)既用于導(dǎo)航又很流暢自然的融合到背景,渾然一體;這里尤其是點(diǎn)睛色紅色放置于背景的處理很獨(dú)到,烘托突出于前景內(nèi)容,在眾多網(wǎng)頁設(shè)計(jì)中并不多見。
結(jié)論:
整個(gè)頁面的配色取色于標(biāo)志色,量身定做的感覺。
適當(dāng)?shù)倪\(yùn)用對比色有強(qiáng)調(diào)的感覺,但頁面配色處理上并不強(qiáng)烈、耀眼,因?yàn)槭褂昧税咨捌湎鄳?yīng)的提高明度的粉色做視覺的緩和處理。
本部分小節(jié):
● 綠色是緩和健康的顏色, HSB數(shù)值H色相為120度時(shí)是正綠色。大家通過以上的網(wǎng)頁實(shí)例可以看到,偏向于黃色方位的綠色運(yùn)用得最多,也就更受到大眾的歡迎。純正的正綠色在視覺感受上可能稍微顯得有些色度較低的生硬,配色難度稍大。不同的黃綠色飽和度、明度的不同變化可以表達(dá)不同主題的頁面效果。
● 點(diǎn)睛色可以是幾種,也可以是不同對比色的組合,有的起到豐富并活躍頁面配色的視覺節(jié)奏,有的起到調(diào)和整體頁面配色的作用。
輔助色通常是同類色系或者鄰近色系,起到輔助并烘托主色調(diào)的作用。輔色調(diào)和主色調(diào)分別在不同的頁面做為唯一高純度色的時(shí)候,能夠起到挽救于整個(gè)頁面發(fā)灰的作用。
● 當(dāng)整個(gè)頁面配色明度太高色度降低時(shí)候,頁面容易呈現(xiàn)發(fā)灰的感覺,可以適當(dāng)?shù)氖褂蒙僭S純度較高或者明度較低的色系來加以改善。
下一節(jié)我們介紹《網(wǎng)頁設(shè)計(jì)配色系列簡析——應(yīng)用部分》的第八節(jié)——藍(lán)色系。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(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è)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(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è)計(jì)都有哪些新的趨勢?
延伸閱讀
- [2016-08-10 11:14:00] 網(wǎng)頁設(shè)計(jì)之色彩搭配法則
- [2006-10-10 08:35:00] 網(wǎng)頁設(shè)計(jì)配色應(yīng)用——色彩的調(diào)和
- [2007-11-22 21:44:00] 網(wǎng)頁設(shè)計(jì)從應(yīng)何處著手
- [2016-09-03 10:10:00] 扁平化風(fēng)格網(wǎng)站的設(shè)計(jì)要求
- [2006-11-29 08:40:00] 網(wǎng)頁設(shè)計(jì)技巧系列之三 再談布局
- [2006-10-12 08:26:00] 網(wǎng)頁設(shè)計(jì)配色應(yīng)用實(shí)例剖析——紅色系
- [2006-08-22 22:09:00] WEB網(wǎng)頁設(shè)計(jì)中的全色系顏色表
- [2005-12-29 21:20:00] 網(wǎng)頁設(shè)計(jì)中色彩搭配的內(nèi)涵
- [2006-11-08 09:57:00] 學(xué)網(wǎng)頁設(shè)計(jì)與網(wǎng)頁制作,你該做些什么?
- [2009-11-12 08:30:00] 慢慢的網(wǎng)頁
- [2016-10-13 11:21:41] 高顏值的全屏導(dǎo)航網(wǎng)頁設(shè)計(jì)賞析
- [2006-01-06 21:50:00] 網(wǎng)頁設(shè)計(jì)應(yīng)防止的10個(gè)錯(cuò)誤
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
robots 青島高端網(wǎng)站設(shè)計(jì)公司哪家好 青島做網(wǎng)站多少錢 程序開發(fā) html和css 營銷型網(wǎng)站建設(shè) 互聯(lián)網(wǎng) SEO 外貿(mào)網(wǎng)站建設(shè) H5專題頁面 微網(wǎng)站 網(wǎng)站開發(fā) 膠南網(wǎng)站建設(shè)公司 高端輪胎網(wǎng)站設(shè)計(jì) 集團(tuán)性網(wǎng)站 青島網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì) 微信開發(fā) 扁平化設(shè)計(jì) 插畫 用戶界面 網(wǎng)站SEO 搜索引擎蜘蛛 網(wǎng)站視覺 青島網(wǎng)站營銷 網(wǎng)站優(yōu)化 搜索引擎 青島網(wǎng)站優(yōu)化 網(wǎng)頁設(shè)計(jì) 微信營銷的優(yōu)勢