我們生活在一個色彩繽紛的世界──我們穿的衣服有色彩、住的房子有色彩,看的畫報有色彩,我吃的東西色香味全,我們做的網頁當然也要有色彩。色彩和我們息息相關,我們沒理由不去認識一下色彩。把傳統的色彩理論和實用的電腦知識結合起來,有效地來使用色彩。
網頁的色彩是樹立網站形象的關鍵之一,但色彩搭配卻是感到頭疼的問題。網頁的背景,文字,圖標,邊框,超鏈接、、、,應該採用什麼樣的色彩,應該搭配什麼色彩才能最好的表達出預想的內涵呢?首先我們先來了解一些色彩的基本知識:
一般而言,色彩基本的三種屬性,也就是色彩三要素,即為:
- 色相(Hue)
- 彩度(Saturation)
- 亮度(Brightness)
在色彩學上,由於各家學者命名不同,彩度有時又被稱為飽和度;明度有時又被稱為明度、照度、Lightness或是Luminosity,事實上都是代表同樣的意義。
色相(Hue)
是區別各種色彩種類名稱。
光譜上,紅、橙、黃、綠、青、紫等六色,通常是用來當做基本色相。
事實上,色相是無數種的,為了方便研究,常把色相做成環狀,稱為「色相環」。
三原色
亮度(Brightness)
是指色彩之明暗程度。
由於光線照射的強弱,色彩就開始有了由白亮色至黑暗色不同程度的明暗度變化,因而再度產生各種色彩。
彩度(Saturation)
即為色彩純度或濃淡的程度。
任何一個「純色」都是彩度最高的色彩,也就是該色彩的飽和度最高。
若我們將一個純色加入白色,明度雖是提高了,可是色彩被白色混合後,卻也被稀釋了,彩度因而降低。同樣的道理,我們若將一個純色加入黑色,不但明度降低,彩度也同時降低。
色彩的意義
除了感官反應與辨識調和色彩外,人類內在對色彩的反應還有更深層的一面。
色彩能引發強烈的生理、心理共鳴,不管是正面或負面。當你在選定顏色組合時,請確定你所選擇的顏色能引起適當的迴響。
紅色 | 最強有力的色彩, 能引起肌肉的興奮、熱烈、衝動。 |
| |
橙色 | 溫和,是一種很活潑、輝煌的色彩、富足的、快樂的色彩、稍加黑則較穩重、藍橙對比時較生動。 |
| |
黃色 | 亮度最高, 尤其燦爛、輝煌、象徵著智慧之光,象徵著權力、驕傲、經不起白色的沖淡、當用黑、紫、深藍反襯時, 能加強、淡粉色能使之變柔和。 |
| |
綠色 | 具中性特點、和平色, 偏向自然美、寧靜、生機勃勃,寬容色彩、可襯托多種顏色而達到和諧。 |
| |
藍色 | 永恆、博大、遙遠感。 |
| |
紫色 | 大面積有恐怖感, 紫紅尤其明顯、暗紫有災難感、淡紫則是一種優美的活潑色、紫與黃共存時, 消極性更加顯著。 |
| |
黑色 | 空、無、永恆的沉默。 |
白色 | 虛無, 有無盡的可能性。 |
灰色 | 是色彩中最被動的顏色、受有彩色影響極大, 靠鄰近的色彩獲得自己的生命、近冷則暖, 近暖則冷、最有平靜感(中性), 是視覺中最安靜的色彩、有很強的調和對比的作用。 |
| |
黑與白 | 非常對立而又有共性, 是色彩最後的抽象、能夠用來表達富有哲理性的東西。 |
暖色
暖色由紅色調組成。比如紅色、橙色和黃色。它們給選擇的顏色賦予溫暖、舒適和活力,它們也產生了一種色彩向前移動,並從頁面中突出出來的效果。
冷色
冷色來自于藍色色調。譬如藍色、青色和綠色。這些顏色將對色彩主題起到冷靜的作用,它們看起來有一種後退回來的效果,於是它們用作頁面的背景比較好。
色彩的生理反應
雖然並沒有直接證據顯示色彩能引發特定反應,但是研究顯示,某些顏色確實能夠引起一些生理上的反應。例如,紅色就是一種非常刺激的顏色,往往會令人心跳加快、呼吸急促。所以,紅色非常適合用在需要引起注意和強調的時候,但若用在背景顏色的時候可能顯得過於強烈。相同地,黃色也能引起注意,但因為其反射性太強,容易造成眼睛的疲勞和不舒服。另外一方面,藍色對神經系統具有放鬆的效果,且根據一些研究顯示,以藍色當背景還能增加生產力。但是,如果你的產品與食物有關,千萬不要用藍色作為背景顏色,因為藍色可是會抑製人們的胃口喔。
色彩的象徵
色彩所象徵的意義有時候跟大自然中的事物有關。
例如,天空與太陽的顏色所產生的聯想舉世皆然。然而,大部分的色彩意義都跟民族文化有關,例如,政治、宗教、神話或社會結構等 -- 這些因素可能會隨著時間與地域的不同而產生差異。若你設計的網站是針對國外地區,那你可千萬得小心,同一顏色在不同文化可能會有南轅北轍的效果。另外,大部分的顏色都同時具有正面和負面的聯想。你可以運用色彩的質量和飽和度的不同,或者是用混合兩個顏色的方式來強調某個特別的涵義。
對比色彩應用
網頁設計中對比是非常重要,并且有著不同的應用方式。每個人都清楚的是,白底黑字看起來非常容易,這就是你所閱讀的大部分印刷材料中為什么都是白底黑字的一部分原因。同樣地,黑底白字產生強烈對比,但是它閱讀起來比較困難。因為黑色相對白色和其它的顏色來講,看起來有一種沉重感和些許的壓抑感。
高對比色的搭配
類似的對比效果也同樣發生在暖色和冷色之間。暖色有些微沖出螢幕的感覺,而冷色被認為有從螢幕後退的感覺。這就意味著暖色/暗色適合于文本,而冷色/亮色更適合于用作背景。
補色的搭配
你將注意到得到的結果是十分糟糕的。這兩種顏色之間不能形成恰當的對比,它們看起來讓您的眼睛非常的吃力,明確地講,它們不是一個好的結合。但是保持這基本相同的顏色不變,調整一下它們的亮度/暗度,使它們之間更一致一些(見下圖)。
調整色的搭配
你可以看出這是一種較好的色彩搭配。這不但是從分析角度的判斷思考,更是從視覺觀點進行闡釋。
色名對比
將相同的橙色,放在紅色或黃色上,我們將會發現,在紅色上的橙色會有偏黃的感覺,因為橙色是由紅色和黃色調成的,當他和紅色并列時,相同的成份被調和而相異部份被增強,所以看起來比單獨時偏黃,以其他色彩比較也會有這種現象,我們稱為色名對比。
色滲的現象
除了色感偏移之外, 對比的兩色, 有時會發生互相色滲的現象, 而影響相隔界線的視覺效果, 當對比的兩色, 具有相同的彩度和明度時, 對比的效果越明顯, 兩色越接近補色, 對比效果越強烈。
明度對比
將相同的色彩,放在黑色和白色上,比較色彩的感覺,會發現黑色上的色彩感覺比較亮,放在白色上的色彩感覺比較暗,明暗的對比效果非常強烈明顯,對配色結果產生的影響,明度差異很大的對比, 會讓人有不安的感覺。
彩度對比
色彩和另一彩度較高的色彩并列時,會覺得本身彩度變低,而和另一個彩度較低的色彩時,會覺得彩度變高,這種現象稱為彩度對比。
補色對比
兩個互為補色的色彩在一起,會產生明顯的效果,使色彩彼此色感更強,我們稱之為補色對比。
面積對比
將兩個色彩強弱不同的色彩放在一起,若要得到對比均衡的效果,必須以不同的面積大小來調整,弱色占大面積,強色占小面積,而色彩的強弱是以其明度和彩度來判斷,這種現象稱為面積對比。
網頁色彩搭配的原理
鮮明性 | 網頁的色彩要鮮艷,容易引人注目。 |
獨特性 | 要有與眾不同的色彩,使得大家對你的印象強烈。 |
合適性 | 色彩和你表達的內容氣氛相適合。如用粉色體現女性站點的柔性。 |
聯想性 | 不同色彩會產生不同的聯想,藍色想到天空,黑色想到黑夜,紅色想到喜事等,選擇色彩要和你網頁的內涵相關聯。 |
配色的基本類型
在考慮如何配色時,必須先確定自己到底要什麼的配色效果。
決定主體色
↓
選擇搭配色
↓
選擇背景色
↓
明彩度調整,完成配色