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