網頁設計的色彩理論及應用

我們在設計的運用上重點在于創造一個沒有過的形態，把形體潤飾得協調美觀，它受社會的制約，重視地方特征。為了在設計中有效的使用色彩我們必須掌握一些色彩的基礎理論知識，結合自己的實際經驗，來營造我們的作品。同一色彩有數之不盡的應用方法，并沒有非常機械的色彩調和的法則，在一定的原則下靠我們自己的眼睛和審美觀點來做出選擇。

　　色彩構成（Interaction of color），可以理解為色彩的作用，是在色彩科學體系的基礎上，研究符合人們知覺和心理原則的配色。配色有三類要素：光學要素（明度、色相、純度），存在條件（面積、形狀、肌理、位置），心理因素（冷暖、進退、輕重、軟硬、樸素華麗），設計的時候運用邏輯思維選擇合適的色彩搭配，產生恰當的色彩構成。最優秀的配色范本是自然界里的配色，我們觀察自然界里的配色，通過理性的提煉最終獲得我們所需要的東西。

　　色彩構成并非是只能意會不能言傳的東西，它是有自己一套相關理論的，詳細的目前國內相關書籍有《色彩設計大全》（日本色彩設計中心編），值得一看。說到色彩，不能不提到色立體，標準的色彩設計的定義顏色可以這樣表示（括號內是window的顏色名稱）：h色相(色調) S:純度(飽和度) B:明度(亮度)，把這三個要素作成立體坐標，就構成色立體。



　　目前比較通用的色立體有三種：孟賽爾立體、奧斯特瓦德色立體、日本研究所的色立體，它們中應用的最廣泛的是蒙塞爾色立體，我們所用的圖象編輯軟件顏色處理部分大多源自孟賽爾色立體的標準。下面我們簡單的介紹孟塞爾色立體的表色系，它根我們的設計工作最為相關。



色立體構架示意

色相：在從紅到紫的光譜中，等間的選擇5個色，即紅（R）、黃（Y）、藍（B）、紫（P）。相鄰的兩個色相互混合又得到：橙（YR）、黃綠(GY)、藍綠(BG)、藍紫(PB)、紫紅（RP），從而構成一個首位相交的環，被稱為孟賽爾色相環.



孟賽爾色相環

明度：從黑到白中間增加9個均勻過渡的灰度階段，被稱為明度尺。

純度：在同等明度的條件下，從灰色到純色的變化。

色彩調和與色彩感覺
　　色彩調和是一個很復雜的問題，它還包括視覺的心理平衡，人們視覺習慣，社會因素等。各個領域根據自己行業經驗都有自己的色彩調和理論，不同行業之間的色彩調和理論是不同的。我們可以這樣來定義色彩調和：使對比的色彩成為不帶尖銳刺激的協調統一的組合，它的總體效果總是要與視覺心理相適應，能滿足視覺的心理平衡，它不單單只是色與色之間的組合問題，還與面積，形狀，等色彩賦予對象有關。

色彩調和受有時間、區域和欣賞習慣有關。目前比較通用的色彩調和方式有2種：1、共性調和，2、面積調和，我們分開來討論這兩個方式在頁面中的應用。

共性調和有三種不同的形式：

1、明度對比調和與色彩調和感覺；去除明度尺的上下兩端白（10）和黑（0），其余9個階段分成三個基調（1）、（2）、（3）低明度基調；（4）、（5）、（6）中明度基調；（7）、（8）、（9）高明度基調。

2-3種顏色，明度配色應用：第一個字指明度的主調，顏色必須占構圖的1/2以上（這一點在Web界面設計中有點特殊，主調的面積是一種視覺感覺上的面積，而不是實際的頁面面積。），屬于支配地位。

高長調：（8）、（9）、（1）明快；

高短調：（8）、（9）、（5）輕柔；

中長調：（5）、（9）、（1）強壯；

中短調：（5）、（7）、（3）沉悶；

低長調：（2）、（9）、（1）威嚴；

低短調：（2）、（5）、（1）憂郁；

中高短調：（5）、（9）、（7）希望；

中低短調：（5）、（3）、（1）低沉；

多種顏色連續對比的調式：不強調面積比，容易造成節奏。

高1/2明度列（5）以上，晨曦、朦朧；

低1/2明度列（5）以下，苦悶；

高3/4明度列（3）－（10）激昂、奮進；

低3/4明度列（0）－（7）雄渾、有力；

全明度列（0）－（10）豐富、跳躍


　　明度的對比配色在頁面中我們可以經常看到，我們來看看下面的頁面，如下圖中這個頁面給人什么感覺呢，明快，和諧。



主基調：■ #9CCE00 H：75 S：100 B：81 （8）

　　明度列：本出應用了多種明度色彩，（*表現出這樣的感覺實際上還有其他方面的原因，我們這里只討論明度的原因）仔細觀察我們可以發現明度都在81－98之間，把一些小的差距忽略不計我們可以把它視為 （8）、（9）、（1）。那么在上表中我們可以找到：高長調：（8）、（9）、（1）明快，從上面列舉的例子可以很明顯的看出明度對比在頁面設計中的應用。留心觀察，我們可以發現很多類似的例子，只是很多明度對比中還參雜著其他的因素不易察覺而已。

　　在設計網頁界面時，明度對比調和在很多情況下是不單獨存在的，它往往需要結合其他的調和方式，作為一種輔助的調和方式存在，單獨的明度對比調和的頁面它有一個很顯著的缺點，就是畫面沉悶。如果以明度對比調和作為主要調和方式的頁面需要在其他的輔助色的用色上多多考慮，如果輔助色能打破沉悶的感覺那么效果還是比較理想的。

　　明度對比調和的掌握，在最初我們可以做一些類似的明度對比的練習。在藝術教育課程里一般都采用水粉來繪制，其實同樣也可以用電腦來練習，培養色彩感覺。當有一定基礎后結合其他構成來練習。



色相對比調和與色彩調和感覺；色相對比以孟賽爾色相環為主。

兩個色相對比調和的取色方法和相應的色彩感覺：

h : h 和諧，統一。

h : (h±1°;～30°;)類似，活潑。

h : (h±30°;~60°;)準對比，生動。

h : (h±120°;~150°;)對比，強烈。

h : (h±180°;)補色，刺激

　　在實際應用的時候注意明度變化和兩個色彩的主次位置。還有的說法是把孟賽爾色相環已有的十個色相的基礎上平分為100份，那么在色環上就是100等分，用色環的間隔數來表示，本人認為用角度的算法比較準確。

多個色相對比調和的取色方法和相應的色彩感覺：

色相環120度以內：等差取色，如：n : (n+12) : (n+24) : (n+36)；等比，如：n : (n+13) : (n+25) : (n+37)。現代感強等。

色相環180度以內：等差取色，如：n : (n+20) : (n+40) : (n+60)；等比，如：n : (n+20) : (n+50)。強烈。

色相環380度以內：等差取色，如：n : (n+30) : (n+60)；等比，如：n : (n+10) : (n+27.5) : (n+57.5)。刺激。



兩個同一色對比調和
主基調：■ # FF7318 H：24 S：91 B：100
■ # FF6300 H：24 S：100 B：100



兩個類似色對比調和
主基調：■ # FFCE00 H：48 S：100 B：100
■ #FFA000 H：38 S：100 B：100



兩個補色對比調和
主基調：■ # FFCE00 H：48 S：100 B：100
■ # 4273A5 H：210 S：60 B：60



多個色相對比調和
主基調：■ # 945A18 H：32 S：84 B：58
■ # 5A2F00 H：31 S：100 B：35
■ # 633100 H：30 S：100 B：39
■ # 401F00 H：29 S：100 B：25

　　色相對比調和只是幫助你最快的找到相匹配的顏色區域，最后效果還是要靠自己的顏色直覺。

　　在Web界面設計的時候，一般來說都是用純度比較高的顏色，不成文的規定純度為80～100，所以實際應用中我們只需要調節明度的變化。自然能創造出比較好的色彩效果。

　　使用兩個同一色跟使用明度對比調和的注意事項是一樣的，兩個同一色構成的畫面沒有力度，但是比較容易烘托表現主題，一般都是以背景的形式存在。

　　兩個類似色對比調和要注意與無彩色相結合，即黑和白，這樣的頁面會比較干凈、大眾化，門戶網站用色方式的較好選擇。

　　兩個補色對比調非常的容易樹立風格，能給人留下強烈的映像，信息發布類商業站點的首選，既不失個性又比較容易讓人接受，大多作為主色調，結合明度對比調和類似色對比調和存在。

　　多個色相對比調和多用于Flash動畫和頁面的制作，在純度高的情況下，它比較容易塑造出個性鮮明的形象。



色相對比調和的練習

純度對比調和。

　　純度對比調和的理論也有很多，但是大部分只能應用在繪畫，工業造型等等行業，在Web界面設計中正真實用的只有1條：

　　黑、白、灰屬于無彩系，它們能與任何彩色搭配。純色與無彩系搭配的時候會使純色的鮮艷感增強，灰色與純色搭配會使灰色帶有顏色，當灰色覆蓋面積較大時純色將比較容易形成調和。高明度的灰色（白）有輕快高雅的感覺，低明度的灰色（黑）可以產生穩重。

　　Web界面設計中如果采用降低顏色的純度來產生調和是需要點勇氣的，按照現在的審美觀點，普遍地不能被接受，或許有待進一步的探索和研究。



灰色與高純度黃色調和


黑色與中純度綠色調和


高明度的灰色調和

就目前關于共性調和所被接受的應用大概就這些了。還有待大家共同研究開發。

　　面積調和的原則是：色彩面積的大小可以改變對比效果，對比色雙方面積越大，調和效果越弱；反之，雙方面積越小，調和效果越強。對比雙方面積均等，調和效果越弱；對比雙方面積相差越大；調和效果越強。只有恰當的面積比才能取得最好的視覺平衡，形成最好的視覺效果。

　　在前人的探索中，總結出了相當多的面積比的公式，對電腦設計來說有非常積極的作用。利用這些公式，我們可以大概的把握出顏色和面積的比例，作為一個重要的參考。

　　最早的計算公式是由詩人歌德以基本色相的光亮度為基準，建立了一個簡單的比率：

黃 ：橙色 ：紅 ：紫 ：綠 ＝3 ：4 ：6 ：9 ：8 ：6

　　但是這個公式并沒有考慮明度和純度的變化所帶來的影響，再今天并不是很實用，孟賽爾在這個基礎上改良了這個公式：

A色相的明度×純度　　　　　　　B面積

-------------------------- ＝ --------------------

B色相的明度×純度　　　　　　　A面積

　　這個公式可以幫我們解決因為明度和純度的變化而產生的面積變化比，可以這樣概括“小面積用強色，大面積用弱色”。

　　根據本人的經驗上面的公式在Web界面設計中實用性并不是很強，應為Web界面設計時使用的顏色純度都很高，基本上面積比就等于明度比，按照這個比例相當多的情況是產生負作用。應該視情況來具體應用。

　　孟賽爾還有一套面積和色彩比率的算法，相比之下更科學、實用性更強，可以作為重要的參考依據：

　　在色立體中以明度軸上值為5的灰色為中心，兩個色或多個色的關系可以這樣表示??色彩的面積與該色彩到色立體的中心距離相等或程簡單的倍數時可以得到平衡的調和。可以得到下面的公式

S 1 R 1= S 2R 2

其中S表示面積，R表示該色到中心點的距離，R的值可以在相關的表中查到。

　　就目前的情況還沒有哪一個面積計算公式能確切的結合到Web界面設計實際應用，更何況Web界面設計還要從商業來考慮，主要還是靠經驗，上面的公式只能一個參考性質的，給大家研究提供一個基礎。

　　以上的理論都是前人研究成果，其中有很多可以利用，最重要的是要結合實際的經驗，創造一套自己的色彩理論，提高自身對色彩的把握能力，應用到設計作品中去。