建站常識
網(wǎng)頁設計配色應用實例剖析——黃色系
2006-11-22 08:34:00
黃色的性格冷漠、高傲、敏感、具有擴張和不安寧的視覺印象。
淺黃色系明朗、愉快、希望、發(fā)展,它的雅致,清爽屬性,較適合用于女性及化妝品類網(wǎng)站。
中黃色有崇高,尊貴,輝煌、注意、擴張的心理感受。
深黃色給人高貴、溫和、內(nèi)斂、穩(wěn)重的心理感受。
下面我們根據(jù)黃色系不同屬性鄰近色、同類色的高純度低純度色彩搭配做不同的舉例分析。 → 黃色系網(wǎng)頁例圖:www.bernhardwolff.com
黃色系分析:
黃色是所有彩色中明度最高的顏色。上圖看到HSB模式的H數(shù)值是60度,正是正黃色,但RGB數(shù)值中加入了B藍色數(shù)值為51,因此降低了HSB的飽和度S為80%,但是大面積的 黃色仍使得該頁面色彩明亮顯眼。
輔助色是純黑色,非色彩明度最低的顏色。
大面積顯眼的正黃色有黑色的線條壓制,黃色頓時顯得沉穩(wěn),頁面增添內(nèi)容感。
白色雖然是點睛色,但由于非色彩的白色與黃色的明度最高,因此這里似乎沒有起到"點睛"的作用。
結論:
當鮮度、明度高的背景色與前景輔助色暗度低的黑色在明度形成較強烈的對比時,艷度降低,較能協(xié)調(diào)視覺。
整個頁面配色單純,卻也不簡單,形成另一種設計風格。
→ 黃色同類******頁例圖:www.paralotna.pl
黃色同類色分析
該頁面的配色很單純,是同類色的黃色不同明度顏色,頁面看起來干凈、單純。
點睛色白色淡黃色在深色黃色背景下比較顯眼,且在最中間位置,是整個頁面中的高調(diào)部分。
這三種黃色,明度都很高,只有背景輔助色明度稍低,點睛黃色H色相是三種顏色中黃色傾向最高的為57度,而60度是正黃色,因此明度也是最高的,充分的發(fā)揮其點睛色的作用。
背景色和前景色只在色相上明度上有非常微妙的變化,卻也很巧妙,形成了變化較明顯的空間層次感,削弱了同類色易產(chǎn)生的單調(diào)感。點睛色白色讓層次感更明顯。
結論:
同類色的屬性使得整個頁面非常和諧,可以根據(jù)不同的主題來設計配色。
可以通過明度、飽和度的不同變化來加強頁面配色的層次感。 #p# → 中黃色應用網(wǎng)頁例圖: www.totshop.com
中黃色系分析:
背景中黃色上點綴多種艷度較高的顏色,都是屬于跳躍的顏色,渲染整個網(wǎng)站的熱鬧環(huán)境氣氛,符合該網(wǎng)站的設計主題。
從HSB數(shù)值上看,該中黃色的明度和飽和度呈最高值,屬于明亮耀眼的顏色。輔助色是黃綠色和紅色,黃綠色在中黃背景下呈冷色調(diào),輕快單薄的亮色;紅色的HSB數(shù)值H色相上看是正紅色,明度稍低,這里屬于厚重沉穩(wěn)的顏色,在中黃色背景下呈現(xiàn)暖色調(diào);背景中黃色在黃綠色和紅色兩者中這時呈中間色,是很好的整體頁面視覺過渡色。
加之商品圖片多種亮艷的色澤混合在同一頁面上,點睛色白色在這里起到了調(diào)和多種顏色的作用,減少、透氣于整個頁面的多種配色噪音。
結論:
當背景色起到中間色的作用時,頁面少量冷暖色彩搭配較容易調(diào)和。
通常商品網(wǎng)站志在渲染熱鬧氣氛,比較適合活潑跳躍、色彩絢麗的配色方案,但色彩的調(diào)和難度較大。
→ 黃綠色調(diào)網(wǎng)頁例圖: www.jpggrupo.com.ar
黃綠色調(diào)分析:
主色調(diào)為黃綠色,單純而看,黃綠色是通常的暖色的起始色、色彩中亮度最高的黃色與冷色的起始色、綠色相結合而得,因此該顏色看起來非常明快清新。
處于輔助色的非色彩黑色,中間的點綴色是主色調(diào)黃綠色,很容易讓人一時以為該顏色就是點睛色。實際主色調(diào)黃綠色的明度非常高,飽和度這時也很高,在明度最低的黑色襯映下就異常顯眼。
背景色使用略有些漸變的效果,正是黃綠和黑(灰)顏色的柔和過渡,頁面調(diào)和。
點睛色在這里混色較多,RGB、HSB數(shù)值差距都不大,因此顏色偏灰色階,仔細分析是黃綠色與少許黑色混合而得,起到了調(diào)和背景色與輔助色明度差異過大的作用。
結論:
點睛色可以是少許耀眼的顏色,也可以是少許協(xié)調(diào)于視覺的混合灰色,無論是耀眼的顏色還是謙遜沉穩(wěn)的灰色,都是不可缺少的角色,有著不可替代的作用。
整個頁面配色較單純,只有三種色,非色彩來說分別起到黑(輔助黑)白(主色黃綠)灰(點睛混合色)的作用,所以頁面配色較有層次感,并不顯得單調(diào)。#p# → 黃色鄰近******頁例圖:www.leerbanen.nl
黃色鄰近色配色(黃色+紅色)分析:
選取的上圖三組色里HSB數(shù)值的B明度雖然都有些變化,但S飽和度分毫沒有受到影響,仍都呈最高值100%,因此頁面配色異常耀眼。好在其間有少量不同明度飽和度的紅色系色塊做壓制,頁面顯得沉穩(wěn)許多,頁面色彩層次也豐富了許多,塊面交織設計富有節(jié)奏韻律美,卻也有雀躍的感覺。
頁面照片人物也經(jīng)過了雙色調(diào)處理,與頁面色彩風格一致。
整個頁面屬于明暗反差較大的色調(diào),所以頁面響亮明快,極賦視覺沖擊力、感染力。
結論:
耀眼的顏色有深色塊壓制,也是很好的調(diào)和方法。
該頁面里的不少小色塊混合了暗灰色,因此頁面飽和度刺激程度得到少許降低并調(diào)和。
同類色系、類似色系不同純度明度的深淺變化搭配,增添現(xiàn)代美感。
→ 高純度黃色鄰近色應用網(wǎng)頁例圖:www.mudbubble.com
高純度黃色鄰近色配色(黃色+紅色)分析:
全頁選取的幾個色彩組合是高純度高明度的鄰近色正黃、淡黃(這里的淡黃色不是指淺黃色,而是色彩顏料色里的稱呼。)、中黃及正紅色。
我們知道,黃色是色彩系里明度最高的耀眼色,HSB數(shù)值H色相60度是正黃色,特性越高明度越高。H色相度往60度前是接近紅色,而紅色明度相較于黃色低,背景色HSB數(shù)值H色相為48度,往紅色靠近,因此色度較深,呈現(xiàn)為中黃色。使用中黃背景正是烘托突出前景的淡黃色。淡黃色的前景上設計少許中黃色帶進入,頁面的色彩層次感生動了不少。
另一個輔助色紅色HSB數(shù)值的H色相是0度,顯示正紅色且高純度高亮度,放在最顯眼的標志廣告區(qū)域,實現(xiàn)視覺引導作用,主次感增強了。
白色也是輔助色三色之一,在頂部面積較大的使用,使整個頁面的純度緩和了許多,起到提亮并拉開空間的作用。
點睛色用于導航欄,提示導航區(qū)域的醒目與重要性。
結論:
高純度高明度的顏色調(diào)子耀眼響亮,通常對視覺的刺激程度較大。
鄰近色由正黃到最后的正紅色是色輪表的協(xié)調(diào)過渡色,因此頁面調(diào)和。
鄰近色與同類色一樣,是調(diào)和色,但較同類色更生動更多變化。#p# → 黃色低純度配色應用網(wǎng)頁例圖:www.luckystarcafe.com
低純度黃色配色(黃色+藍色)分析:
該頁面是屬于純度較低的多組配色頁面,配色難度似乎較大,但是按主色調(diào)、輔助色、點睛色來細細分析就會發(fā)現(xiàn)容易多了。
主色調(diào)的中黃色,從RGB數(shù)值B明度48來看,提高了明度,RGB數(shù)值的變化HSB也相應變化,該色調(diào)純度降低,黃色的耀眼特性相應緩和。
該頁面輔助色比較多,這里選了主要的三種淺黃、淺藍、棕紅色,明度純度不同的變化來分析。淺黃色的RGB三個數(shù)值接近,因此呈現(xiàn)偏灰的柔和狀態(tài)。正藍色的RGB數(shù)值R為0,G為255,B為255,該藍色RGB數(shù)值上看,混合了R紅色11,G的綠色數(shù)值較低,B藍色的數(shù)值較高,因此飽和度降低,顏色呈淺色調(diào)。棕紅色的RGB的三數(shù)值上看,R的數(shù)值最高為124,加入了對比色G綠色67,因此顏色變暗發(fā)烏,調(diào)入了適量B藍色24,因此該顏色飽和度亮度降低,也是該頁面沉穩(wěn)的主要色調(diào),牽制艷度較高的幾種顏色。
點睛色的HSB數(shù)值H色相為356度,幾乎呈正紅色,只是調(diào)入了少許B藍色18,因此顏色在明度上稍偏暗。另一點睛白色的作用除了提亮整個頁面,同時也突出標志圖像。
標志是紅色,下面的綠色是紅色的對比色,目的是突出標志的作用,同時也是黃色與藍色的中間視覺過渡色。
結論:
多種輔助色份量相當冷暖搭配時,有飽和度稍低的主色調(diào)牢牢把握住,整個頁面容易調(diào)和。
由于頁面顏色較豐富,點睛色在這里起到拉開各個色彩層次的作用,明確主次角色。
本部分小節(jié):
● 黃色是色彩系里明度最高的耀眼顏色,尤其是HSB數(shù)值H色相為60度正黃色時,它的特性越明顯。由于黃色的特性,在頁面配色的時候可適當添加明度較深的顏色,色階層拉開,并起到協(xié)調(diào)刺眼的艷度作用。黃色飽和度、明度的不同變化傳達不同的意義和作用。
● 無論是高純度低純度還是多色彩的頁面配色,白色起到關鍵的作用。
● 點睛色不一定就是非常顯眼的顏色,也有起到調(diào)和整體頁面配色的作用。
● 中間色通常被大面積的使用為主色調(diào)、輔助色,是調(diào)和輔助色(有可能是同時幾種)與點睛色(有可能是幾種)的色彩,是調(diào)和色、調(diào)和方法的關鍵。
下一部分我們介紹 網(wǎng)頁設計配色應用的第七節(jié)——綠色系。
近期更新
- [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)站設計都有哪些新的趨勢?
延伸閱讀
- [2006-10-12 08:26:00] 網(wǎng)頁設計配色應用實例剖析——紅色系
- [2006-10-10 08:35:00] 網(wǎng)頁設計配色應用——色彩的調(diào)和
- [2007-07-23 16:19:00] 網(wǎng)頁配色:正文中國傳統(tǒng)色彩名錄
- [2006-10-27 08:01:00] 網(wǎng)頁設計配色應用實例剖析——橙色系
- [2006-10-09 10:25:00] 網(wǎng)頁設計配色應用——色彩的對比
- [2005-12-28 13:59:00] 網(wǎng)頁配色之黃金分割法
- [2006-10-08 07:59:00] 網(wǎng)頁設計配色應用——色調(diào)
- [2009-05-18 08:00:00] 網(wǎng)頁配色工具
- [2007-01-09 09:37:00] 《網(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關鍵字
GOOGLE 網(wǎng)站制作 網(wǎng)站開發(fā) 色彩心理學 圖形網(wǎng)格 青島海洋投資集團 網(wǎng)站建設,企業(yè)網(wǎng)站建設 網(wǎng)頁設計 青島抖音小程序開發(fā) 力圖 青島IT資訊 青島高端網(wǎng)站建設 響應式設計 青島好的網(wǎng)站優(yōu)化公司 英文網(wǎng)站建設 舒適的界面 視覺靈感 H5專題頁面 力圖數(shù)字科技 高端輪胎網(wǎng)站設計 集團性網(wǎng)站 插畫 網(wǎng)站品牌 高端網(wǎng)站設計 網(wǎng)站建設,手機網(wǎng)站 程序開發(fā) SEO 微信營銷的優(yōu)勢 微網(wǎng)站 微信開發(fā)