運用對比色彩

網頁頁面中總是由具有某種內在聯系的各種色彩,組成一個完整統一的整體,形成畫面色彩總的趨向,稱為色調。也可以理解為色彩狀態。色彩給人的感覺與氛圍,是影響配色視覺效果的決定因素。

為了使網頁的整體畫面呈現穩定協調的感覺,以便充分的把握其規律來更好的分析學習,我們把視覺角色主次位置分為如下幾個概念,以便在網頁設計配色時更輕易操縱主動權。

》 主色調

頁面色彩的主要色調、總趨勢,其他配色不能超過該主要色調的視覺面積。(背景白色不一定根據視覺面積決定,可以根據頁面的感覺需要。)

》 輔色調

僅次與主色調的視覺面積的輔助色,是烘托主色調、支持主色調、起到融合主色調效果的輔助色調。

》 點睛色

在小范圍內點上強烈的顏色來突出主題效果,使頁面更加鮮明生動。

》 背景色

襯托環抱整體的色調,協調、支配整體的作用。

一個頁面的色彩角色主要是根據其面積多少的來區別主次關系、達到最終目的的。當不同的顏色使用的面積相當,這個頁面輕易呈現枯燥單調之感,而沒有局部細節的變化。當一個頁面使用的顏色過多、面積大小用得過于瑣碎,這個頁面輕易呈現花哨、主次不分沒有整體的感覺。為頁面設計配色的時候,應根據主題內容主次需要,各顏色有其各自的功能角色--面積使用最多的、最少的、不多不少的,加上冷暖的適度安排,純度明度的合理變化,遵循這條原則,網頁配色定能得心應手。

網頁頁面中總是由具有某種內在聯系的各種色彩,組成一個完整統一的整體,形成畫面色彩總的趨向,稱為色調。也可以理解為色彩狀態。色彩給人的感覺與氛圍,是影響配色視覺效果的決定因素。為了使網頁的整體畫面呈現穩定協調的感覺,以便充分的把握其規律來更好的分析學習,上次我們介紹了視覺角色主次位置的幾個概念,本節我們介紹色彩的對比。

對比與調和就是形式美的變化與統一規律 在一定條件下,不同色彩之間的對比會有不同的效果。在不同的環境下,多色彩給人一種印象,色彩單一給人另一種印象。

各種純色的對比會產生鮮明的色彩效果,很輕易給人帶來視覺與心理的滿足。紅、黃、藍三種顏色是最極端的色彩,它們之間對比,哪一種顏色也無法影響對方。

很多朋友都以為色彩對比主要是紅綠、橙藍、黃紫色的對比,實際色彩對比范疇不局限于這些。是指各種色彩的界面構成中的面積、外形、位置以及色相、明度、純度之間的差別,使網頁色彩配合增添了許多變化、頁面更加豐富多彩。

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

》色相對比

是指因色相之間的差別形成的對比。當主色相確定后,必須考慮其他色彩與主色相是什么關系,要表現什么內容及效果等,這樣才能增強其表現力。不同色相對比取得的效果有所不同,兩色越接近,對比效果越柔和。越接近補色,對比效果越強烈。

色相對比分析:

主要是以綠色與藍色之間的色相對比。從HSB數值上可看出嫩綠色的S純度高B亮度也很高,因此艷麗的顏色作為背景與前景純度稍低的墨綠和?藍色形成色相之間的對比。前景的墨綠雖然純度達到最高值 100%,比主色調高不少,但是因為亮度低,因此色彩顯示沒有主色調明艷。

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

》明度對比

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

是指色彩之間明暗程度的差別而形成的對比。是頁面形成恰當的黑、白、灰效果的主要手段。明度對比在視覺上對色彩層次和空間關系影響較大。例如檸檬黃明度高,藍紫色的明度低,橙色和綠色屬中明度,紅色與藍色屬中低明度。

》純度對比

是指不同色彩之間純度的差別而形成的對比。色彩純度可大致分為高純度、中純度、低純度三種。未經調和過的原色純度是最高的,而間色多屬中純度的色彩,復色其本身純度偏低而屬低純度的色彩范圍。純度的對比會使色彩的效果更明確肯定。

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

大家注重看,以上色彩除了粉紅色,其他幾組顏色都是高飽和度高亮度的顏色,因此充分的發揮出了色彩的艷麗程度。包括粉紅色在內的幾種灰色階,在中間起到了和諧作用。白色能拉開相近色階的空間及明快頁面的作用,在這里可以說是功不可沒。

結論:
頁面實際上用了不少顏色,配色大膽。抓住顏色主次冷暖的安排,適度再加上和諧的過渡色灰色,實現了作者對該頁面的輕松配色。從多種高純度的搭配協調能力上看,足可見作者對色彩設計搭配不一般的功底。

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

》補色對比

將紅與綠、黃與紫、藍與橙等具有補色關系的色彩彼此并置,使色彩感覺更為鮮明,純度增加,稱為補色對比。

補色對比分析:

由冷色系的綠色、藍色組成大背景環境,純度較低。前景主要是突出產品、文字信息內容的大紅色形成補色對比效果,RGB的R255數值與HSB是H為零,數值顯示非常明確,標準的大紅色。純度亮度非常高,達到最高值,加之白色的勾邊,使得紅色更為凸顯,更易于視覺對信息的迅速捕捉。

結論:
對比色的合理搭配,能拉開前景與背景的空間感,突出頁面主體物。尤其是紅色在主體物的運用,能迅速傳遞視覺的效果

》冷暖對比

是指不同色彩之間的冷暖差別形成的對比。色彩分為冷、暖兩大色系,以紅、橙、黃為暖色體系,藍、綠、紫則代表著冷色系,兩者基本上互為補色關系。另外,色彩的冷暖對比還受明度與純度的影響,白光反射高而感覺冷,黑色吸收率高而感覺暖。

冷暖對比分析:

以上這幾組顏色乍一看感覺鮮艷程度都差不多,但是通過觀察它們的數值發現飽和度都有相差,然而明度相近,因此它們給人造成的視覺感受幾乎是相同的。該頁面冷暖顏色較為豐富,橙和藍是對比最強烈的補色,其次是傾向不夠明顯的補色黃、紫。明度不同的兩個綠色起到了冷暖視覺的過渡作用。主色調的淺藍色亮度較高,讓頁面不易給人沉悶的感覺。

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

將這兩個色系的色彩安排在同一畫面時,其對比效果極為強烈。通常初學者較輕易使兩色相互排斥,導致畫面色調不諧調。一般我們采用兩種調和的方法。

》純度調整

降低冷暖兩色純度。用明度黑、白、灰變化來調整畫面的層次、直接使用黑、白、灰色系進入畫面搭配,或者加入補色的諧調,也都能很好的起到協調的效果。

純度調整分析:

主色調的橙色,添入了少許黑色做漸變背景色,降低了純度。輔助色的藍色是橙色的補色,主要起的是使得整個頁面過多的暖色降低協調于整體的效果,及背景色的棕色都分別提暗降低純度。而左上角的黃色則通過提高了亮度來降低純度。一個頁面里應有少量純度較高的顏色而不至于使整個頁面過于壓抑,純度亮度很高的點睛色紅色就起到了這個作用。

結論:

純度的調整主要是通過明度黑、白、灰變化來調整畫面的層次,適當的加入補色也是其中的一個辦法。

》面積調整

主次的面積區分。根據設計主題的需要,在畫面的面積上以一方為主色,于是就掌控畫面的色調作用,其他的顏色在使用面積上拉開距離,使畫面的主次關系更突出,在統一的同時富有變化。

面積調整分析:

作為大面積使用的主色調--飽和度和亮度為最高值的橙色,通過適當面積的白色加入協調和平衡了視覺的作用外,主體物的深紅紋樣的圖片點綴著純度、亮度較高的紅色有醒目作用,縮小面積而卻又能突出于視覺中心點,疏密構圖的對比效果。

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

》面積對比

同一種色彩,面積越大,明度、純度越強,面積越小,明度、純度越低。面積大的時候,亮的色顯得更輕,暗的色顯得更重。這種現象稱為色彩的面積效果。面積對比是指頁面中各種色彩在面積上多與少、大與小的差別,影響到頁面主次關系。

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

面積對比分析:

作為大面積使用的主色調--飽和度和亮度為最高值的橙色,通過適當面積的白色加入協調和平衡了視覺的作用外,主體物的深紅紋樣的圖片點綴著純度、亮度較高的紅色有醒目作用,縮小面積而卻又能突出于視覺中心點,疏密構圖的對比效果。

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