用色的技巧絕對是一門藝術(shù)。
縱觀人類歷史，繪畫大師和其他藝術(shù)家們總是憑借對色彩的巧妙運(yùn)用而蜚聲全球。在近代，這種藝術(shù)開始與商業(yè)和貿(mào)易結(jié)合，最初體現(xiàn)在廣告上，現(xiàn)在則是網(wǎng)頁設(shè)計(jì)。用色的技巧，幾乎永遠(yuǎn)存在探索的空間，永遠(yuǎn)可以提高和精進(jìn)。
在本文中，我們將講解基本的顏色理論和配色方案，然后討論某些色彩對人的情緒產(chǎn)生的影響。
顏色理論
光是這個(gè)題目本身就可以寫一本書了，所以我們只擷取與 UI 設(shè)計(jì)相關(guān)的部分。根據(jù)網(wǎng)頁 UI 設(shè)計(jì)的需要，我們可以把顏色理論分為三部分：
對比：顏色的每一種濃度都有它的補(bǔ)色，它們之間的對比比和其他任何顏色都要強(qiáng)烈。你可以用下面的色輪來方便地查找某一種顏色的補(bǔ)色，只需看某種顏色對面的顏色就可以了。

互補(bǔ)：顏色并不總是彼此獨(dú)立的?；パa(bǔ)色相互起到強(qiáng)調(diào)的作用，恰恰能達(dá)到表面上「對比」之外的最佳效果?；パa(bǔ)色在色輪上處于相對的位置，例如，紫色的互補(bǔ)色是綠色。
振動(dòng)：每種顏色都能喚起某種特別的情緒。偏亮、暖的顏色（紅、橙、黃）一般會(huì)使人振奮，并讓人更加警覺；而偏深、冷的色調(diào)（綠，藍(lán)，紫）更趨向于使人放松和平和。CNN 在網(wǎng)頁頂部菜單欄中使用紅色的標(biāo)識(shí)來加強(qiáng)警醒度，就很符合網(wǎng)站突發(fā)新聞的內(nèi)容。

網(wǎng)頁設(shè)計(jì)中的顏色理論遠(yuǎn)遠(yuǎn)不只是視覺審美的問題，它能給你的業(yè)務(wù)帶來顛覆性的作用。如果不信，可以讀讀轉(zhuǎn)型顧問 Jeremy Smith 的文章，里面解釋了如何利用顏色心理學(xué)來拓展你的業(yè)務(wù)。
寓意： 顏色的情緒暗示
沒人會(huì)否認(rèn)情緒與顏色之間的關(guān)聯(lián)————事實(shí)上，自中世紀(jì)以來，人類一直在研究顏色對心理的影響。自然，網(wǎng)頁設(shè)計(jì)師們也希望能夠很好地駕馭它，因?yàn)楹线m的顏色才能給你的網(wǎng)頁帶來合適的風(fēng)格。
我們分析了 Vandeley Design 和 Smashing 雜志的研究員們給出的建議，并結(jié)合我們自己在 UXpin 上的經(jīng)驗(yàn)對這些建議進(jìn)行了篩選。
需要注意的是，世界各地不同的文化對顏色的理解是不同的。我們對情緒的聯(lián)想多與西方文化相關(guān)聯(lián)，如果想更深層次地了解不同文化對顏色的解讀，可以讀讀 Web Design Depot 這篇詳盡的文章。
紅色：
代表：力量，重點(diǎn)，青春
作為最具刺激性的顏色，紅色使人振奮、血液循環(huán)加快。它是熱情和力量的象征，是最引人注意的顏色，因此常被用在警示和重要通知上。
No Way NSA（美國國家安全局）的網(wǎng)站上使用紅色再合適不過，因?yàn)樗麄冃枰尵W(wǎng)站上發(fā)布的預(yù)警信息引起人們的警戒。而在頁面的第一個(gè)段落中使用紅色尤其明智，因?yàn)槿藗儚男睦砩蠒?huì)想要「遠(yuǎn)離危險(xiǎn)區(qū)域」，從而將頁面上滑，這自然而然就促使用戶們?yōu)g覽了更多的內(nèi)容。
然而，紅色如果使用不當(dāng)，也可能適得其反。因?yàn)樗芤饝嵟蛑辽偈沁^激反應(yīng)。如果你追求的是輕松的氛圍，使用時(shí)需謹(jǐn)慎（或者至少用淺一些的紅），或者干脆不用。
橙色：
代表：友好，能量，獨(dú)特
作為暖色系中最柔和的顏色，橙色相當(dāng)通用。作為主色時(shí)，它迷人、充滿活力，而作為輔色使用時(shí)，它也可以含蓄地體現(xiàn)出這些特性。橙色還可以制造出運(yùn)動(dòng)感和能量感。
在「芬達(dá)」商標(biāo)中，橙色已經(jīng)成為了其中的一部分，此外在芬達(dá)帶有卡通的暖心風(fēng)格的網(wǎng)頁上，橙色也被很好地利用，表達(dá)了一種親和、而又不失創(chuàng)造性的感覺。
黃色：
代表：快樂，激情，古老（深黃色）
黃色是一種更加通用的顏色，具體取決于它的深淺度。
亮黃是最有活力的顏色，而且不像紅色風(fēng)格那么強(qiáng)烈。而中間色的黃帶給人一種舒服的感覺，同時(shí)依舊不失活潑。深黃（包括金色）則帶有古老的風(fēng)格，并有永恒、智慧、和奢華之感。
上面的例子來自網(wǎng)頁設(shè)計(jì)代理 Flash Media，深黃色散發(fā)著能量，尊貴，和權(quán)威感。這彰顯了公司用他們的專業(yè)和技能創(chuàng)造價(jià)值的訴求。
綠色：
代表：成長，穩(wěn)定，金融主題，環(huán)保主題
綠色是暖色和冷色之間的過渡，盡管它稍有些偏向于冷色。這意味著綠色既有藍(lán)色的放松效果，又保有黃色的一部分充滿活力的特質(zhì)。這樣，它就營造出了一種非常平衡、穩(wěn)定的氛圍。深色調(diào)的綠更加能帶來有關(guān)金錢和財(cái)富的聯(lián)想，這一點(diǎn)可以在上面的 Ameritrade 上體現(xiàn)出來。
藍(lán)色：
代表： 冷靜，安全，開放（淺藍(lán)），可靠（深藍(lán)）
如同黃色一樣，不同深度的藍(lán)有著不同的含義。總體上看，所有的藍(lán)都能讓人感覺放松和安全，不過淺藍(lán)會(huì)看上去更友好，深色則更陰郁。社交媒體如 twitter 和 facebook，利用了淺藍(lán)和中等深度的藍(lán)色的優(yōu)點(diǎn)。而公司的網(wǎng)站上則用深藍(lán)來體現(xiàn)力量和可靠感。
項(xiàng)目設(shè)計(jì)代理 Van Vliet & Trap 很巧妙地使用了深藍(lán)色，在背景的花朵中使用這種藍(lán)，除了從視覺上暗示出他們在花朵設(shè)計(jì)上的專業(yè)以外，同時(shí)也滲透信任和可靠。這確實(shí)起到了作用，他們已經(jīng)開始策劃婚禮等高端視覺活動(dòng)（雖然這多少有點(diǎn)讓人頭疼）。
紫色：
代表：奢華，浪漫（淺紫），神秘（深紫）
紫色自古就與皇室緊密相連，帶有奢華甚至是墮落的意味。
總體上，紫色讓人感覺奢靡，這使得它變成潮流和奢侈品（甚至巧克力，像上面的 cadbury）普遍之選。淺色的紫如薰衣草色（摻雜粉色）代表浪漫，而深色調(diào)看上去更加華貴和神秘。黑色：
代表：力量，邊緣，復(fù)雜
黑色是最強(qiáng)烈的中性色，幾乎存在于所有網(wǎng)頁中。
它可以襯托其他顏色，從而展現(xiàn)不同的特性，也可以通過大量的使用來統(tǒng)領(lǐng)所有的顏色。它蘊(yùn)含在中性之中的力量使它成為大篇幅文本的首選用色，但作為主色，它會(huì)給人邊緣化，復(fù)雜，乃至邪惡的感覺。
對于大多數(shù)網(wǎng)頁而言，黑色用來營造一種第一眼看上去專業(yè)而永恒的感覺。當(dāng)它與白色字體相搭配，體現(xiàn)在極簡風(fēng)格的布局中時(shí)，就凸顯出了它的優(yōu)雅，這一點(diǎn)你可以在 Bose 的「夢想與達(dá)成」（「Dream and Reach」）的微網(wǎng)頁中看到。
白色：
代表：純凈，高尚，簡潔
在西方文化中，白色是與高尚、純潔、無辜聯(lián)系最緊密的顏色。
極簡風(fēng)格的網(wǎng)頁最常用白色作為背景色。它最不引人注意，在頁面上能更好地襯托其他顏色。
這在藝術(shù)家 Kaloian Toshev 的 awwwards-winning 網(wǎng)頁上得到了很好的體現(xiàn)。白色背景使觀者的注意力放到了他的藝術(shù)作品上，同時(shí)制造了一種藝術(shù)畫廊般的優(yōu)雅氛圍。
灰色：
代表：中性，禮節(jié)，憂郁
盡管在某種情境下它看上去沉靜而傷感，但灰色仍然是代表傳統(tǒng)、專業(yè)的合適之選。然而，灰色的最大優(yōu)點(diǎn)在于豐富的色度---從白到黑，利用深淺度的改變可以帶來各自與眾不同的效果。只要善加利用，它是一個(gè)非常有效的工具。
在平面 UI 網(wǎng)站 AWWWARDS 上將它與亮色相搭配，灰色的背景就看上去比往常顯得更加現(xiàn)代。
米黃：
代表：環(huán)繞
米黃是所有顏色的通配色，它的主要作用是襯托其他顏色。
就它本身而言，米黃是陰暗的（盡管這代表著謙遜）。然而，它那種可以襯托周圍顏色的特點(diǎn)，這使它成為了一個(gè)有趣的設(shè)計(jì)手段。因此，米黃幾乎總是作為次要色或者背景色來使用。
深度的米黃（就像 Dishroom 網(wǎng)頁上那樣）能產(chǎn)生一種質(zhì)樸、幾乎像紙一樣的紋理，而淺色的看上去更清新。在這個(gè)案例中，環(huán)繞在商標(biāo)周圍的淺米黃，使字體周圍變暗，點(diǎn)出餐館使用天然食材制作新鮮時(shí)尚的美食的主題。
象牙白：
代表：舒適，高雅，簡潔
就情緒上的反應(yīng)來說，象牙白（和乳白）和白色稍有區(qū)別。
象牙白比白色看上去更溫暖（或者說沒那么蒼白），這使它看上去更舒服，同時(shí)仍然顯得簡潔和充盈。
如果你想看更多的關(guān)于顏色和情緒的分析，看看這篇來自 1stWebDesigner 的文章，其中對 20 個(gè)頂級品牌的用色進(jìn)行了解構(gòu)分析。
配色方案
每個(gè)網(wǎng)頁都有自己的配色方案，把各自的主色用在主要區(qū)域。就像我們前面提到的，這些顏色的重復(fù)使用影響著用戶的思維和情緒，尤其是在潛意識(shí)層面。所以使用時(shí)應(yīng)多加注意。
顏色的搭配有許多方式，我們先說其中效果最好、最常用的：
1. 三色配色——三色配色是最基本和最平衡的。它利用了顏色的振動(dòng)和互補(bǔ)，但去掉了對比的玩味感，是最安全可靠的配色方案。在 12 色色輪中，你可以選擇任何三個(gè)相距 120 度的顏色：一種用于背景，另外兩個(gè)用在內(nèi)容和選項(xiàng)中。
FLORIDA FLOURISH 網(wǎng)站充分利用了顏色本身，就達(dá)到了非凡的效果。文本標(biāo)簽和植物使用紅綠對比，沙漠上方天空用上藍(lán)色和橙色，這樣紅/橙和藍(lán)/綠的互補(bǔ)從整體看上去非常不錯(cuò)。
2. 相似配色——這是一種最近新流行起來的配色方案，專門針對互補(bǔ)色。它非常強(qiáng)調(diào)被選色的寓意，例如，紅橙黃的配色方案會(huì)看上去非常有活力和生命力，這種方案很便于使用，關(guān)鍵在于采用顏色的何種寓意，然后將其延伸。
通過在網(wǎng)頁上使用藍(lán)色、孔雀藍(lán)和綠色，Blinksale 創(chuàng)造了一種平和而安全的氛圍。同時(shí)，也要注意到他們在口號(hào)上使用了對比色----黃色，來引起注意。
我們剛才討論的僅僅是顏色理論如何能提升你的網(wǎng)頁設(shè)計(jì)觀感，至于利用到何種程度，取決于你自己。如果你想了解更多，可以看看這篇 Smashing Magazine 上的文章，里面講解了如何創(chuàng)造屬于你自己的顏色風(fēng)格。
顏色輔助工具
有一點(diǎn)值得慶幸，那就是有很多工具都可以幫助你將顏色理論應(yīng)用于實(shí)際。下面這些預(yù)設(shè)好的調(diào)色工具，會(huì)幫你省去很多初始步驟。
Adobe Color CC：前身是 kuler，最值得信任的顏色輔助工具之一。
Paletton：如果你正需要一個(gè)能快速上手的簡單工具，這個(gè)最能幫助你。新手尤其適用。
Flat UI Color Picker：只需要平面 UI 設(shè)計(jì)工具時(shí)，它非常方便實(shí)用。
如果想在學(xué)習(xí)之路上少交點(diǎn)學(xué)費(fèi)，你還可以看看這個(gè)，28 個(gè)顏色工具網(wǎng)站。
沒人要你成為米開朗琪羅那樣的大師，但對用色的基本知識(shí)是網(wǎng)頁設(shè)計(jì)的必備技能。
就像我們剛說的，顏色有時(shí)承擔(dān)著很多可能不被人注意的作用。無論你選擇什么顏色，都一定會(huì)在整體上對標(biāo)識(shí)產(chǎn)生影響：無論是最初的視覺沖擊，還是喚起最細(xì)微的情緒。