網(wǎng)站制作怎樣處理黃色頁面配色的技巧
黃色是陽光的色彩,具有活潑與輕快的特點,給人十分年輕的感覺。象征光明、希望、高貴、喻快。淺黃色表示柔弱,灰黃色表示病態(tài)。它的亮度最高,和其他顏色配合很活潑,有溫暖感,具有快樂、希望、智慧和輕快的個性,有希望與功名等象征意義。黃色也代表著土地、象征著權力,并且還具有神秘的宗教色彩。
深圳網(wǎng)站制作公司前端設計師認為黃色的性格冷漠、高傲、敏感,具有擴張和不安寧的視覺印象。淺黃色系明朗、喻陜、希望、發(fā)展,它的雅致,清爽屬性,較適合用于女性及化妝品類網(wǎng)站。中黃色有崇高、尊貴、輝煌、注意、擴張的心理感受。濼黃色給人高貴、溫和、內斂、穩(wěn)重的心理感受。
一、網(wǎng)站制作色彩搭配之黃色
高傲、敏感,具有擴張和不安寧的視覺印象。濺黃色系明朗、愉快、希望、發(fā)展,它的雅致,清爽屬性,較適合用于中黃色有崇高、尊貴、輝煌、注意、擴張的心理感受。濼黃色給人高貴、溫和、內斂、穩(wěn)重的心理感受
【示例l】黃色系同類色網(wǎng)頁示例截圖10.59所示
【分析】
黃色是所有彩色中明度最高的顏色。圖10.59看到HSB模式的H數(shù)值是60度,正是正黃色,但RGB數(shù)值中加入了B藍色數(shù)值為51,因此降低了HSB的飽和度S為80%,但是大面積的黃色仍使得該頁面色彩明亮顯眼。
輔助色是純黑色,非色彩明度最低的顏色。大面積顯眼的正黃色有黑色的線條壓制,黃色頓時顯得沉穩(wěn),頁面增添內容感。白色雖然是點睛色,但由于非色彩的白色與黃色的明度最高,因此這里似乎沒有起到“點睛”的作用。
【網(wǎng)站設計師點評】
當鮮度、明度高的背景色與前景輔助色暗度低的黑色在明度形成較強烈的對比時,艷度降低,較能協(xié)調視覺。整個頁面配色單純,卻也不簡單,形成另一種設計風格。
【示例2】黃色同類色網(wǎng)頁示例截圖如圖10.60所示。
該頁面的配色很單純,是同類色的黃色不同明度顏色,頁面看起來干凈、單純。點睛色白色、淡黃色在深色黃色背景下比較顯眼,且在最中間位置,是整個頁面中的高調部分。這3種黃色,明度都很高,只有背景輔助色明度稍低,點睛黃色H色相是3種顏色中黃色傾向最高的為57度,而60度是正黃色,因此明度也是最高的,充分地發(fā)揮其點睛色的作用。
背景色和前景色只在色相上和明度上有非常微妙的變化,卻電很巧妙,形成了變化較明顯的空間層次感,削弱了同類色易產(chǎn)生的單調感點睛色白色讓層次感更明顯。
【網(wǎng)站設計師點評】
同類色的屬性使得整個頁面非常和諧,可以根據(jù)不同的主題來設計配色??梢酝ㄟ^明度、飽和度的不同變化來加強頁面配色的層次感。
二、網(wǎng)站制作色彩搭配之中黃色
【示例】中黃色應用網(wǎng)頁示例截圖10.61所示
分析

背景中黃色上點綴多種艷度較高的顏色,都是屬于跳躍的顏色,渲染整個網(wǎng)站的熱鬧環(huán)境氣氛,符合該網(wǎng)站的設計主題。加之商品圖片多種亮艷的色澤混合在同頁面上,點睛色白色在這里起到了調和多種顏色的作用。
從HSB數(shù)值上看,該中黃色的明度和飽和度呈最高值,屬于明亮耀眼的顏色。輔助色是鳶綠色和紅色,黃綠色在中黃背景下呈冷色調,輕快單薄的亮色;紅色的HSB數(shù)值H色相上看是正紅色,明度稍低,這里屬于厚重沉穩(wěn)的顏色,在中黃色背景下呈現(xiàn)暖色調;背景中黃色在黃綠色和紅色兩者中這時呈中間色,是很好的整體頁面視覺過渡色。
【網(wǎng)站設計師點評】
當背景色起到中間色的作用時,頁面少量冷暖色彩搭配較容易調和。通常商品網(wǎng)站意在渲染熱嗣氣氛,比較適合活潑跳躍、色彩絢麗的配色方案,但色彩的調和難度較大。
三、網(wǎng)站制作色彩搭配之黃綠色
【示例】黃綠色調網(wǎng)頁示例截圖如圖10.62所示
分析

主色調為黃綠色,單純來看,黃綠色是通常的暖色的起始色、色彩中亮度最高的黃色與綠色的起始色、綠色相結合而得,因此該顏色看起來非常明快清新。處于輔助色的非色彩黑色,中間的點綴色是主色調黃綠色,很容易讓人時以為該顏色就是點睛色。實際主色調黃綠色的明度非常高,飽和度這叫也很高,在明度最低的黑色襯映下就異常顯眼。
背景色使用略有些漸變的效果,正是黃綠和黑(灰)顏色的柔和過渡,頁面調和。點睛色在這里混色較多,RGB、HSB數(shù)值差距部不大,因此顏色偏灰色階,仔細分析是黃綠色與少許黑色混合而得,起到了調和背景色與輔助色明度差異過大的作用。
【網(wǎng)站設計師點評】
點睛色可以是少許耀眼的顏色也可以是少許協(xié)調于視覺的混合灰色,無論是耀眼的顏色還是謙遜沉穩(wěn)的灰色,都是不可缺少的角色有著不可替代的作用。整個頁面配色較單純,只有3種色,非色彩來說分別起到黑(輔助黑)白(主色黃綠)灰(點睛混合色)的作用,所以頁面配色較有層次感,并不顯得單調。
四、網(wǎng)站制作色彩搭配之黃色+紅色
【示例1】黃色與鄰近色紅色網(wǎng)頁示例截圖10.63
分析
圖10.63的三組色中HSB數(shù)值的B明度雖然都有些變化,但S飽和度分毫沒有受到影響,仍都呈最高值100%,因此頁面配色異常耀眼。好在其間有少量不同明度飽和度的紅色系色塊做壓制,頁面顯得沉穩(wěn)許多,頁面色彩層次也豐富了許多,塊面交織設計富有節(jié)奏韻律美,卻也有雀躍的感覺。
頁面照片也經(jīng)過了雙色調處理,與頁面色彩風格致。整個頁面屬于明暗反差較大的色調,所以頁面響亮明快,極賦視覺沖擊力、感染力。
【網(wǎng)站設計師點評】
耀眼的顏色有深色塊壓制,也是很好的調和方法。該頁面里的不少小色塊混合了暗灰色,因此頁面飽和度刺激程度得到少許降低并調和同類色系、類似色系不同純度明度的深淺變化搭配,增添現(xiàn)代美感。
全頁選取的幾個色彩組合是高純度、高明度的鄰近色正黃、淡黃(這里的淡黃色不是指淺黃色,而是色彩顏料色里的稱呼)、中黃及正紅色。
黃色是色彩系里明度最高的耀眼色,HSB數(shù)值H色相60度是正黃色,特性,主越高明度越高。H色相度往60度前是接近紅色,而紅色明度相較于黃色低,背景色HSB數(shù)值H色相為48度,往紅色靠近,因此色度較椿,呈現(xiàn)為中黃色。使用中黃背景正是烘托突出前景的淡黃色。淡黃色的前景上設汁少許中黃色帶進入,頁面的色彩層次感生動了不少。
另一個輔助色紅色HSB數(shù)值的H色相是。度,顯示正紅色且高純度、高亮度,放在最顯眼的標志廣告區(qū)域,實現(xiàn)視覺引導作用主次感增強了。
白色也是輔助色三色之,在頂部面積較大的使用,使整個頁面的純度緩和了許多,起到提亮并拉開空間的作用。點睛色用于導航欄提示導航區(qū)域的醒目與重要性。
【網(wǎng)站設計師點評】