網頁頁麵中總是由具有某種內在聯（lián）係的各（gè）種色彩，組成一個完整統一的（de）整體（tǐ），形成畫麵色（sè）彩總的趨向，稱（chēng）為色調。也可以理（lǐ）解為色彩狀態。色彩給人的感覺（jiào）與氛（fēn）圍，是影響配（pèi）色視（shì）覺效果的決定因素。

　　為了使（shǐ）網頁的整體畫（huà）麵呈現穩定協調的感覺，以便充分（fèn）的（de）掌握其規律來（lái）更好的分（fèn）析學習，上次我們介紹了視覺角色主次位置的幾個概念，本節我們（men）介紹色彩的對比。
　　
　　對比與調和就是形式美的變化與統一規律

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

　　是指因色相之間的差別形成（chéng）的對比。當主色相確定後，必須考（kǎo）慮其他色彩與主（zhǔ）色相是什麽關係，要表現什麽（me）內容及效果等，這樣才能增強其（qí）表現力。不同色相對比取得的效果有（yǒu）所不同（tóng），兩色越接近，對比效果越柔和。越接近補色，對比效果越強烈。
　　
　　
　　→ 色相對比網頁（yè）例圖：http://www.portfolioses.com

 

色相對比網頁例圖

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


 

明度對（duì）比（bǐ）網頁例圖

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

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

　　→ 純度對比網頁例圖：http:// www.havaianas.com

 

純（chún）度對比網頁例圖

　　純度對比（bǐ）分析（xī）：

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

　　結論：
　　頁麵實際上用（yòng）了不少顏色，配色大膽。抓住顏色主次冷暖的安排，適度再加上和諧的過渡色灰色，實現了作者對該頁（yè）麵的輕鬆配色。從多種高（gāo）純（chún）度的搭配協（xié）調能力（lì）上看，足可見作者對色彩設（shè）計搭配不一般的功底。
　　這類網頁配色非常能夠體現出一個網站（zhàn）頁麵產品（pǐn）個性，配色難度大。讓人過目難忘。

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

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

 

補色對比網頁例（lì）圖

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

　　結論：

　　對比色的合理搭（dā）配，能拉開前景與背景的（de）空間感，突出頁麵主體物。尤其是（shì）紅（hóng）色在主體物的運用，能迅速傳遞視（shì）覺的效果。
 

　　■ 冷暖對比
　　是指不同色彩之間的冷暖（nuǎn）差別形（xíng）成的對比。色彩分（fèn）為冷、暖兩大色係，以紅、橙、黃為暖色體係，藍、綠、紫則代表（biǎo）著冷色係（xì），兩者基本上互為補色關係。另外，色彩的冷暖對比還受明度與純（chún）度的影響（xiǎng），白光反射高而感覺冷，黑色吸收率高而感覺暖。

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

冷暖對比網頁例圖

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

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

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

    → 純度調整網頁例圖：http:// www.darkelephant.com  

 

純（chún）度調（diào）整網頁例圖

　　純（chún）度調整分析：

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