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

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

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



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



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

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



孟賽爾色相環(huán)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

高3/4明度列（3）－（10）激昂、奮進(jìn)；

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

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


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



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

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

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

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



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

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

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

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

h : (h±30°;~60°;)準(zhǔn)對比，生動(dòng)。

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

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

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

多個(gè)色相對比調(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)代感強(qiáng)等。

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

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



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



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



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



多個(gè)色相對比調(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è)計(jì)的時(shí)候，一般來說都是用純度比較高的顏色，不成文的規(guī)定純度為80～100，所以實(shí)際應(yīng)用中我們只需要調(diào)節(jié)明度的變化。自然能創(chuàng)造出比較好的色彩效果。

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

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

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

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



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

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

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

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

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



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


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


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

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

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

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

　　最早的計(jì)算公式是由詩人歌德以基本色相的光亮度為基準(zhǔn)，建立了一個(gè)簡單的比率：

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

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

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

————————– ＝ ——————–

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

　　這個(gè)公式可以幫我們解決因?yàn)槊鞫群图兌鹊淖兓a(chǎn)生的面積變化比，可以這樣概括“小面積用強(qiáng)色，大面積用弱色”。

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

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

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

S 1 R 1= S 2R 2

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

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

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