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

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

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



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



色立體構(gòu)架示意

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



孟賽爾色相環(huán)

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

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

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

色彩調(diào)和受有時間、區(qū)域和欣賞習(xí)慣有關(guān)。目前比較通用的色彩調(diào)和方式有2種：1、共性調(diào)和，2、面積調(diào)和，我們分開來討論這兩個方式在頁面中的應(yīng)用。

共性調(diào)和有三種不同的形式：

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

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

高長調(diào)：（8）、（9）、（1）明快；

高短調(diào)：（8）、（9）、（5）輕柔；

中長調(diào)：（5）、（9）、（1）強壯；

中短調(diào)：（5）、（7）、（3）沉悶；

低長調(diào)：（2）、（9）、（1）威嚴；

低短調(diào)：（2）、（5）、（1）憂郁；

中高短調(diào)：（5）、（9）、（7）希望；

中低短調(diào)：（5）、（3）、（1）低沉；

多種顏色連續(xù)對比的調(diào)式：不強調(diào)面積比，容易造成節(jié)奏。

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

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

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

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

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


　　明度的對比配色在頁面中我們可以經(jīng)?？吹?，我們來看看下面的頁面，如下圖中這個頁面給人什么感覺呢，明快，和諧。



主基調(diào)：■ #9CCE00 H：75 S：100 B：81 （8）

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

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

　　明度對比調(diào)和的掌握，在最初我們可以做一些類似的明度對比的練習(xí)。在藝術(shù)教育課程里一般都采用水粉來繪制，其實同樣也可以用電腦來練習(xí)，培養(yǎng)色彩感覺。當(dāng)有一定基礎(chǔ)后結(jié)合其他構(gòu)成來練習(xí)。



色相對比調(diào)和與色彩調(diào)和感覺；色相對比以孟賽爾色相環(huán)為主。

兩個色相對比調(diào)和的取色方法和相應(yīng)的色彩感覺：

h : h 和諧，統(tǒng)一。

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

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

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

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

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

多個色相對比調(diào)和的取色方法和相應(yīng)的色彩感覺：

色相環(huán)120度以內(nèi)：等差取色，如：n : (n+12) : (n+24) : (n+36)；等比，如：n : (n+13) : (n+25) : (n+37)?，F(xiàn)代感強等。

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

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



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



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



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



多個色相對比調(diào)和
主基調(diào)：■ # 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

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

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

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

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

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

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



色相對比調(diào)和的練習(xí)

純度對比調(diào)和。

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

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

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



灰色與高純度黃色調(diào)和


黑色與中純度綠色調(diào)和


高明度的灰色調(diào)和

就目前關(guān)于共性調(diào)和所被接受的應(yīng)用大概就這些了。還有待大家共同研究開發(fā)。

　　面積調(diào)和的原則是：色彩面積的大小可以改變對比效果，對比色雙方面積越大，調(diào)和效果越弱；反之，雙方面積越小，調(diào)和效果越強。對比雙方面積均等，調(diào)和效果越弱；對比雙方面積相差越大；調(diào)和效果越強。只有恰當(dāng)?shù)拿娣e比才能取得最好的視覺平衡，形成最好的視覺效果。

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

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

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

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

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

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

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

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

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

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

　　在色立體中以明度軸上值為5的灰色為中心，兩個色或多個色的關(guān)系可以這樣表示??色彩的面積與該色彩到色立體的中心距離相等或程簡單的倍數(shù)時可以得到平衡的調(diào)和?？梢缘玫较旅娴墓?

S 1 R 1= S 2R 2

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

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

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