網頁設計配色應用實例剖析——黃色系

1、網頁設計配色應用實例剖析黃色系黃色是陽光的色彩，具有活潑與輕快的特點，給人十分年輕的感覺。象征光明、希望、高貴、愉快。淺黃色表示柔弱，灰黃色表示病態(tài)。它的亮度最高，和其他顏色配合很活潑，有溫曖感，具有快樂、希望、聰明和輕快的個性，有希望與功名等象征意義。黃色也代表著土地、象征著權力，并且還具有神秘的宗教色彩。 黃色的性格冷漠、高傲、敏感、具有擴張和不安寧的視覺印象。 淺黃色系明朗、愉快、希望、發(fā)展，它的雅致，清爽屬性，較適合用于女性及化妝品類網站。 中黃色有崇高，尊貴，輝煌、注重、擴張的心理感受。 深黃色給人高貴、暖和、內斂、穩(wěn)重的心理感受。 下面我們根據黃色系不同屬性鄰近色、同類色的高純度低

2、純度色彩搭配做不同的舉例分析。 黃色系網頁例圖： 黃色系分析： 黃色是所有彩色中明度最高的顏色。上圖看到HSB模式的H數值是60度，正是正黃色，但RGB數值中加入了B藍色數值為51，因此降低了HSB的飽和度S為80，但是大面積的黃色仍使得該頁面色彩明亮顯眼。 輔助色是純黑色，非色彩明度最低的顏色。 大面積顯眼的正黃色有黑色的線條壓制，黃色頓時顯得沉穩(wěn)，頁面增添內容感。 白色雖然是點睛色，但由于非色彩的白色與黃色的明度最高，因此這里似乎沒有起到"點睛"的作用。 結論： 當鮮度、明度高的背景色與前景輔助色暗度低的黑色在明度形成較強烈的對比時，艷度降低，較能協(xié)調視覺。 整個頁面配

3、色單純，卻也不簡單，形成另一種設計風格。 黃色同類色網頁例圖： 黃色同類色分析 該頁面的配色很單純，是同類色的黃色不同明度顏色，頁面看起來干凈、單純。點睛色白色淡黃色在深色黃色背景下比較顯眼，且在最中間位置，是整個頁面中的高調部分。 這三種黃色，明度都很高，只有背景輔助色明度稍低，點睛黃色H色相是三種顏色中黃色傾向最高的為57度，而60度是正黃色，因此明度也是最高的，充分的發(fā)揮其點睛色的作用。 背景色和前景色只在色相上明度上有非常微妙的變化，卻也很巧妙，形成了變化較明顯的空間層次感，削弱了同類色易產生的單調感。點睛色白色讓層次感更明顯。結論： 同類色的屬性使得整個頁面非常和諧，可以根據不同的主

4、題來設計配色。 可以通過明度、飽和度的不同變化來加強頁面配色的層次感。 中黃色應用網頁例圖： 中黃色系分析： 背景中黃色上點綴多種艷度較高的顏色，都是屬于跳躍的顏色，渲染整個網站的熱鬧環(huán)境氣氛，符合該網站的設計主題。 從HSB數值上看，該中黃色的明度和飽和度呈最高值，屬于明亮刺眼的顏色。輔助色是黃綠色和紅色，黃綠色在中黃背景下呈冷色調，輕快單薄的亮色；紅色的HSB數值H色相上看是正紅色，明度稍低，這里屬于厚重沉穩(wěn)的顏色，在中黃色背景下呈現(xiàn)暖色調；背景中黃色在黃綠色和紅色兩者中這時呈中間色，是很好的整體頁面視覺過渡色。 加之商品圖片多種亮艷的色澤混合在同一頁面上，點睛色白色在這里起到了調和多種顏

5、色的作用，減少、透氣于整個頁面的多種配色噪音。 結論： 當背景色起到中間色的作用時，頁面少量冷暖色彩搭配較輕易調和。 通常商品網站志在渲染熱鬧氣氛，比較適合活潑跳躍、色彩絢麗的配色方案，但色彩的調和難度較大。 黃綠色調網頁例圖：黃綠色調分析： 主色調為黃綠色，單純而看，黃綠色是通常的暖色的起始色、色彩中亮度最高的黃色與冷色的起始色、綠色相結合而得，因此該顏色看起來非常明快清新。 處于輔助色的非色彩黑色，中間的點綴色是主色調黃綠色，很輕易讓人一時以為該顏色就是點睛色。實際主色調黃綠色的明度非常高，飽和度這時也很高，在明度最低的黑色襯映下就異常顯眼。 背景色使用略有些漸變的效果，正是黃綠和黑（灰）

6、顏色的柔和過渡，頁面調和。 點睛色在這里混色較多，RGB、HSB數值差距都不大，因此顏色偏灰色階，仔細分析是黃綠色與少許黑色混合而得，起到了調和背景色與輔助色明度差異過大的作用。結論： 點睛色可以是少許刺眼的顏色，也可以是少許協(xié)調于視覺的混合灰色，無論是刺眼的顏色還是謙遜沉穩(wěn)的灰色，都是不可缺少的角色，有著不可替代的作用。 整個頁面配色較單純，只有三種色，非色彩來說分別起到黑（輔助黑）白（主色黃綠）灰（點睛混合色）的作用，所以頁面配色較有層次感，并不顯得單調。 黃色鄰近色網頁例圖：黃色鄰近色配色（黃色 紅色）分析： 選取的上圖三組色里HSB數值的B明度雖然都有些變化，但S飽和度分毫沒有受到影響

7、，仍都呈最高值100，因此頁面配色異常刺眼。好在其間有少量不同明度飽和度的紅色系色塊做壓制，頁面顯得沉穩(wěn)許多，頁面色彩層次也豐富了許多，塊面交織設計富有節(jié)奏韻律美，卻也有雀躍的感覺。 頁面照片人物也經過了雙色調處理，與頁面色彩風格一致。 整個頁面屬于明暗反差較大的色調，所以頁面響亮明快，極賦視覺沖擊力、感染力。結論： 刺眼的顏色有深色塊壓制，也是很好的調和方法。 該頁面里的不少小色塊混合了暗灰色，因此頁面飽和度刺激程度得到少許降低并調和。 同類色系、類似色系不同純度明度的深淺變化搭配，增添現(xiàn)代美感。 高純度黃色鄰近色應用網頁例圖：高純度黃色鄰近色配色（黃色 紅色）分析：全頁選取的幾個色彩組合是

8、高純度高明度的鄰近色正黃、淡黃（這里的淡黃色不是指淺黃色，而是色彩顏料色里的稱呼。）、中黃及正紅色。我們知道，黃色是色彩系里明度最高的刺眼色，HSB數值H色相60度是正黃色，特性越高明度越高。H色相度往60度前是接近紅色，而紅色明度相較于黃色低，背景色HSB數值H色相為48度，往紅色靠近，因此色度較深，呈現(xiàn)為中黃色。使用中黃背景正是烘托突出前景的淡黃色。淡黃色的前景上設計少許中黃色帶進入，頁面的色彩層次感生動了不少。另一個輔助色紅色HSB數值的H色相是0度，顯示正紅色且高純度高亮度，放在最顯眼的標志廣告區(qū)域，實現(xiàn)視覺引導作用，主次感增強了。白色也是輔助色三色之一，在頂部面積較大的使用，使整個頁

9、面的純度緩和了許多，起到提亮并拉開空間的作用。點睛色用于導航欄，提示導航區(qū)域的醒目與重要性。結論：高純度高明度的顏色調子刺眼響亮，通常對視覺的刺激程度較大。鄰近色由正黃到最后的正紅色是色輪表的協(xié)調過渡色，因此頁面調和。鄰近色與同類色一樣，是調和色，但較同類色更生動更多變化。 黃色低純度配色應用網頁例圖： 低純度黃色配色（黃色 藍色）分析：該頁面是屬于純度較低的多組配色頁面，配色難度似乎較大，但是按主色調、輔助色、點睛色來細細分析就會發(fā)現(xiàn)輕易多了。主色調的中黃色，從RGB數值B明度48來看，提高了明度，RGB數值的變化HSB也相應變化，該色調純度降低，黃色的刺眼特性相應緩和。該頁面輔助色比較多，

10、這里選了主要的三種淺黃、淺藍、棕紅色，明度純度不同的變化來分析。淺黃色的RGB三個數值接近，因此呈現(xiàn)偏灰的柔和狀態(tài)。正藍色的RGB數值R為0，G為255，B為255，該藍色RGB數值上看，混合了R紅色11，G的綠色數值較低，B藍色的數值較高，因此飽和度降低，顏色呈淺色調。棕紅色的RGB的三數值上看，R的數值最高為124，加入了對比色G綠色67，因此顏色變暗發(fā)烏，調入了適量B藍色24，因此該顏色飽和度亮度降低，也是該頁面沉穩(wěn)的主要色調，牽制艷度較高的幾種顏色。點睛色的HSB數值H色相為356度，幾乎呈正紅色，只是調入了少許B藍色18，因此顏色在明度上稍偏暗。另一點睛白色的作用除了提亮整個頁面，同時也突出標志圖像。標志是紅色，下面的綠色是紅色的對比色，目的是突出標志的作用，同時也是黃色與藍色的中間視覺過渡色。結論：多種輔助色份量相當冷暖搭配時，有飽和度稍低的主色調牢牢把握住，整個頁面輕易調和。由于頁面顏色較豐富，點睛色在這里起到拉開各個色彩層次的作用，明確主次角色。 本部分小節(jié)： 黃色是色彩系里明度最高的刺眼顏色，尤其是HSB數值H色相為60度正黃色時，它的特性越明顯。由于黃色的特性，在頁面配色的時候可適當添加明度較深的顏色，色階層拉開