以下內容由摹客團隊翻譯整理，僅供學習交流，摹客iDoc是支援智慧標註和切圖的產品協作設計神器。
如何在網頁設計中正確應用色彩？
在網頁設計中正確應用色彩從來都不是一件容易的事情！當網頁上的產品介紹、推銷言辭和客戶評價在為訪問者傳遞產品資訊時，顏色也會在情感層次上與訪客產生交流。應用正確的顏色不僅可以幫助訪問者快速理解看到的內容，還會促使訪客對品牌總體產生積極的看法。反之，在網頁設計中錯誤地應用色彩，則可能會導致潛在使用者流失。
簡而言之，色彩是給訪客留下良好印象最快、最直接的方式。如何才能正確應用色彩？彆著急！瞭解了這些色彩理論和原則，你就能輕鬆應對了！
不同的顏色分別代表什麼?
選擇顏色不能光憑個人喜好，還需要知道其背後的含義。每種顏色都有不同的含義，並且以特定的方式影響著人們的情感。這就是色彩對於網頁設計如此重要的原因—— 能夠迅速傳達關於網站業務/產品的正確資訊。
接下來，讓我們一起看看顏色背後的含義以及它們在情緒上發揮的作用。
暖色系
紅色能喚起激情與活力的網頁設計，由Aneley設計。
暖色常常帶給來訪者一種充滿活力的感覺，但如果單獨使用它們，則會用力過猛。但將它們與清爽中性的顏色搭配不失為達到平衡的好辦法。
紅色 —— 活躍，情緒化，熱情，力量，愛，強烈。
粉色 —— 甜蜜，浪漫，俏皮，溫暖，富有同情心，柔軟。
橘色 —— 溫暖、熱情、成功、決心、友好。
黃色 —— 年輕，活潑，精力充沛，新鮮，樂觀。
冷色系
冷色能帶給來訪者一種平靜的感覺，這也是它們經常被應用在網站上的原因。但是需要注意的是：過度使用冷色會帶給來訪者冷漠、沒有人情味的感覺。
綠色 —— 清新，平靜，放鬆，信任，和平，希望，治癒。
藍色 —— 舒適，清澈，冷靜，信任，正直，忠誠，可靠。
紫色 —— 魅力、力量、懷舊、奢華、野心、精神。
通過用藍色來達到一種忠誠和信任的網頁設計，由DSKY設計。
中性色
中性色一般適合與暖色或冷色搭配使用。它們通常被用來淡化原色，在網頁設計中起到平衡色彩的作用。
灰色 —— 尊敬，智慧，耐心，現代，長壽，智慧。
黑色 —— 力量，大膽，嚴肅，優雅，豪華，戲劇性，正式。
棕色 —— 友好、大地、家庭、戶外、信譽、簡單、持久。
一個使用色彩平衡創造豪華，簡約感覺的網頁設計，由martinthehorrible設計。
色彩心理學與品牌認知
當涉及到建立和推廣網站品牌時，顏色揹負著吸引注意力、創造慾望、推動轉化率和贏得訪問者忠誠度的重要任務。只有選擇並應用了正確的顏色，使用者即使沒有看到商標也能認出熟悉的品牌。
除了上面提到的顏色背後的含義外，還有一些常見的色彩應用規律可以幫助品牌創造知名度。例如，餐廳通常是紅色和橙色，銀行和金融機構通常是藍色，奢侈品包裝通常是黑色，酒店通常使用白色，藍色，黑色或綠色。一些以顏色著稱的標誌性品牌包括CNN（美國有線電視新聞網）的黑白紅應用，國家地理的黃色應用，以及麥當勞使用的紅黃搭配等。
如果你還在糾結於選擇一種能讓你的品牌產生共鳴的顏色，最有效的方法就是多看看知名品牌的Logo或網站配色。然後根據上文提供的顏色含義，弄清楚為什麼要選擇這些顏色進行設計。這樣，很快你就能找到自己想要的顏色了。
網頁設計中的色彩理論
在上文中我們瞭解了顏色對訪問者的情感影響，那麼接下來我們可以利用色彩理論進行色彩搭配，來獲得對使用者行為的進一步影響。
簡單地說，色彩理論就是色彩在色輪上相互作用背後的科學。在設計中，色彩理論帶給設計者的配色靈感非常受用。最常見的配色結構是三色系、互補色和相似色。
設計師可以通過考慮顏色的互補、對比和活力三方面來對色輪進行更細緻的選擇。
顏色互補是我們看到顏色與其他顏色相互作用的方式。當你從顏色輪的相反的兩端匹配顏色時，你會有在視覺上被吸引的感覺。這是因為當一種顏色增強另一種顏色時，它為眼睛提供了視覺上的平衡。
對比色通過清晰劃分頁面上的元素來吸引訪問者注意力，既可以提高文字的可讀性，也可以將來訪者注意力吸引到頁面的特定部分。
活力色可以影響訪問者的情緒反應。明亮的顏色可以讓來訪者感受到活力；深沉的顏色可以讓他們感到放鬆，從而更能專注於內容。
選擇原色
開始搭配網頁設計的顏色之前，設計師的首要任務是為品牌建立原色。設計師可以從品牌標誌或品牌其他素材中提取，倘若不能，也可以利用色彩心理學和色彩聯想來選擇原色。
這個網頁設計從品牌標誌中提取了原色的網頁設計，由Iconic Graphics設計。
色彩渲染和陰影
一旦網站選定了基本的品牌原色，就可以開始考慮配色方案了。有些網站在設計時會使用單一顏色，但大多數時候建議你使用一些不同的色調。
在整個設計中只使用原色不見得是最好的色彩方案。你可以在保持基礎顏色不變的情況下，將顏色調暗或變亮，在網站上創造出一些微妙的變化。例如，如果你在網站各個板塊使用了淺色調的原色，那麼你可以在CTA按鈕上使用主色調或更突出的色調，這樣就可以起到強調的作用。在下面的例子中，我們來看看設計師UI Maniac是如何做到這一點的。
原色橙色被用在不同的色調中來創造不同的色調案例，由UI Maniac設計。
60-30-10法則
這種比例法則非常簡單，但對搭配不同的顏色非常有效。為了營造和諧的視覺效果，色彩的組合一般應按60%-30%-10%的比例進行。設計師不必總是用三種顏色，但這個比例確實是平衡色彩的一個安全數字。使用這個法則時需注意，60%的部分代表的是主色，30%代表副色，10%應該是強調色。這個比例的配色是最賞心悅目的，因為它可以讓視覺元素逐漸浮現，層層遞進。
一個實現60-30-10規則的網站案例，由JPSDesign設計。
色彩對比
色彩對比是視覺構圖中非常重要的一部分。例如，如果需要訪客注意到網站的某個特定區域(如CTA按鈕)，設計可以使用兩種對比度很高的顏色，如橙色和綠色，或紅色和藍色分別應用於網站背景和按鈕。
對比度高但不傷眼睛的案例，該網站由JPSDesign設計 。
雖然高對比色的強調作用很棒，但也應該謹慎使用。如果你在整個網站上都使用高對比度，訪問者就很難閱讀或檢視文字。建議設計師在大多數設計中使用中等對比色，只有在突出關鍵元素時才應用高對比色。
從影象著手
在某些情況下，從影象開始設計是有幫助的。如果你的腦海中有一個可以定義品牌的影象，或者客戶已經選擇了影象，那麼你就可以直接從中提取主要顏色。
在這個設計中有多種顏色，中性色調提供平衡。 ——arosto
處理多個影象可能有些棘手，因為你必須在設計中找到一種保持顏色和諧的方法。在這種情況下，以下幾種方法可以有效平衡你的影象。
考慮把它們轉換成灰度影象：
（1）調整影象的活力降低色調，
（2）使用中性色來平衡影象，
（3）使用網頁設計應用的調色盤顏色建立一個漸變疊加。
以上的解決方案可以根據專案具體情況使用，就可以輕鬆地將所選的影象和諧地組合在一起。
色彩賦予網頁設計生命
色彩無處不在，如果使用得當，它們可以喚起訪客情感並促成操作或購買。雖然顏色在網頁設計中扮演著極其重要的角色，但它們並不是完美佈局的唯一關鍵。色彩理論只是無數建立優秀網頁設計策略中的一個，你可以應用它來建立優秀的網頁設計。
希望本文的色彩理論和配色技巧對你有所幫助，但是請記住，在設計中沒有嚴格的規則。事實上，最好的設計往往會打破常規。用色彩心理學作為指導進行設計，但同時也要相信自己在設計上的創造本能！
原文作者：Mike Projkovski
原文連結：99designs.com/blog/web-di…
學習工具，但不受限於某種工具。摹客iDoc，高效協作，從產品到開發，只要一個文件，讓你的團隊高效協作！
相關閱讀：