網頁頁麵中總是由具有某（mǒu）種內在聯（lián）係的各種色（sè）彩（cǎi），組成一個完（wán）整（zhěng）統一的整體，形成（chéng）畫（huà）麵（miàn）色彩總（zǒng）的趨向，稱為色調。也可以理（lǐ）解為色（sè）彩狀（zhuàng）態。色彩給人的感覺與（yǔ）氛圍，是影響配色視覺效果（guǒ）的決定因素。

　　為了使網頁的整體畫麵呈現穩定（dìng）協（xié）調（diào）的（de）感覺，以便充（chōng）分的掌握（wò）其規律來更好的分（fèn）析學習，上次我們介紹了視（shì）覺角（jiǎo）色主次位置的（de）幾個概（gài）念（niàn），本節（jiē）我們（men）介紹色彩的對（duì）比（bǐ）。
　　
　　對比與調和（hé）就是形式美（měi）的變化與（yǔ）統一規律

　　在一定條（tiáo）件下，不同色（sè）彩之（zhī）間的對比會有不同的（de）效（xiào）果。在不同的環境下，多色彩給人一種印（yìn）象，色彩單一給人（rén）另一種印（yìn）象。
　　各（gè）種純色的對比會產生（shēng）鮮明（míng）的（de）色彩效果，很容（róng）易給人帶（dài）來（lái）視覺與（yǔ）心理的（de）滿足。紅、黃、藍三種顏色是（shì）最極（jí）端的色彩（cǎi），它（tā）們之間對比,哪一種（zhǒng）顏色也無（wú）法（fǎ）影響對方。
　　很多朋友都以為色彩對比主要是紅綠（lǜ）、橙藍、黃紫（zǐ）色的對（duì）比，實際（jì）色彩對比（bǐ）範疇不局（jú）限於這些。是指各種色彩的界麵（miàn）構成中的麵積、形狀、位置以及色相、明（míng）度、純度之間的差別，使網頁色彩配合增添了許（xǔ）多變化（huà）、頁麵更加豐（fēng）富多（duō）彩（cǎi）。
　　
　　色（sè）彩（cǎi）的對（duì）比規律大致有以下幾點：
　　
　　■ 色（sè）相對比（bǐ）

　　是指（zhǐ）因色相之間的差別形成的對比。當主色相（xiàng）確定後，必須考慮其他（tā）色（sè）彩與主色相是什（shí）麽關（guān）係，要表現什麽內（nèi）容及效果等，這樣才能增強其表現力。不（bú）同（tóng）色相對比取得的效果有所不同，兩色越接（jiē）近（jìn），對比效果（guǒ）越柔和。越（yuè）接近補色（sè），對比效（xiào）果（guǒ）越（yuè）強（qiáng）烈。
　　
　　
　　→ 色相對（duì）比（bǐ）網頁例（lì）圖：http://www.portfolioses.com

 

色相對比網頁例圖

　　
　　色相對比分析：
　　主（zhǔ）要是以綠色與藍色之間的色（sè）相對（duì）比。從HSB數值上可看出嫩綠（lǜ）色的S純度高B亮度（dù）也很高，因此豔麗的顏色作為背景與前景純（chún）度稍低的墨綠和軲（gū）藍色（sè）形成色相之間的（de）對（duì）比。前景的墨綠雖然純度達到最高值100％，比主（zhǔ）色（sè）調高不少，但是（shì）因為亮度低，因此色彩（cǎi）顯示沒有（yǒu）主色（sè）調明（míng）豔。
　　結論：
　　該（gāi）頁麵色（sè）相的對比，主要作（zuò）用於前景與背景的對比、局部與整體（tǐ）的（de）對（duì）比（bǐ）。
　　
　　
　　
　　■ 明（míng）度對（duì）比
　　
　　明度對比可分為:彩色差的明度對比及非（fēi）彩色（sè）差的（de）明（míng）度對比
　　
　　是指色彩之間明暗程度的差別而形成的對比。是頁（yè）麵（miàn）形（xíng）成（chéng）恰當的黑、白、灰效（xiào）果（guǒ）的主要（yào）手（shǒu）段。明度（dù）對比在視覺上對色彩層次和（hé）空間關係影響較（jiào）大。例如檸檬黃明度高，藍紫色的明度低，橙（chéng）色和（hé）綠色（sè）屬中（zhōng）明（míng）度，紅色與藍色屬中低明度（dù）。


 

明度對比網頁例圖

　　明度對比分析：（非彩色差）
　　嚴格（gé）來說，該頁麵應該是黑白灰色非色（sè）彩構（gòu）成，攝（shè）影（yǐng）圖片中的人物衣服為灰色（sè），相對單純的黑白對比（bǐ）柔和舒適於視覺。能（néng）使頁麵顯得更單純、統一，形成另一道獨特（tè）的風景。

　　■ 純度對比（bǐ）
　　是（shì）指（zhǐ）不同色（sè）彩之間純度的差（chà）別而形成的對（duì）比。色彩純（chún）度（dù）可（kě）大致分為高純度、中純度、低純度三種。未（wèi）經調和過的原色純（chún）度是最高的，而間色多屬中純度（dù）的色彩，複色其本身純度偏低而屬低（dī）純度（dù）的色彩（cǎi）範（fàn）圍。純度的（de）對比會使色彩的效果更明確肯定。

　　→ 純（chún）度（dù）對（duì）比網頁例圖：http:// www.havaianas.com

 

純度（dù）對（duì）比網（wǎng）頁例圖

　　純度對比分析：

　　整（zhěng）個頁麵看起來異常豔麗刺激然而又非常的協調。以上數值主（zhǔ）要選（xuǎn）取（qǔ）了幾種較有代表性的顏（yán）色。
　　大（dà）家注意看（kàn），以上色彩除了（le）粉紅（hóng）色，其他幾組顏色都是高飽和度高亮（liàng）度（dù）的顏色，因此充分的發揮出了色彩的豔麗（lì）程度。包括粉紅色在內的幾種灰色（sè）階（jiē），在（zài）中間起到了和諧作用。白色能拉開相近色階的（de）空（kōng）間及明快頁麵的（de）作用，在這裏可以說是功不可沒。

　　結論：
　　頁麵實（shí）際上用了不少顏色，配色（sè）大膽。抓住顏色主次冷暖的安排（pái），適度再（zài）加上和諧的過（guò）渡色灰色，實現了作者對該頁麵的（de）輕（qīng）鬆（sōng）配色。從（cóng）多種高純度（dù）的搭配協（xié）調能（néng）力上（shàng）看，足可見作者對色彩設計搭配不一般的功底。
　　這（zhè）類網（wǎng）頁配色非（fēi）常能夠體現出一個網站頁麵（miàn）產品個性，配色難度大。讓人過目難忘（wàng）。

　　■ 補色對比
　　將紅與綠、黃與（yǔ）紫（zǐ）、藍與橙等具有補（bǔ）色關係的色彩彼（bǐ）此並置（zhì），使色彩感（gǎn）覺更（gèng）為（wéi）鮮明，純度增加，稱為補色對比。

    → 補色對比（bǐ）網頁例圖：http:// www.forthosewholovelife.co.uk

 

補色對比網頁例圖

　　補色對比分析（xī）：
　　由（yóu）冷色係的綠色、藍色組成（chéng）大背景環境，純度較（jiào）低。前景主要是突出產（chǎn）品（pǐn）、文字信息內（nèi）容的（de）大紅色形成（chéng）補色對比（bǐ）效果，RGB的R255數（shù）值與HSB是H為零，數（shù）值顯示非常明確，標（biāo）準的大紅色。純度（dù）亮度（dù）非常高，達到最高值，加之白色的勾邊，使得（dé）紅色更（gèng）為（wéi）凸顯，更易於（yú）視覺對信息的（de）迅速捕捉。

　　結論（lùn）：

　　對比（bǐ）色的（de）合理搭（dā）配，能（néng）拉開前景與背景的空間（jiān）感（gǎn），突出頁麵（miàn）主體物。尤其是紅色在主體物的運用，能迅速（sù）傳遞視覺的（de）效果。
 

　　■ 冷暖對比
　　是指不同色彩之間的冷暖差別（bié）形成的（de）對（duì）比。色彩分為冷、暖兩大色（sè）係，以紅、橙（chéng）、黃為暖色體係，藍、綠（lǜ）、紫（zǐ）則（zé）代表（biǎo）著冷色係，兩者基（jī）本上互為（wéi）補色關係（xì）。另（lìng）外，色彩的冷（lěng）暖（nuǎn）對比還（hái）受明度與純度的影（yǐng）響，白（bái）光反射高而感覺冷，黑色吸（xī）收率高而（ér）感覺暖。

    → 冷暖對比網頁例圖：http://disney.go.com

冷暖對比網頁例圖

　　冷暖對比分（fèn）析：
　　以（yǐ）上（shàng）這幾組（zǔ）顏色乍一看感覺鮮豔程度都差不多，但是通過（guò）觀（guān）察它（tā）們的數值發現（xiàn）飽和度都有相差（chà），然而明（míng）度相近，因（yīn）此它們給人造（zào）成的視覺感（gǎn）受幾乎是相（xiàng）同（tóng）的。該頁麵冷暖顏色較為豐富（fù），橙和藍（lán）是對比最強烈的補色，其次是傾向（xiàng）不夠（gòu）明顯的補色黃、紫。明度不（bú）同的兩（liǎng）個綠色起（qǐ）到了冷暖視覺（jiào）的過（guò）渡作用。主色調的淺藍色（sè）亮度較高（gāo），讓頁麵不易給人沉悶的感覺。

　　結論：
　　冷暖對比的應用，通常在休閑娛樂網站、食品網站出現比較多。
　　
　　將這兩（liǎng）個（gè）色（sè）係的色（sè）彩安（ān）排在同一畫麵（miàn）時，其對比效（xiào）果極為強烈。通常初學（xué）者較容易使兩色相互排斥，導（dǎo）致畫（huà）麵色調（diào）不諧調（diào）。一般我們采用兩（liǎng）種調和（hé）的方法。

　　純度調整
　　降低冷暖兩色純度。用明度黑、白、灰變化（huà）來調整（zhěng）畫麵的層次、直接使用黑、白（bái）、灰色係進入畫麵搭配，或者加入補色的諧調，也都能很好（hǎo）的（de）起到（dào）協調的效果。
　　

    → 純度（dù）調整網頁例（lì）圖（tú）：http:// www.darkelephant.com  

 

純度調整網頁例（lì）圖

　　純度調整分析：

　　主色調的橙色，添入了少（shǎo）許黑（hēi）色做漸變背景色，降低了（le）純度。輔助色（sè）的藍（lán）色是橙色（sè）的補色，主要起的是（shì）使得整個頁麵過多的暖色降低協調於整體（tǐ）的效果（guǒ），及背景（jǐng）色的（de）棕色都分別提暗降（jiàng）低純度。而左上角的黃色則通過提高（gāo）了亮度來降低純度。一個頁麵（miàn）裏應有少量純度（dù）較高的顏色（sè）而不（bú）至（zhì）於（yú）使（shǐ）整個頁麵過於壓抑，