網(wǎng)頁設(shè)計(jì)配色系列簡析--應(yīng)用部分【一】
網(wǎng)頁設(shè)計(jì)配色應(yīng)用——色調(diào)
前面我們介紹了常用的電腦色彩模式RGB、HSB，以及色彩的三大屬性，還有常用配色的基本概念和相關(guān)實(shí)例剖析。今天開始我們介紹
應(yīng)用部分，本節(jié)介紹調(diào)色。
網(wǎng)頁頁面中總是由具有某種內(nèi)在聯(lián)系的各種色彩，組成一個(gè)完整統(tǒng)一的整體，形成畫面色彩總的趨向，稱為色調(diào)。也可以理解為色彩狀態(tài)。色彩給人的感覺與氛圍，是影響配色視覺效果的決定因素。
為了使網(wǎng)頁的整體畫面呈現(xiàn)穩(wěn)定協(xié)調(diào)的感覺，以便充分的掌握其規(guī)律來更好的分析學(xué)習(xí)，我們把視覺角色主次位置分為如下幾個(gè)概念，以便在網(wǎng)頁設(shè)計(jì)配色時(shí)更容易操縱主動(dòng)權(quán)。
■ 主色調(diào)
頁面色彩的主要色調(diào)、總趨勢，其他配色不能超過該主要色調(diào)的視覺面積。（背景白色不一定根據(jù)視覺面積決定，可以根據(jù)頁面的感覺需要。）
■ 輔色調(diào)
僅次與主色調(diào)的視覺面積的輔助色，是烘托主色調(diào)、支持主色調(diào)、起到融合主色調(diào)效果的輔助色調(diào)。
■ 點(diǎn)睛色
在小范圍內(nèi)點(diǎn)上強(qiáng)烈的顏色來突出主題效果，使頁面更加鮮明生動(dòng)。
■ 背景色
襯托環(huán)抱整體的色調(diào)，協(xié)調(diào)、支配整體的作用。
→ 色調(diào)網(wǎng)頁例圖：http://www.robinssondivision.com
本部分小節(jié)：
一個(gè)頁面的色彩角色主要是根據(jù)其面積多少的來區(qū)別主次關(guān)系、達(dá)到最終目的的。
當(dāng)不同的顏色使用的面積相當(dāng)，這個(gè)頁面容易呈現(xiàn)枯燥單調(diào)之感，而沒有局部細(xì)節(jié)的變化。當(dāng)一個(gè)頁面使用的顏色過多、面積大小用得過于瑣碎，這個(gè)頁面容易呈現(xiàn)花哨、主次不分沒有整體的感覺。
為頁面設(shè)計(jì)配色的時(shí)候，應(yīng)根據(jù)主題內(nèi)容主次需要，各顏色有其各自的功能角色--面積使用最多的、最少的、不多不少的，加上冷暖的適度安排，純度明度的合理變化，遵循這條原則，網(wǎng)頁配色定能得心應(yīng)手。
網(wǎng)頁設(shè)計(jì)配色應(yīng)用——色彩的對(duì)比
網(wǎng)頁頁面中總是由具有某種內(nèi)在聯(lián)系的各種色彩，組成一個(gè)完整統(tǒng)一的整體，形成畫面色彩總的趨向，稱為色調(diào)。也可以理解為色彩狀態(tài)。色彩給人的感覺與氛圍，是影響配色視覺效果的決定因素?！ 榱耸咕W(wǎng)頁的整體畫面呈現(xiàn)穩(wěn)定協(xié)調(diào)的感覺，以便充分的掌握其規(guī)律來更好的分析學(xué)習(xí)，上次我們介紹了視覺角色主次位置的幾個(gè)概念，本節(jié)我們介紹色彩的對(duì)比。
對(duì)比與調(diào)和就是形式美的變化與統(tǒng)一規(guī)律
在一定條件下，不同色彩之間的對(duì)比會(huì)有不同的效果。在不同的環(huán)境下，多色彩給人一種印象，色彩單一給人另一種印象。
各種純色的對(duì)比會(huì)產(chǎn)生鮮明的色彩效果，很容易給人帶來視覺與心理的滿足。紅、黃、藍(lán)三種顏色是最極端的色彩，它們之間對(duì)比,哪一種顏色也無法影響對(duì)方。
很多朋友都以為色彩對(duì)比主要是紅綠、橙藍(lán)、黃紫色的對(duì)比，實(shí)際色彩對(duì)比范疇不局限于這些。是指各種色彩的界面構(gòu)成中的面積、形狀、位置以及色相、明度、純度之間的差別，使網(wǎng)頁色彩配合增添了許多變化、頁面更加豐富多彩。
色彩的對(duì)比規(guī)律大致有以下幾點(diǎn)：
■ 色相對(duì)比
是指因色相之間的差別形成的對(duì)比。當(dāng)主色相確定后，必須考慮其他色彩與主色相是什么關(guān)系，要表現(xiàn)什么內(nèi)容及效果等，這樣才能增強(qiáng)其表現(xiàn)力。不同色相對(duì)比取得的效果有所不同，兩色越接近，對(duì)比效果越柔和。越接近補(bǔ)色，對(duì)比效果越強(qiáng)烈。
→ 色相對(duì)比網(wǎng)頁例圖：http://www.portfolios.com
色相對(duì)比分析：
主要是以綠色與藍(lán)色之間的色相對(duì)比。從HSB數(shù)值上可看出嫩綠色的S純度高B亮度也很高，因此艷麗的顏色作為背景與前景純度稍低的墨綠和轱藍(lán)色形成色相之間的對(duì)比。前景的墨綠雖然純度達(dá)到最高值100％，比主色調(diào)高不少，但是因?yàn)榱炼鹊?，因此色彩顯示沒有主色調(diào)明艷。
結(jié)論：
該頁面色相的對(duì)比，主要作用于前景與背景的對(duì)比、局部與整體的對(duì)比。
■ 明度對(duì)比
明度對(duì)比可分為:彩色差的明度對(duì)比及非彩色差的明度對(duì)比
是指色彩之間明暗程度的差別而形成的對(duì)比。是頁面形成恰當(dāng)?shù)暮凇?、灰效果的主要手段。明度?duì)比在視覺上對(duì)色彩層次和空間關(guān)系影響較大。例如檸檬黃明度高，藍(lán)紫色的明度低，橙色和綠色屬中明度，紅色與藍(lán)色屬中低明度。
→ 明度對(duì)比網(wǎng)頁例圖：http://www.dior.com
明度對(duì)比分析：（非彩色差）
嚴(yán)格來說，該頁面應(yīng)該是黑白灰色非色彩構(gòu)成，攝影圖片中的人物衣服為灰色，相對(duì)單純的黑白對(duì)比柔和舒適于視覺。能使頁面顯得更單純、統(tǒng)一，形成另一道獨(dú)特的風(fēng)景。
■ 純度對(duì)比
是指不同色彩之間純度的差別而形成的對(duì)比。色彩純度可大致分為高純度、中純度、低純度三種。未經(jīng)調(diào)和過的原色純度是最高的，而間色多屬中純度的色彩，復(fù)色其本身純度偏低而屬低純度的色彩范圍。純度的對(duì)比會(huì)使色彩的效果更明確肯定。
→ 純度對(duì)比網(wǎng)頁例圖：http:// www.havaianas.com
純度對(duì)比分析：
整個(gè)頁面看起來異常艷麗刺激然而又非常的協(xié)調(diào)。以上數(shù)值主要選取了幾種較有代表性的顏色。
大家注意看，以上色彩除了粉紅色，其他幾組顏色都是高飽和度高亮度的顏色，因此充分的發(fā)揮出了色彩的艷麗程度。包括粉紅色在內(nèi)的幾種灰色階，在中間起到了和諧作用。白色能拉開相近色階的空間及明快頁面的作用，在這里可以說是功不可沒。
結(jié)論：
頁面實(shí)際上用了不少顏色，配色大膽。抓住顏色主次冷暖的安排，適度再加上和諧的過渡色灰色，實(shí)現(xiàn)了作者對(duì)該頁面的輕松配色。從多種高純度的搭配協(xié)調(diào)能力上看，足可見作者對(duì)色彩設(shè)計(jì)搭配不一般的功底。
這類網(wǎng)頁配色非常能夠體現(xiàn)出一個(gè)網(wǎng)站頁面產(chǎn)品個(gè)性，配色難度大。讓人過目難忘。
■ 補(bǔ)色對(duì)比
將紅與綠、黃與紫、藍(lán)與橙等具有補(bǔ)色關(guān)系的色彩彼此并置，使色彩感覺更為鮮明，純度增加，稱為補(bǔ)色對(duì)比。
→ 補(bǔ)色對(duì)比網(wǎng)頁例圖：http:// www.forthosewholovelife.co.uk
補(bǔ)色對(duì)比分析：
由冷色系的綠色、藍(lán)色組成大背景環(huán)境，純度較低。前景主要是突出產(chǎn)品、文字信息內(nèi)容的大紅色形成補(bǔ)色對(duì)比效果，RGB的R255數(shù)值與HSB是H為零，數(shù)值顯示非常明確，標(biāo)準(zhǔn)的大紅色。純度亮度非常高，達(dá)到最高值，加之白色的勾邊，使得紅色更為凸顯，更易于視覺對(duì)信息的迅速捕捉。
結(jié)論：
對(duì)比色的合理搭配，能拉開前景與背景的空間感，突出頁面主體物。尤其是紅色在主體物的運(yùn)用，能迅速傳遞視覺的效果。
■ 冷暖對(duì)比
是指不同色彩之間的冷暖差別形成的對(duì)比。色彩分為冷、暖兩大色系，以紅、橙、黃為暖色體系，藍(lán)、綠、紫則代表著冷色系，兩者基本上互為補(bǔ)色關(guān)系。另外，色彩的冷暖對(duì)比還受明度與純度的影響，白光反射高而感覺冷，黑色吸收率高而感覺暖。
→ 冷暖對(duì)比網(wǎng)頁例圖：http:// disney.go.com
冷暖對(duì)比分析：
以上這幾組顏色乍一看感覺鮮艷程度都差不多，但是通過觀察它們的數(shù)值發(fā)現(xiàn)飽和度都有相差，然而明度相近，因此它們給人造成的視覺感受幾乎是相同的。該頁面冷暖顏色較為豐富，橙和藍(lán)是對(duì)比最強(qiáng)烈的補(bǔ)色，其次是傾向不夠明顯的補(bǔ)色黃、紫。明度不同的兩個(gè)綠色起到了冷暖視覺的過渡作用。主色調(diào)的淺藍(lán)色亮度較高，讓頁面不易給人沉悶的感覺。
結(jié)論：
冷暖對(duì)比的
應(yīng)用，通常在休閑娛樂網(wǎng)站、食品網(wǎng)站出現(xiàn)比較多。
將這兩個(gè)色系的色彩安排在同一畫面時(shí)，其對(duì)比效果極為強(qiáng)烈。通常初學(xué)者較容易使兩色相互排斥，導(dǎo)致畫面色調(diào)不諧調(diào)。一般我們采用兩種調(diào)和的方法。
純度調(diào)整
降低冷暖兩色純度。用明度黑、白、灰變化來調(diào)整畫面的層次、直接使用黑、白、灰色系進(jìn)入畫面搭配，或者加入補(bǔ)色的諧調(diào)，也都能很好的起到協(xié)調(diào)的效果。
→ 純度調(diào)整網(wǎng)頁例圖：http:// www.darkelephant.com
純度調(diào)整分析：
主色調(diào)的橙色，添入了少許黑色做漸變背景色，降低了純度。輔助色的藍(lán)色是橙色的補(bǔ)色，主要起的是使得整個(gè)頁面過多的暖色降低協(xié)調(diào)于整體的效果，及背景色的棕色都分別提暗降低純度。而左上角的黃色則通過提高了亮度來降低純度。一個(gè)頁面里應(yīng)有少量純度較高的顏色而不至于使整個(gè)頁面過于壓抑，純度亮度很高的點(diǎn)睛色紅色就起到了這個(gè)作用。
結(jié)論：
純度的調(diào)整主要是通過明度黑、白、灰變化來調(diào)整畫面的層次，適當(dāng)?shù)募尤胙a(bǔ)色也是其中的一個(gè)辦法。
面積調(diào)整
主次的面積區(qū)分。根據(jù)設(shè)計(jì)主題的需要，在畫面的面積上以一方為主色，于是就掌控畫面的色調(diào)作用，其他的顏色在使用面積上拉開距離，使畫面的主次關(guān)系更突出，在統(tǒng)一的同時(shí)富有變化。
→ 面積調(diào)整網(wǎng)頁例圖：http:// www.upstairz.com
面積調(diào)整分析：
作為大面積使用的主色調(diào)--飽和度和亮度為最高值的橙色，通過適當(dāng)面積的白色加入?yún)f(xié)調(diào)和平衡了視覺的作用外，主體物的深紅紋樣的圖片點(diǎn)綴著純度、亮度較高的紅色有醒目作用，縮小面積而卻又能突出于視覺中心點(diǎn)，疏密構(gòu)圖的對(duì)比效果。
結(jié)論：
大面積的顏色和小面積使用的顏色可以拉開主次關(guān)系，位置的正確安排也是一個(gè)方面。
