havaianas

各種色彩對比分析

網頁頁面中總是由具有某種內在聯系的各種色彩，組成一個完整統一的整體，形成畫面色

彩總的趨向，稱為色調。也可以理解為色彩狀態。色彩給人的感覺與氛圍，是影響配色視覺

效果的決定因素。

為了使網頁的整體畫面呈現穩定協調的感覺，以便充分的掌握其規律來更好的分析學

習，上次我們介紹了視覺角色主次位置的幾個概念，本節我們介紹色彩的對比。

對比與調和就是形式美的變化與統一規律

在一定條件下，不同色彩之間的對比會有不同的效果。在不同的環境下，多色彩給人一

種印象，色彩單一給人另一種印象。

各種純色的對比會產生鮮明的色彩效果，很容易給人帶來視覺與心理的滿足。紅、黃、

藍三種顏色是最極端的色彩，它們之間對比,哪一種顏色也無法影響對方。

很多朋友都以為色彩對比主要是紅綠、橙藍、黃紫色的對比，實際色彩對比范疇不局限

于這些。是指各種色彩的界面構成中的面積、形狀、位置以及色相、明度、純度之間的差別，

使網頁色彩配合增添了許多變化、頁面更加豐富多彩。

色彩的對比規律大致有以下幾點：

■色相對比

是指因色相之間的差別形成的對比。當主色相確定后，必須考慮其他色彩與主色相是什

么關系，要表現什么內容及效果等，這樣才能增強其表現力。不同色相對比取得的效果有所

不同，兩色越接近，對比效果越柔和。越接近補色，對比效果越強烈。

→色相對比網頁例圖：

色相對比網頁例圖

色相對比分析：

主要是以綠色與藍色之間的色相對比。從HSB數值上可看出嫩綠色的S純度高B亮度

也很高，因此艷麗的顏色作為背景與前景純度稍低的墨綠和轱藍色形成色相之間的對比。前

景的墨綠雖然純度達到最高值100％，比主色調高不少，但是因為亮度低，因此色彩顯示沒

有主色調明艷。

結論：

該頁面色相的對比，主要作用于前景與背景的對比、局部與整體的對比。

■明度對比

明度對比可分為:彩色差的明度對比及非彩色差的明度對比

是指色彩之間明暗程度的差別而形成的對比。是頁面形成恰當的黑、白、灰效果的主要

手段。明度對比在視覺上對色彩層次和空間關系影響較大。例如檸檬黃明度高，藍紫色的明

度低，橙色和綠色屬中明度，紅色與藍色屬中低明度。

→明度對比網頁例圖：

明度對比網頁例圖

明度對比分析：（非彩色差）

嚴格來說，該頁面應該是黑白灰色非色彩構成，攝影圖片中的人物衣服為灰色，相對單

純的黑白對比柔和舒適于視覺。能使頁面顯得更單純、統一，形成另一道獨特的風景。

■純度對比

是指不同色彩之間純度的差別而形成的對比。色彩純度可大致分為高純度、中純度、低

純度三種。未經調和過的原色純度是最高的，而間色多屬中純度的色彩，復色其本身純度偏

低而屬低純度的色彩范圍。純度的對比會使色彩的效果更明確肯定。

→純度對比網頁例圖：

純度對比網頁例圖

純度對比分析：

整個頁面看起來異常艷麗刺激然而又非常的協調。以上數值主要選取了幾種較有代表性

的顏色。

大家注意看，以上色彩除了粉紅色，其他幾組顏色都是高飽和度高亮度的顏色，因此充

分的發揮出了色彩的艷麗程度。包括粉紅色在內的幾種灰色階，在中間起到了和諧作用。白

色能拉開相近色階的空間及明快頁面的作用，在這里可以說是功不可沒。

結論：

頁面實際上用了不少顏色，配色大膽。抓住顏色主次冷暖的安排，適度再加上和諧的過

渡色灰色，實現了作者對該頁面的輕松配色。從多種高純度的搭配協調能力上看，足可見作

者對色彩設計搭配不一般的功底。

這類網頁配色非常能夠體現出一個網站頁面產品個性，配色難度大。讓人過目難忘。

■補色對比

將紅與綠、黃與紫、藍與橙等具有補色關系的色彩彼此并置，使色彩感覺更為鮮明，純

度增加，稱為補色對比。

→補色對比網頁例圖：

補色對比網頁例圖

補色對比分析：

由冷色系的綠色、藍色組成大背景環境，純度較低。前景主要是突出產品、文字信息內

容的大紅色形成補色對比效果，RGB的R255數值與HSB是H為零，數值顯示非常明確，

標準的大紅色。純度亮度非常高，達到最高值，加之白色的勾邊，使得紅色更為凸顯，更易

于視覺對信息的迅速捕捉。

結論：

對比色的合理搭配，能拉開前景與背景的空間感，突出頁面主體物。尤其是紅色在主體

物的運用，能迅速傳遞視覺的效果。

■冷暖對比

是指不同色彩之間的冷暖差別形成的對比。色彩分為冷、暖兩大色系，以紅、橙、黃為

暖色體系，藍、綠、紫則代表著冷色系，兩者基本上互為補色關系。另外，色彩的冷暖對比

還受明度與純度的影響，白光反射高而感覺冷，黑色吸收率高而感覺暖。

→冷暖對比網頁例圖：

冷暖對比網頁例圖

冷暖對比分析：

以上這幾組顏色乍一看感覺鮮艷程度都差不多，但是通過觀察它們的數值發現飽和度都

有相差，然而明度相近，因此它們給人造成的視覺感受幾乎是相同的。該頁面冷暖顏色較為

豐富，橙和藍是對比最強烈的補色，其次是傾向不夠明顯的補色黃、紫。明度不同的兩個綠

色起到了冷暖視覺的過渡作用。主色調的淺藍色亮度較高，讓頁面不易給人沉悶的感覺。

結論：

冷暖對比的應用，通常在休閑娛樂網站、食品網站出現比較多。

將這兩個色系的色彩安排在同一畫面時，其對比效果極為強烈。通常初學者較容易使兩

色相互排斥，導致畫面色調不諧調。一般我們采用兩種調和的方法。

純度調整

降低冷暖兩色純度。用明度黑、白、灰變化來調整畫面的層次、直接使用黑、白、灰色

系進入畫面搭配，或者加入補色的諧調，也都能很好的起到協調的效果。

→純度調整網頁例圖：

純度調整網頁例圖

純度調整分析：

主色調的橙色，添入了少許黑色做漸變背景色，降低了純度。輔助色的藍色是橙色的補

色，主要起的是使得整個頁面過多的暖色降低協調于整體的效果，及背景色的棕色都分別提

暗降低純度。而左上角的黃色則通過提高了亮度來降低純度。一個頁面里應有少量純度較高

的顏色而不至于使整個頁面過于壓抑，純度亮度很高的點睛色紅色就起到了這個作用。

結論：

純度的調整主要是通過明度黑、白、灰變化來調整畫面的層次，適當的加入補色也是其

中的一個辦法。

面積調整

主次的面積區分。根據設計主題的需要，在畫面的面積上以一方為主色，于是就掌控畫

面的色調作用，其他的顏色在使用面積上拉開距離，使畫面的主次關系更突出，在統一的同

時富有變化。

→面積調整網頁例圖：

面積調整網頁例圖

面積調整分析：

作為大面積使用的主色調--飽和度和亮度為最高值的橙色，通過適當面積的白色加入協

調和平衡了視覺的作用外，主體物的深紅紋樣的圖片點綴著純度、亮度較高的紅色有醒目作

用，縮小面積而卻又能突出于視覺中心點，疏密構圖的對比效果。

結論：

大面積的顏色和小面積使用的顏色可以拉開主次關系，位置的正確安排也是一個方面。

■面積對比

同一種色彩，面積越大，明度、純度越強，面積越小，明度、純度越低。面積大的時候，

亮的色顯得更輕，暗的色顯得更重。這種現象稱為色彩的面積效果。面積對比是指頁面中各

種色彩在面積上多與少、大與小的差別，影響到頁面主次關系。

面積的對比,可以是中高低明度差的面積變化及中高低純度差的面積變化。

→面積對比網頁例圖：

面積對比網頁例圖

面積對比分析：

作為大面積使用的主色調--飽和度和亮度為最高值的橙色，通過適當面積的白色加入協

調和平衡了視覺的作用外，主體物的深紅紋樣的圖片點綴著純度、亮度較高的紅色有醒目作

用，縮小面積而卻又能突出于視覺中心點，疏密構圖的對比效果。

結論：

大面積的顏色和小面積使用的顏色可以拉開主次關系，位置的正確安排也是一個方面。