* Facebook最初始的設(shè)計界面，那時候它還叫做thefacebook.com。當(dāng)時，想要在上面開個賬戶必須有一個以.edu（哈佛大學(xué)）結(jié)尾的郵箱才行。
無心插柳也好，有意栽培也好，色彩往往能夠體現(xiàn)互聯(lián)網(wǎng)品牌的創(chuàng)始人的審美和喜好，而設(shè)計師對于色彩的挑選和取舍，也是完成作品中的必備環(huán)節(jié)。
Youtube設(shè)計師Marc Hemeon就曾收集了18組流行網(wǎng)站或產(chǎn)品的按鈕設(shè)計色彩，用來評估和調(diào)研色彩對于用戶心理的影響：
對應(yīng)網(wǎng)站或產(chǎn)品的謎底如下：
1、Google
2、Twitter
3、Facebook
4、Microsoft
5、Pinterest
6、Yahoo
7、Instagram
8、Flickr
9、Spotify
10、Rdio
11、Svbtle
12、Medium
13、Basecamp
14、Square
15、Amazon
16、Quora
17、LinkedIn
18、Path
大部分網(wǎng)站或產(chǎn)品的按鈕色彩都不會超過3種，指向“動作”的按鈕應(yīng)當(dāng)統(tǒng)一為同一種顏色，比如Google的“搜索”按鈕是藍(lán)色，而Twitter的“注冊”按鈕則是明亮的黃色。
社交分享工具Buffer的聯(lián)合創(chuàng)始人Leo Widrich在博客上補(bǔ)充了關(guān)于色彩的一些觀點(diǎn)，摘錄部分內(nèi)容如下。
色彩能夠幫助品牌極為簡易的建立用戶認(rèn)知：
灰色：象征冷靜、中立；（蘋果、維基百科、紐約時報……）
綠色：象征健康、生命；（BP石油、食品超市whole foods、星巴克……）
藍(lán)色：象征可靠、力量；（戴爾、大眾汽車、IBM……）
紫色：象征智慧、想象；（雅虎、T-Mobile、科幻主題電視臺Syfy……）
紅色：象征血?dú)狻⒛贻p；（可口可樂、樂高、肯德基……）
橙色：象征歡樂、信任；（芬達(dá)、亞馬遜、火狐……）
黃色：象征溫暖、透明；（百思買、法拉利、麥當(dāng)勞……）
站在消費(fèi)者角度，色彩也能夠在理解和決策階段起到一定的影響作用：
黃色：吸引注意力的購物窗口；
紅色：刺激心血的緊迫感，常出現(xiàn)在清倉場景；
藍(lán)色：多用于銀行和商業(yè)機(jī)構(gòu)里，強(qiáng)調(diào)安全；
綠色：讓人聯(lián)想到富裕和輕松，緩解壓力；（支付寶的信用卡還款按鈕選擇了綠色作為主色調(diào)，能夠理解原因了吧）
橙色：呼叫意味濃厚，用于創(chuàng)建下訂、購買、出售的行動；
粉色：服務(wù)于女性和年輕女孩的浪漫色調(diào)；
黑色：奢侈品的最佳匹配；
紫色：給人舒緩&平靜的感受，常被美容及抗衰老產(chǎn)品使用；
男性和女性對于色彩的喜好度有所偏差：
企業(yè)分析服務(wù)公司KISSmetrics的調(diào)查報告顯示（這份報告主要用于建議App產(chǎn)品的創(chuàng)業(yè)者在產(chǎn)品設(shè)計上的策略）——
女性喜愛的色彩：藍(lán)色、紫色和綠色；
女性討厭的色彩：橙色、棕色和灰色；
男性喜愛的色彩：藍(lán)色、綠色和黑色；
男性喜愛的色彩：褐色、橙色和紫色；
色彩能夠決定轉(zhuǎn)化率的差距：
美國數(shù)字營銷公司Hubspot曾經(jīng)做過一場A/B Testing，用于測試不同顏色對于用戶點(diǎn)擊轉(zhuǎn)化造成的差異——
左右兩個測試顏面在內(nèi)容上完全一直，唯一不同的是按鈕的顏色，在超過2000人次的樣本測試中，最終紅色方案的點(diǎn)擊率超過綠色方案的點(diǎn)擊率足足21%。
而在測試之前，大部分的研究員都猜測綠色方案會獲得更高的點(diǎn)擊，因?yàn)榫椭庇X而言，綠色代表著通行、準(zhǔn)許通過的意思，而紅色則更傾向于警告、阻止意味。
最后，為什么Html語言里超鏈接的默認(rèn)顏色是藍(lán)色的？
因?yàn)樗{(lán)色是從灰色底色中脫穎而出的最佳色調(diào)。
這個決定是由Tim Berners-Lee——萬維網(wǎng)的發(fā)明者做出的。在他那個年代，互聯(lián)網(wǎng)的第一代瀏覽器Mosaic顯示的網(wǎng)頁底色通常都是灰底黑字，為了讓超文本鏈接能夠更方便識別，Tim Berners-Lee將超鏈接定義為藍(lán)色并帶有下劃線的文字。
一個好的網(wǎng)頁設(shè)計會給用戶帶來記憶深刻，好用易用的體驗(yàn)。從網(wǎng)頁設(shè)計的版式、信息層級、圖片、色彩等視覺方面的運(yùn)用，直接影響到用戶對網(wǎng)站的最初感覺，而在這些內(nèi)容中，色彩的配色方案是至關(guān)重要的，網(wǎng)站整體的定位、風(fēng)格調(diào)性都需要通過顏色，給用戶帶來感官上的刺激，從而產(chǎn)生共鳴。
從色彩研究的方向來看，色彩分為色調(diào)、飽和度、明度三方面，顏色的運(yùn)用是純色之間的關(guān)系，以及它們混合在一起的效果。我們可以從當(dāng)前眾多的網(wǎng)絡(luò)應(yīng)用中的實(shí)例，找到色彩運(yùn)用的一些廣泛的色彩關(guān)系和配色方案，通過這些色彩的關(guān)系，可以作為實(shí)際工作學(xué)習(xí)中配色的指南。
單色：使用一種色調(diào)不同的飽和度與亮度
近似色：使用色盤中的鄰近色調(diào)
互補(bǔ)色：使用色盤中的相反色調(diào)
分割互補(bǔ)色：使用一個色調(diào)和兩個與它的補(bǔ)色鄰近色調(diào)
三分色階：使用色盤中的等距三個色調(diào)
雙互補(bǔ)色：使用兩個色調(diào)和它們的補(bǔ)色
近似互補(bǔ)色：使用兩個互補(bǔ)色調(diào)和一個顏色相近色調(diào)
中間色：使用沒有色度的顏色
突出色：在沒有色調(diào)的顏色中突出一個高飽和度的色調(diào)
暖色：使用色盤中暖色調(diào)的顏色
冷色：使用色盤中冷色調(diào)的顏色
]]>
形式需要思考創(chuàng)造，圖片素材需要學(xué)習(xí)處理，文字需要梳理編排，但網(wǎng)頁色彩是不是一定需要有天生的色感、豐富的理論和多年經(jīng)驗(yàn)沉淀才能運(yùn)用自如？
當(dāng)然不！
關(guān)于網(wǎng)頁配色
網(wǎng)頁配色的文章在網(wǎng)絡(luò)上很多，甚至有些泛濫，稍微關(guān)注過的同學(xué)應(yīng)該都知道“色輪”、“色卡”等輔助性配色工具，但那更多都是從印刷介質(zhì)上的色彩系統(tǒng)延伸出來的，不完全適用于網(wǎng)頁，甚至造成很大的局限，比如你會較真的通過色輪來選用網(wǎng)頁色彩嗎？再比如通過下面提供的配色組合，你能自由的應(yīng)對一個又一個的類型相若的網(wǎng)頁設(shè)計需求嗎？
由于CMYK與RGB色彩模式不同，網(wǎng)頁的色彩呈現(xiàn)數(shù)量要龐大的多，選用也應(yīng)該更自由，但在配色上卻常碰到設(shè)計作品偏臟、發(fā)灰、花哨等大問題，這事兒得解決。
網(wǎng)頁案例剖析
“網(wǎng)頁配色不宜超過三種。”
真理，這沒錯，但更多是從色相（赤橙黃綠青藍(lán)紫等不同顏色）上來說的。
色相差異明顯，主要色彩的選取就比較好辦，常見的有對比色、臨近色、冷暖色調(diào)互補(bǔ)等方式，可以簡單設(shè)定，或直接從成功作品中借鑒主輔色配比都可以，比如常見的朱紅點(diǎn)綴深藍(lán)、明黃點(diǎn)綴深綠等。
但通常，我們需要面對的設(shè)計需求在色彩分配上會有更多的問題出現(xiàn)：
（由于本人從事游戲網(wǎng)頁視覺設(shè)計工作，故案例均以游戲網(wǎng)頁做示意說明，其他網(wǎng)頁類型可以做延伸思考或僅作參閱）
如上所示，根據(jù)網(wǎng)頁信息的多寡，會有更多色彩區(qū)域的層級劃分和文字信息層級區(qū)分需求，那么在守住“網(wǎng)頁色彩（相）不超過三種”的原則下，只能尋找更多同色系的色彩來完善設(shè)計，也就是在“飽和度”和“明度”上做文章。
這也就是本文為解決這一問題所要分享的“天然”配色技巧：疊柔配色法。
疊柔配色技巧分享（這里才是正文，上面都是廢話）
這個方法非常簡單，無需知道三角函數(shù)、四則運(yùn)算，無需理解色彩指數(shù)和直方圖，甚至不用了解色階曲線和亮度強(qiáng)弱……甚至，你可以對色彩毫無知覺。
★只需要明白三個關(guān)鍵詞：疊加、柔光和透明度（填充）。
如果連這三個關(guān)鍵詞都不甚明了，那就記住他們所在的位置（下圖）：
注意：透明度與填充略有不同，填充不會影響到“混合選項(xiàng)”的效果，而透明度則是作用于整個圖層。
順便，花幾分鐘時間了解一下這個配色技巧的原理：
即：用純白色（#ffffff）和純黑色（#000000）通過“疊加”和“柔光”的混合模式（效果類似調(diào)整飽和度和明度），在任意一個色彩上得到最匹配的顏色（然后通過調(diào)整透明度選取最適合的輔色）。
（上圖示例中，調(diào)整疊/柔模式的黑白色塊的不同透明度（取10%到100%整數(shù)值為例）就可以得到差異較明顯的40種配色，通過這種技巧，理論上每一種顏色都可以輕易獲得無窮盡的“天然配色”，并且是“0失誤”！）
★ 由于疊加和柔光模式對圖像內(nèi)的最高亮部分和最陰影部分無調(diào)整，因此該配色方法對純黑色和純白色不起作用。
設(shè)計實(shí)戰(zhàn)演示：
要不要像上面圖示看起來的那樣復(fù)雜？
不用，只需要理解了上面的方法，就可以忘記圖示，在你的設(shè)計工作中自由發(fā)揮！
簡單三步：
① 一個黑或白色，或黑白漸變（可以是點(diǎn)、線、面…甚至字體）
② 混合模式選擇疊加或柔光
③ 調(diào)整透明度（1%-100%隨意，省心的做法是直接鍵入一個整數(shù)值，比如：輕質(zhì)感類頁面可以選擇20%-40%，重質(zhì)感感類可以鍵入60%或以上）
如下圖：
（無論你采用何種主色，用黑白色彩疊加或柔光，你都可以輕松自如的獲得完美匹配的整套色系。）
這并不僅僅適用于色域劃分或提取幾個輔色，如下圖：字體顏色、細(xì)節(jié)線條、按鈕漸變、邊角高光、描邊陰影……都可以用黑白色肆意揮灑！
方法延伸（細(xì)節(jié)篇）
假如將該方法運(yùn)用到一個按鈕上……
通過混合選項(xiàng)中的“陰影、外發(fā)光、描邊（不適用疊柔法）、內(nèi)陰影、內(nèi)發(fā)光”可以自由的刻畫5層像素級細(xì)節(jié)（當(dāng)然，通常在實(shí)際的使用中刻畫1到3層即可）。
且無論形狀、色彩如何變化，這些細(xì)節(jié)都如影隨形、色彩都隨變而變~可節(jié)省大量重調(diào)細(xì)節(jié)或盲目選取配色的時間！
細(xì)節(jié)、品質(zhì)和效率，一石三鳥，兼而得之！
（近期看到設(shè)計圈有討論“網(wǎng)頁雕花不可取”的課題，假如讓細(xì)節(jié)成為習(xí)慣，讓美感成為直覺，雕花也便只是普通設(shè)計行為而已。）
案例歷練：
后記：
疊柔配色法：無招勝有招~把抓不住的感覺交給精密的計算機(jī)，科學(xué)化進(jìn)行你的設(shè)計。
更短的時間，更高的品質(zhì)，你，值得擁有~……
另：方法是死的，人是活的，配合色階、曲線、色彩平衡等，還可以玩出更多花樣來……
分享來自：TGideas-騰訊游戲官方設(shè)計團(tuán)隊(duì)
]]>
在設(shè)計網(wǎng)頁之前，客戶或產(chǎn)品經(jīng)理會提出對網(wǎng)頁視覺風(fēng)格設(shè)計的期望：活躍、大氣、穩(wěn)重、信賴、都市化….. 設(shè)計師一聽到關(guān)鍵詞或許很自然地在心里蹦出幾個配色與“關(guān)鍵詞”相匹配了。網(wǎng)頁的色彩，是訪問者登錄頁面時的第一印象，好的頁面色彩能給用戶留下深刻的印象，并且能產(chǎn)生很好的視覺效果和營造網(wǎng)站整體氛圍的作用。
色彩是我們接觸事物的第一直觀認(rèn)知，在瀏覽一個新的網(wǎng)頁時，第一認(rèn)知的不是頁面的具體結(jié)構(gòu)和信息內(nèi)容，而且是頁面色彩搭配的視覺效果。色彩對于每個人、地域或國家都有不同的情感認(rèn)知和聯(lián)想意義，從某種程度看，大多數(shù)人對色彩認(rèn)知和聯(lián)想是一致的，如紅色，人們感覺得喜慶，熱鬧…再具體到事物會聯(lián)想到紅心桃、草莓等等。在這里簡單介紹色彩的情感聯(lián)想。
色彩的情感聯(lián)想
色彩的情感聯(lián)想，主要從具體聯(lián)想和抽象聯(lián)想兩個維度劃分：
色彩的情感聯(lián)想是人們對事物的不斷的積累和認(rèn)知，了解這些不但對網(wǎng)頁設(shè)計有幫助，還對市場營銷有幫助。如設(shè)計一個環(huán)保教育類網(wǎng)站，“環(huán)保教育”首先聯(lián)想到生命、自然、綠色生態(tài)，而這些聯(lián)想的事物共同色系是綠色，如果網(wǎng)站采用人們已認(rèn)知的色彩會讓人們在初次訪問網(wǎng)站時，會對網(wǎng)站的主題產(chǎn)生共鳴和信賴感。
那設(shè)計師就憑自己“經(jīng)驗(yàn)和色彩原理”就對網(wǎng)頁進(jìn)行色彩設(shè)計？我們先慢鏡頭往回看整個網(wǎng)站的設(shè)計流程?設(shè)計師在著手視覺設(shè)計的前期流程：
如果視覺設(shè)計師忽視前期的工作，網(wǎng)站最后視覺設(shè)計輸出或許會與客戶期望存在出入的風(fēng)險。所以視覺設(shè)計師需要先了解和參與網(wǎng)站的定位、目標(biāo)用戶、內(nèi)容規(guī)劃的基礎(chǔ)上才能更好把握頁面的視覺設(shè)計。
各類網(wǎng)站色彩應(yīng)用
網(wǎng)站的類型很多，按照分類，其各自的目的和側(cè)重點(diǎn)不同，對用戶的情感訴求心理也會不同。下面主要從網(wǎng)站的類型層面上來簡單探討色彩在網(wǎng)頁上的應(yīng)用：
1.門戶類：其主要需求是如何方便用戶在堆砌的信息中有效、快速進(jìn)行目標(biāo)選擇，而頁面色彩可傾向于清爽，簡潔。
騰訊網(wǎng)，雅虎，網(wǎng)易等門戶采用清爽簡潔的淺色調(diào)來降低信息快速獲取時的視覺干擾。同性質(zhì)的同類網(wǎng)站主要是沿用自己公司主色系或logo來做區(qū)分，便于用戶對品牌的識別。
2. 產(chǎn)品類：主要目的需求展示產(chǎn)品的特性，促進(jìn)瀏覽者消費(fèi)欲望，頁面色彩可根據(jù)具體產(chǎn)品定位做多樣化設(shè)計。
細(xì)化產(chǎn)品具體定位，如apple，韓國手機(jī)iriver高科技電子產(chǎn)品，其簡潔灰白色調(diào)給網(wǎng)站帶來科技感和現(xiàn)代感。
3.社區(qū)類：其需求是操作簡單易用，長時間使用的舒適度，頁面色彩也傾向清爽，簡潔。
主要以分享、交流信息為主的社區(qū)網(wǎng)，有如上面門戶網(wǎng)信息獲取性質(zhì)，所以配色上比較簡潔清爽。但各社區(qū)網(wǎng)又各自有自己的核心目標(biāo)用戶群，所以在配色方面帶有各自的特點(diǎn)。如校友核心用戶是在校學(xué)生，頁面頂端上的banner運(yùn)用活潑的綠色調(diào)來渲染青春朝氣的氛圍.
http://xiaoyou.qq.com/ http://facebook.com/
4. 公司、企業(yè)類：展示企業(yè)形象，加深提高品牌印象，可應(yīng)用logo的主色系設(shè)計，達(dá)到品牌統(tǒng)一。
5. 電子商務(wù)類：其目的在滿足方便快捷地查看商品和進(jìn)行交易，同時運(yùn)暖色調(diào)渲染氣氛，讓用戶感受到網(wǎng)站整體的活躍氛圍和愉悅感。
當(dāng)然，黑色調(diào)的電子商務(wù)網(wǎng)站同樣給讓人時尚、炫酷的潮流感
6. 個人類：滿足用戶的自我個性展示和駕馭能力的需求，頁面色彩設(shè)計更是多樣化和個性化?，F(xiàn)在有很多網(wǎng)站設(shè)置了換膚、自定義裝扮等功能來滿足用戶需求，如個人空間、博客、社區(qū)等等，就連門戶類網(wǎng)站也開始滿足用戶的色彩喜好設(shè)置護(hù)膚。所以各類網(wǎng)站的色彩應(yīng)用沒有固定的模式，以按自身定位來靈活設(shè)計網(wǎng)頁色彩。
7.其他類：工具類、活動類等.這里就不一一展開了，原理同上：目的、目標(biāo)用戶…
]]>由于生長在一個充滿著色彩的世界，色彩一直刺激我們的視覺器官，而色彩也往往是作品給人的第一印象
色彩與生活
首先在認(rèn)識色彩前，我們要先建立一種觀念，就是如果要了解色彩認(rèn)識色彩，便要用心去感受生活，留意生活中的色彩，否則容易變成一個視而不見的色盲，就如人體的其他感官一樣，色彩就活像是我們的為味覺，一樣的材料但因用了不同的調(diào)味料而有了不同的味道，成功的好吃，失敗的往往叫人難以下咽 ，而色彩對生理與心理都有重大的影響，因此色彩學(xué)算是設(shè)計的一門基本科目。
色彩意象
當(dāng)我們看到色彩時，除了會感覺其物理方面的影響，心里也會立即產(chǎn)生感覺，這種感覺我們一般難以用言語形容，我們稱之為印象，也就是色彩意象。
紅的色彩意象
由于紅色容易引起注意，所以在各種媒體中也被廣泛的利用，除了具有較佳的明視效果之外，更被用來傳達(dá)有活力，積極，熱誠，溫暖，前進(jìn)等涵義的企業(yè)形象與精神，另外紅色也常用來作為警告，危險，禁止，防火等標(biāo)示用色，人們在一些場合或物品上，看到紅色標(biāo)示時，常不必仔細(xì)看內(nèi)容，及能了解警告危險之意，在工業(yè)安全用色中，紅色即是警告，危險，禁止，防火的指定色。
大紅 | 桃紅 | 磚紅 | 玫瑰紅 |
|
橙的色彩意象
橙色明視度高，在工業(yè)安全用色中，橙色即是警戒色，如火車頭，登山服裝，背包，救生衣等，由於橙色非常明亮刺眼，有時會使人有負(fù)面低俗的意象，這種狀況尤其容易發(fā)生在服飾的運(yùn)用上，所以在運(yùn)用橙色時，要注意選擇搭配的色彩和表現(xiàn)方式，才能把橙色明亮活潑具有口感的特性發(fā)揮出來。
鮮橙 | 橘橙 | 朱橙 | 香吉士 |
|
黃的色彩意象
黃色明視度高，在工業(yè)安全用色中，橙色即是警告危險色，常用來警告危險或提醒注意，如交通號志上的黃燈，工程用的大型機(jī)器，學(xué)生用雨衣，雨鞋等，都使用黃色。
大黃 | 檸檬黃 | 柳丁黃 | 米黃 |
|
綠的色彩意象
在商業(yè)設(shè)計中，綠色所傳達(dá)的清爽，理想，希望，生長的意象，符合了服務(wù)業(yè)，衛(wèi)生保健業(yè)的訴求，在工廠中為了避免操作時眼睛疲勞，許多工作的機(jī)械也是采用綠色，一般的醫(yī)療機(jī)構(gòu)場所，也常采用綠色來作空間色彩規(guī)劃即標(biāo)示醫(yī)療用品。
大綠 | 翠綠 | 橄欖綠 | 墨綠 |
|
藍(lán)色的色彩意象
由于藍(lán)色沉穩(wěn)的特性，具有理智，準(zhǔn)確的意象，在商業(yè)設(shè)計中，強(qiáng)調(diào)科技，效率的商品或企業(yè)形象，大多選用藍(lán)色當(dāng)標(biāo)準(zhǔn)色，企業(yè)色，如電腦，汽車，影印機(jī)，攝影器材等等，另外藍(lán)色也代表憂郁，這是受了西方文化的影響，這個意象也運(yùn)用在文學(xué)作品或感性訴求的商業(yè)設(shè)計中。
大藍(lán) | 天藍(lán) | 水藍(lán) | 深藍(lán) |
|
|
紫色的色彩意象
由于具有強(qiáng)烈的女性化性格，在商業(yè)設(shè)計用色中，紫色也受到相當(dāng)?shù)南拗疲撕团杂嘘P(guān)的商品或企業(yè)形象之外，其他類的設(shè)計不常采用為主色。
大紫 | 貴族紫 | 葡萄酒紫 | 深紫 |
|
褐色的色彩意象
在商業(yè)設(shè)計上，褐色通常用來表現(xiàn)原始材料的質(zhì)感，如麻，木材，竹片，軟木等，或用來傳達(dá)某些引品原料的色澤即味感，如咖啡，茶，麥類等，或強(qiáng)調(diào)格調(diào)古典優(yōu)雅的企業(yè)或商品形象。
茶色 | 可可色 | 麥芽色 | 原木色 |
|
白色的色彩意象
在商業(yè)設(shè)計中，白色具有高級，科技的意象，通常需和其他色彩搭配使用，純白色會帶給別人寒冷，嚴(yán)峻的感覺，所以在使用白色時，都會摻一些其他的色彩，如象牙白，米白，乳白，蘋果白，在生活用品，服飾用色上，白色是永遠(yuǎn)流行的主要色，可以和任何顏色作搭配。
黑色的色彩意象
在商業(yè)設(shè)計中，黑色具有高貴，穩(wěn)重，科技的意象，許多科技產(chǎn)品的用色，如電視，跑車，攝影機(jī)，音響，儀器的色彩，大多采用黑色，在其他方面，黑色的莊嚴(yán)的意象，也常用在一些特殊場合的空間設(shè)計，生活用品和服飾設(shè)計大多利用黑色來塑造高貴的形象，也是一種永遠(yuǎn)流行的主要顏色，適合和許多色彩作搭配。
灰色的色彩意象
在商業(yè)設(shè)計中，灰色具有柔和，高雅的意象，而且屬於中間性格，男女皆能接受，所以灰色也是永遠(yuǎn)流行的主要顏色，在許多的高科技產(chǎn)品，尤其是和金屬材料有關(guān)的，幾乎都采用灰色來傳達(dá)高級，科技的形象，使用灰色時，大多利用不同的層次變化組合或他配其他色彩，才不會過於 素，沉悶，而有呆板，僵硬的感覺。
大灰 | 老鼠灰 | 藍(lán)灰 | 深灰 |
|
RGB色彩對照表 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
兩種或兩種以上的色彩合理搭配，產(chǎn)生統(tǒng)一諧調(diào)的效果，稱為色彩調(diào)和。色彩調(diào)和是求得視覺統(tǒng)一，達(dá)到人們心理平衡的重要手段。
調(diào)和就是統(tǒng)一，下面介紹的四種方法能夠達(dá)到調(diào)和頁面色彩的目的。
■ 同種色的調(diào)和
相同色相、不同明度和純度的色彩調(diào)和。使之產(chǎn)生秩序的漸進(jìn)，在明度、純度的變化上，彌補(bǔ)同種色相的單調(diào)感。
→ 同種色的調(diào)和網(wǎng)頁例圖：http://www. solar1.org
同種色的調(diào)和分析：
同種色給人的感覺是相當(dāng)協(xié)調(diào)的。它們通常在同一個色相里，通過明度的黑白灰或者純度的不同來稍微加以區(qū)別的，產(chǎn)生了及其微妙的韻律美。為了不至于讓整個頁面呈現(xiàn)過于單調(diào)平淡，有些頁面則是加入極其小的其他顏色做點(diǎn)綴。該頁面使用了同種色的黃色系，淡黃、檸檬黃、中黃、通過明度、純度的微妙變化產(chǎn)生緩和的節(jié)奏美感。
結(jié)論：
同種色被稱為最穩(wěn)妥的色彩搭配方法。
■ 類似色的調(diào)和
在色環(huán)中,色相越靠近越調(diào)和。主要靠類似色之間的共同色來產(chǎn)生作用。
→ 類似色的調(diào)和網(wǎng)頁例圖：http://www. solar1.org 
類似色的調(diào)和分析：
類似色相較于同類色色彩之間的可搭配度要大些，顏色豐富、富于變化。
以上頁面主要取的是色環(huán)中的黃色、綠色、藍(lán)色通過明度、純度、面積上的不同實(shí)現(xiàn)變化和統(tǒng)一的。雖然主色調(diào)的米黃色在頁面中使用面積最大，但是我們看到由于它的明度非常高，飽和度就降低了，因此在頁面中處在不明顯的角色。而綠色的純度最高，且使用面積次之，頁面顯示較顯眼，因此用于次級導(dǎo)航位置上。整個頁面主次的視覺引導(dǎo)分明。
結(jié)論：
不是每種主色調(diào)都是極其顯眼的位置，通常多扮演著用于突出主體的輔助性配角。而重要角色往往在頁面中用的份量極少，卻又起到突出主體的作用。
這也就說明，在任何設(shè)計中，色彩對視覺的刺激起到第一信息傳達(dá)的作用。因此，對色彩的基礎(chǔ)知識的良好掌控，在網(wǎng)頁設(shè)計中才能做到游刃有余。
為了使下面的網(wǎng)頁配色分析更易于理解，我們先來了解色彩的RGB模式和HSB模式。
■ RGB
RGB是表示紅色綠色藍(lán)色又稱為三原色光，英文為R(Red)、G(Green)、B(Blue)，在電腦中，RGB的所謂”多少”就是指亮度，并使用整數(shù)來表示。
通常情況下，RGB各有256級亮度，用數(shù)字表示為從0、1、2至255。雖然數(shù)字最高是255，但0也是數(shù)值之一，因此共256級。按照計算，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256＝16777216。通常也被簡稱為1600萬色或千萬色。也稱為24位色(2的24次方)。
對于單獨(dú)的R或G或B而言，當(dāng)數(shù)值為0時，代表這種顏色不發(fā)光；如果為255，則該顏色為最高亮度。因此當(dāng)RGB三種色光都發(fā)到最強(qiáng)的亮度，純白的RGB值就為255,255,255。屏幕上黑的RGB值是0,0,0。R，意味著只有紅色存在，且亮度最強(qiáng)，G和B都不發(fā)光。因此最紅色的數(shù)值是255,0,0。同理，最綠色就是0,255,0；而最藍(lán)色就是0,0,255。黃色較特殊，是由紅色加綠色而得就是255，255，0。
 |
 |
| 純白色數(shù)值為R255,G255,B255 | 純黑色數(shù)值為R0,G0,B0 |
 |
 |
| 紅色數(shù)值為R255,G0,B0 | 綠色數(shù)值為R0,G255,B0 |
 |
 |
| 藍(lán)色數(shù)值為R0,G0,B255 | 黃色數(shù)值為R255,G255,B0 |
RGB模式是顯示器的物理色彩模式。這就意味著無論在軟件中使用何種色彩模式，只要是在顯示器上顯示的，圖像最終就是以RGB方式出現(xiàn)。
■ HSB
是顏色分為色相、飽和度、明度三個因素。英文為H(Hue)、S（Saturation）B（Brightness)飽和度高色彩較艷麗。飽和度低色彩就接近灰色。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到純白，最低得到純黑。一般淺色的飽和度較低，亮度較高，而深色的飽和度高而亮度低。
顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色，而其他所有顏色均屬于彩色。從心理學(xué)和視覺的角度出發(fā)，彩色具有三個屬性：色相、明度、純度（彩度）。
|
|
■ 色相（Hue）： 也叫色調(diào)，指顏色的種類和名稱，是指顏色的基本特征，是一種顏色區(qū)別于其他顏色的因素。色相和色彩的強(qiáng)弱及明暗沒有關(guān)系，只是純粹表示色彩相貌的差異。如紅、黃、綠、藍(lán)、紫等為不同的基本色相。 |
■ 明度（Value）：
也叫亮度，指顏色的深淺、明暗程度，沒有色相和飽和度的區(qū)別。不同的顏色，反射的光量強(qiáng)弱不一，因而會產(chǎn)生不同程度的明暗。非色彩的?⒒搖?捉夏芐蝸蟮謀澩镎庖惶刂?。糂R>
明度的遞增
| → 明度網(wǎng)頁例圖：http://www.once-upon-a-forest.com |
 |
明度分析：
從上圖網(wǎng)頁所選取的4個主要色塊的RGB數(shù)值來看，這4塊色彩組合顯示的RGB數(shù)值很高，接近于最高值255。RGB相互間的數(shù)值相近，由于有RG的高數(shù)值與B高數(shù)值混合，整個網(wǎng)頁給人的感覺非常協(xié)調(diào)，柔和雅致，心情愉悅。
結(jié)論：
RGB同時呈現(xiàn)相近的高數(shù)值時，相近等量的色彩相互混合，頁面呈高明度灰色段，協(xié)調(diào)的柔和狀態(tài)，令人遐想，對視覺刺激是緩慢的，適合長時間觀看。但由于數(shù)值接近，因此色階平穩(wěn)，同時存在著不夠醒目的狀態(tài)。