12.網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用-色彩的對(duì)比

1、12. 網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用 對(duì)比 - 色彩的 網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用色彩的對(duì)比 網(wǎng)頁(yè)頁(yè)面中總是由具有某種內(nèi)在聯(lián)系的各種 色彩，組成一個(gè)完整統(tǒng)一的整體， 形成畫面色彩 總的趨向，稱為色調(diào)。也可以理解為色彩狀態(tài)。 色彩給人的感覺(jué)與氛圍， 是影響配色視覺(jué)效果的 決定因素。 為了使網(wǎng)頁(yè)的整體畫面呈現(xiàn)穩(wěn)定協(xié)調(diào)的感 覺(jué)，以便充分的掌握其規(guī)律來(lái)更好的分析學(xué)習(xí)， 上次我們介紹了視覺(jué)角色主次位置的幾個(gè)概念， 本節(jié)我們介紹 色彩的對(duì)比。 對(duì)比與調(diào)和就是形式美的變化與統(tǒng)一規(guī)律 在一定條件下，不同色彩之間的對(duì)比會(huì)有不 同的效果。 在不同的環(huán)境下， 多色彩給人一種印 象，色彩單一給人另一種印象。 各種純色的對(duì)比會(huì)產(chǎn)生鮮明的色彩

2、效果， 很 容易給人帶來(lái)視覺(jué)與心理的滿足。紅、黃、藍(lán)三 種顏色是最極端的色彩，它們之間對(duì)比 , 哪一種 顏色也無(wú)法影響對(duì)方。 很多朋友都以為色彩對(duì)比主要是紅綠、橙 藍(lán)、黃紫色的對(duì)比， 實(shí)際色彩對(duì)比范疇不局限于 這些。是指各種色彩的界面構(gòu)成中的面積、 形狀、 位置以及色相、明度、純度之間的差別，使網(wǎng)頁(yè) 色彩配合增添了許多變化、頁(yè)面更加豐富多彩。 色彩的對(duì)比規(guī)律大致有以下幾點(diǎn)： 一、色相對(duì)比 是指因色相之間的差別形成的對(duì)比。 當(dāng)主色 相確定后，必須考慮其他色彩與主色相是什么關(guān) 系，要表現(xiàn)什么內(nèi)容及效果等， 這樣才能增強(qiáng)其 表現(xiàn)力。 不同色相對(duì)比取得的效果有所不同， 兩 色越接近，對(duì)比效果越柔和。越

3、接近補(bǔ)色，對(duì)比 效果越強(qiáng)烈。 色相對(duì)比網(wǎng)頁(yè)例圖： 色相對(duì)比分析： 主要是以綠色與藍(lán)色之間的色相對(duì)比。從 HSB數(shù)值上可看出嫩綠色的 S純度高 B 亮度也很 高，因此艷麗的顏色作為背景與前景純度稍低的 墨綠和轱藍(lán)色形成色相之間的對(duì)比。 前景的墨綠 雖然純度達(dá)到最高值 100，比主色調(diào)高不少， 但是因?yàn)榱炼鹊?，因此色彩顯示沒(méi)有主色調(diào)明 艷。 結(jié)論： 該頁(yè)面色相的對(duì)比， 主要作用于前景與背景 的對(duì)比、局部與整體的對(duì)比。 二、明度對(duì)比 明度對(duì)比可分為 : 彩色差的明度對(duì)比及非彩 色差的明度對(duì)比 是指色彩之間明暗程度的差別而形成的對(duì) 比。是頁(yè)面形成恰當(dāng)?shù)暮凇?、灰效果的主要?段。明度對(duì)比在視覺(jué)上對(duì)色彩

4、層次和空間關(guān)系影 響較大。例如檸檬黃明度高，藍(lán)紫色的明度低， 橙色和綠色屬中明度，紅色與藍(lán)色屬中低明度。 明度對(duì)比網(wǎng)頁(yè)例圖： 明度對(duì)比分析：（非彩色差） 嚴(yán)格來(lái)說(shuō)，該頁(yè)面應(yīng)該是黑白灰色非色彩構(gòu) 成，攝影圖片中的人物衣服為灰色， 相對(duì)單純的 黑白對(duì)比柔和舒適于視覺(jué)。能使頁(yè)面顯得更單 純、統(tǒng)一，形成另一道獨(dú)特的風(fēng)景。 三、純度對(duì)比 是指不同色彩之間純度的差別而形成的對(duì) 比。色彩純度可大致分為高純度、中純度、低純 度三種。 未經(jīng)調(diào)和過(guò)的原色純度是最高的， 而間 色多屬中純度的色彩， 復(fù)色其本身純度偏低而屬 低純度的色彩范圍。 純度的對(duì)比會(huì)使色彩的效果 更明確肯定。 純度對(duì)比網(wǎng)頁(yè)例圖： 純度對(duì)比分析：

5、 整個(gè)頁(yè)面看起來(lái)異常艷麗刺激然而又非常 的協(xié)調(diào)。以上數(shù)值主要選取了幾種較有代表性的 顏色。 大家注意看， 以上色彩除了粉紅色， 其他幾 組顏色都是高飽和度高亮度的顏色， 因此充分的 發(fā)揮出了色彩的艷麗程度。 包括粉紅色在內(nèi)的幾 種灰色階， 在中間起到了和諧作用。 白色能拉開(kāi) 相近色階的空間及明快頁(yè)面的作用， 在這里可以 說(shuō)是功不可沒(méi)。 結(jié)論： 頁(yè)面實(shí)際上用了不少顏色， 配色大膽。 抓住 顏色主次冷暖的安排， 適度再加上和諧的過(guò)渡色 灰色，實(shí)現(xiàn)了作者對(duì)該頁(yè)面的輕松配色。 從多種 高純度的搭配協(xié)調(diào)能力上看， 足可見(jiàn)作者對(duì)色彩 設(shè)計(jì)搭配不一般的功底。 這類網(wǎng)頁(yè)配色非常能夠體現(xiàn)出一個(gè)網(wǎng)站頁(yè) 面產(chǎn)品個(gè)性

6、，配色難度大。讓人過(guò)目難忘。 五、補(bǔ)色對(duì)比 將紅與綠、 黃與紫、藍(lán)與橙等具有補(bǔ)色關(guān)系 的色彩彼此并置， 使色彩感覺(jué)更為鮮明， 純度增 加，稱為補(bǔ)色對(duì)比。 補(bǔ)色對(duì)比網(wǎng)頁(yè)例圖： 補(bǔ)色對(duì)比分析： 由冷色系的綠色、 藍(lán)色組成大背景環(huán)境， 純 度較低。 前景主要是突出產(chǎn)品、 文字信息內(nèi)容的 大紅色形成補(bǔ)色對(duì)比效果， RGB的 R255 數(shù)值與 HSB是 H 為零， 數(shù)值顯示非常明確，標(biāo)準(zhǔn)的大 紅色。純度亮度非常高，達(dá)到最高值，加之白色 的勾邊， 使得紅色更為凸顯， 更易于視覺(jué)對(duì)信息 的迅速捕捉。 結(jié)論： 對(duì)比色的合理搭配， 能拉開(kāi)前景與背景的空 間感，突出頁(yè)面主體物。 尤其是紅色在主體物的 運(yùn)用，能迅速

7、傳遞視覺(jué)的效果。 六、冷暖對(duì)比 是指不同色彩之間的冷暖差別形成的對(duì)比。 色彩分為冷、暖兩大色系，以紅、橙、黃為暖色 體系，藍(lán)、綠、紫則代表著冷色系，兩者基本上 互為補(bǔ)色關(guān)系。 另外，色彩的冷暖對(duì)比還受明度 與純度的影響， 白光反射高而感覺(jué)冷， 黑色吸收 率高而感覺(jué)暖。 冷暖對(duì)比網(wǎng)頁(yè)例圖： 冷暖對(duì)比分析： 以上這幾組顏色乍一看感覺(jué)鮮艷程度都差 不多，但是通過(guò)觀察它們的數(shù)值發(fā)現(xiàn)飽和度都有 相差，然而明度相近， 因此它們給人造成的視覺(jué) 感受幾乎是相同的。 該頁(yè) 面冷暖顏色較為豐富， 橙和藍(lán)是對(duì)比最強(qiáng)烈的補(bǔ)色， 其次是傾向不夠明 顯的補(bǔ)色黃、 紫。明度不同的兩個(gè)綠色起到了冷 暖視覺(jué)的過(guò)渡作用。 主色調(diào)

8、的淺藍(lán)色亮度較 高， 讓頁(yè)面不易給人沉悶的感覺(jué)。 結(jié)論： 冷暖對(duì)比的應(yīng)用， 通常在休閑娛樂(lè)網(wǎng)站、 食 品網(wǎng)站出現(xiàn)比較多。 將這兩個(gè)色系的色彩安排在同一畫面時(shí)， 其 對(duì)比效果極為強(qiáng)烈。 通常初學(xué)者較容易使兩色相 互排斥， 導(dǎo)致畫面色調(diào)不諧調(diào)。 一般我們采用兩 種調(diào)和的方法。 七、純度調(diào)整 降低冷暖兩色純度。用明度黑、白、灰變化 來(lái)調(diào)整畫面的層次、直接使用黑、白、灰色系進(jìn) 入畫面搭配， 或者加入補(bǔ)色的諧調(diào)， 也都能很好 的起到協(xié)調(diào)的效果。 純度調(diào)整網(wǎng)頁(yè)例圖： 純度調(diào)整分析： 主色調(diào)的橙色，添入了少許黑色做漸變背景 色，降低了純度。輔助色的藍(lán)色是橙色的補(bǔ)色， 主要起的是使得整個(gè)頁(yè)面過(guò)多的暖色降低協(xié)調(diào)

9、 于整體的效果，及背景色 的棕色都分別提暗降 低純度。而左上角的黃色則通過(guò)提高了亮度來(lái)降 低純度。一個(gè)頁(yè)面里應(yīng)有少量純度較高的顏色而 不至于使整個(gè)頁(yè)面過(guò)于壓抑， 純度亮度很高的點(diǎn) 睛色紅色就起到了這個(gè)作用。 結(jié)論： 純度的調(diào)整主要是通過(guò)明度黑、 白、灰變化 來(lái)調(diào)整畫面的層次適當(dāng)?shù)募尤胙a(bǔ)色也是其中的 一個(gè)辦法。 八、面積調(diào)整 主次的面積區(qū)分。 根據(jù)設(shè)計(jì)主題的需要， 在 畫面的面積上以一方為主色， 于是就掌控畫面的 色調(diào)作用，其他的顏色在使用面積上拉開(kāi)距離， 使畫面的主次關(guān)系更突出， 在統(tǒng)一的同時(shí)富有變 化。 面積調(diào)整網(wǎng)頁(yè)例圖： 面積調(diào)整分析： 作為大面積使用的主色調(diào) - 飽和度和亮度 為最高值的

10、橙色， 通過(guò)適當(dāng)面積的白色加入?yún)f(xié)調(diào) 和平衡了視覺(jué)的作用外， 主體物的深紅紋樣的圖 片點(diǎn)綴著純度、 亮度較高的紅色有醒目作用， 縮 小面積而卻又能突出于視覺(jué)中心點(diǎn)， 疏密構(gòu)圖的 對(duì)比效果。 結(jié)論： 大面積的顏色和小面積使用的顏色可以拉 開(kāi)主次關(guān)系，位置的正確安排也是一個(gè)方面。 九、面積對(duì)比 同一種色彩，面積越大，明度、純度越強(qiáng)， 面積越小，明度、純度越低。面積大的時(shí)候，亮 的色顯得更輕， 暗的色顯得更重。 這種現(xiàn)象稱為 色彩的面積效果。 面積對(duì)比是指頁(yè)面中各種色彩 在面積上多與少、 大與小的差別， 影響到頁(yè)面主 次關(guān)系。 面積的對(duì)比 , 可以是中高低明度差的面積變 化及中高低純度差的面積變化。 面積對(duì)比網(wǎng)頁(yè)例圖： 面積對(duì)比分析： 作為大