網(wǎng)頁設計配色應用色彩對比

1、網(wǎng)頁設計配色應用色彩的比照網(wǎng)頁頁面中總是由具有某種內(nèi)在聯(lián)系的各種色彩，組成一個完整統(tǒng)一的整體，形成畫面色彩總的趨向，稱為色調(diào)。也可以理解為色彩狀態(tài)。色彩給人的感覺與氣氛，是影響配色視覺效果的決定因素。 為了使網(wǎng)頁的整體畫面呈現(xiàn)穩(wěn)定協(xié)調(diào)的感覺，以便充分的掌握其規(guī)律來更好的分析學習，上次我們介紹了視覺角色主次位置的幾個概念，本節(jié)我們介紹色彩的比照。比照與調(diào)和就是形式美的變化與統(tǒng)一規(guī)律在一定條件下，不同色彩之間的比照會有不同的效果。在不同的環(huán)境下，多色彩給人一種印象，色彩單一給人另一種印象。各種純色的比照會產(chǎn)生鮮明的色彩效果，很容易給人帶來視覺與心理的滿足。紅、黃、藍三種顏色是最極端的色彩，它們之間

2、比照,哪一種顏色也無法影響對方。很多朋友都以為色彩比照主要是紅綠、橙藍、黃紫色的比照，實際色彩比照范疇不局限于這些。是指各種色彩的界面構(gòu)成中的面積、形狀、位置以及色相、明度、純度之間的差異，使網(wǎng)頁色彩配合增添了許多變化、頁面更加豐富多彩。色彩的比照規(guī)律大致有以下幾點：一、色相比照是指因色相之間的差異形成的比照。當主色相確定后，必須考慮其他色彩與主色相是什么關(guān)系，要表現(xiàn)什么內(nèi)容及效果等，這樣才能增強其表現(xiàn)力。不同色相比照取得的效果有所不同，兩色越接近，比照效果越柔和。越接近補色，比照效果越強烈。 色相比照網(wǎng)頁例圖：色相比照分析：主要是以綠色與藍色之間的色相比照。從HSB數(shù)值上可看出嫩綠色的S純度

3、高B亮度也很高，因此艷麗的顏色作為背景與前景純度稍低的墨綠和轱藍色形成色相之間的比照。前景的墨綠雖然純度到達最高值100，比主色調(diào)高不少，但是因為亮度低，因此色彩顯示沒有主色調(diào)明艷。結(jié)論：該頁面色相的比照，主要作用于前景與背景的比照、局部與整體的比照。二、明度比照明度比照可分為:彩色差的明度比照及非彩色差的明度比照 是指色彩之間明暗程度的差異而形成的比照。是頁面形成恰當?shù)暮?、白、灰效果的主要手段。明度比照在視覺上對色彩層次和空間關(guān)系影響較大。例如檸檬黃明度高，藍紫色的明度低，橙色和綠色屬中明度，紅色與藍色屬中低明度。 明度比照網(wǎng)頁例圖：明度比照分析：非彩色差嚴格來說，該頁面應該是黑白灰色非色彩

4、構(gòu)成，攝影圖片中的人物衣服為灰色，相對單純的黑白比照柔和舒適于視覺。能使頁面顯得更單純、統(tǒng)一，形成另一道獨特的風景。三、純度比照是指不同色彩之間純度的差異而形成的比照。色彩純度可大致分為高純度、中純度、低純度三種。未經(jīng)調(diào)和過的原色純度是最高的，而間色多屬中純度的色彩，復色其本身純度偏低而屬低純度的色彩范圍。純度的比照會使色彩的效果更明確肯定。 純度比照網(wǎng)頁例圖：純度比照分析：整個頁面看起來異常艷麗刺激然而又非常的協(xié)調(diào)。以上數(shù)值主要選取了幾種較有代表性的顏色。大家注意看，以上色彩除了粉紅色，其他幾組顏色都是高飽和度高亮度的顏色，因此充分的發(fā)揮出了色彩的艷麗程度。包括粉紅色在內(nèi)的幾種灰色階，在中間

5、起到了和諧作用。白色能拉開相近色階的空間及明快頁面的作用，在這里可以說是功不可沒。結(jié)論：頁面實際上用了不少顏色，配色大膽。抓住顏色主次冷暖的安排，適度再加上和諧的過渡色灰色，實現(xiàn)了作者對該頁面的輕松配色。從多種高純度的搭配協(xié)調(diào)能力上看，足可見作者對色彩設計搭配不一般的功底。這類網(wǎng)頁配色非常能夠表達出一個網(wǎng)站頁面產(chǎn)品個性，配色難度大。讓人過目難忘。五、補色比照將紅與綠、黃與紫、藍與橙等具有補色關(guān)系的色彩彼此并置，使色彩感覺更為鮮明，純度增加，稱為補色比照。 補色比照網(wǎng)頁例圖：補色比照分析：由冷色系的綠色、藍色組成大背景環(huán)境，純度較低。前景主要是突出產(chǎn)品、文字信息內(nèi)容的大紅色形成補色比照效果，RG

6、B的R255數(shù)值與HSB是H為零， 數(shù)值顯示非常明確，標準的大紅色。純度亮度非常高，到達最高值，加之白色的勾邊，使得紅色更為凸顯，更易于視覺對信息的迅速捕捉。結(jié)論：比照色的合理搭配，能拉開前景與背景的空間感，突出頁面主體物。尤其是紅色在主體物的運用，能迅速傳遞視覺的效果。六、冷暖比照是指不同色彩之間的冷暖差異形成的比照。色彩分為冷、暖兩大色系，以紅、橙、黃為暖色體系，藍、綠、紫那么代表著冷色系，兩者根本上互為補色關(guān)系。另外，色彩的冷暖比照還受明度與純度的影響，白光反射高而感覺冷，黑色吸收率高而感覺暖。 冷暖比照網(wǎng)頁例圖：冷暖比照分析： 以上這幾組顏色乍一看感覺鮮艷程度都差不多，但是通過觀察它們

7、的數(shù)值發(fā)現(xiàn)飽和度都有相差，然而明度相近，因此它們給人造成的視覺感受幾乎是相同的。該頁 面冷暖顏色較為豐富，橙和藍是比照最強烈的補色，其次是傾向不夠明顯的補色黃、紫。明度不同的兩個綠色起到了冷暖視覺的過渡作用。主色調(diào)的淺藍色亮度較 高，讓頁面不易給人沉悶的感覺。結(jié)論：冷暖比照的應用，通常在休閑娛樂網(wǎng)站、食品網(wǎng)站出現(xiàn)比擬多。將這兩個色系的色彩安排在同一畫面時，其比照效果極為強烈。通常初學者較容易使兩色相互排斥，導致畫面色調(diào)不諧調(diào)。一般我們采用兩種調(diào)和的方法。 七、純度調(diào)整降低冷暖兩色純度。用明度黑、白、灰變化來調(diào)整畫面的層次、直接使用黑、白、灰色系進入畫面搭配，或者參加補色的諧調(diào)，也都能很好的起到

8、協(xié)調(diào)的效果。 純度調(diào)整網(wǎng)頁例圖：純度調(diào)整分析：主色調(diào)的橙色，添入了少許黑色做漸變背景色，降低了純度。輔助色的藍色是橙色的補色，主要起的是使得整個頁面過多的暖色降低協(xié)調(diào)于整體的效果，及背景色 的棕色都分別提暗降低純度。而左上角的黃色那么通過提高了亮度來降低純度。一個頁面里應有少量純度較高的顏色而不至于使整個頁面過于壓抑，純度亮度很高的點 睛色紅色就起到了這個作用。結(jié)論：純度的調(diào)整主要是通過明度黑、白、灰變化來調(diào)整畫面的層次，適當?shù)膮⒓友a色也是其中的一個方法。八、面積調(diào)整主次的面積區(qū)分。根據(jù)設計主題的需要，在畫面的面積上以一方為主色，于是就掌控畫面的色調(diào)作用，其他的顏色在使用面積上拉開距離，使畫面

9、的主次關(guān)系更突出，在統(tǒng)一的同時富有變化。 面積調(diào)整網(wǎng)頁例圖：面積調(diào)整分析：作為大面積使用的主色調(diào)-飽和度和亮度為最高值的橙色，通過適當面積的白色參加協(xié)調(diào)和平衡了視覺的作用外，主體物的深紅紋樣的圖片點綴著純度、亮度較高的紅色有醒目作用，縮小面積而卻又能突出于視覺中心點，疏密構(gòu)圖的比照效果。結(jié)論：大面積的顏色和小面積使用的顏色可以拉開主次關(guān)系，位置的正確安排也是一個方面。九、面積比照同一種色彩，面積越大，明度、純度越強，面積越小，明度、純度越低。面積大的時候，亮的色顯得更輕，暗的色顯得更重。這種現(xiàn)象稱為色彩的面積效果。面積比照是指頁面中各種色彩在面積上多與少、大與小的差異，影響到頁面主次關(guān)系。 面積的比照,可以是中上下明度差的面積變化及中上下純度差的面積變化。 面積比照網(wǎng)頁例圖：面積比照分析：作為大面積使用