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

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

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