色彩作為設計中不可或缺且獨立存在的一個分支，其對設計不僅有著視覺的影響，還可以以最直觀，最有力的視覺表現喚起特定的情緒或情感，促進視覺和心理的雙重感知以實現設計所要表達的目的，可以說色彩的搭配決定了設計成功與否的基礎，而在很多情況下色彩的搭配則成了眾多設計師遇到的難題之一，本期文章將立足于色彩理論的基礎之上，對色彩的搭配和使用進行贅述，在視覺設計中應該怎么樣才能讓色彩看起來舒服一些；

色彩作為視覺感知的先覺條件，在很大程度上決定了作品的好壞以及給觀者留下什么樣的印象，人們最先感知到的即是通過色彩所傳遞出的情感，色彩作為一門獨立的學科，在基于其理論體系之上衍生出了眾多的搭配方法和技巧，在遵循色彩構成的原理之上可以更好的幫助我們對色彩有深入的認知和使用，對于色彩而言，除了要了解基本的構成之外，在使用的過程中更重要的是要對色相，明度，飽和度有敏銳的觀察里和視覺感知力，通過三者不斷的變化和調整把控使色彩更加具有情感，讓視覺感知更加的舒適并滿足我們的實際的需求；

 色相

色相的變化則是基于三原色的基礎上產生出來的色與色之間的關系，是決定色彩的基礎，我們經常說的色彩搭配通常是指某個顏色與另一個顏色的色相搭配，其在色彩選擇和使用中起著決定性的作用，色相可以說是色彩的選擇時的框架，同時也是情感和情緒單一且直觀的視覺感知體現，是偏向理性的理論支撐；

明度和純度

則是基于色相之上的深淺和明暗變化，在色相的框架之內可以利用明度和純度的變化營造更加細膩的舒適效果，同時兩者也反應出最終色相的舒適程度和搭配的效果優劣，也是色彩細節的根本所在，其影響的直接結果就是即使在符合色彩原理的基礎上也未必能有舒適的視覺感知，更加偏向感性；

在同一個色相下，明度和純度的變化則是以縱向和和橫向的方式變化，兩者相交處則決定了最終色彩值，色彩的舒適與否很大程度上取決于明度和純度的交叉，色相包含明度和純度，但又取決于明度和純度，三者互為相依形成色彩三要素，明度和純度與無色的黑白同樣是神一樣的存在，至始至終貫穿整個色彩，同時也是色彩細節和視覺感知最有力的體現，更是確定單個純色的最佳方式；

圖1:

當一個畫面中出現兩個不同的色相時，則需要在遵循三原色的原理上對其中一個色相的明度和純度進行調整以達到視覺感知的舒適，在進行色彩搭配的過程即是在確定色相之后以色相的深淺明暗進行細微的調整使其色彩的情緒和情感表達能夠更加的準確可視化，如只是調整不同的色相變化則會讓畫面不堪入目；

圖2:

而當一個畫面只使用一個色相的時候，則是明度和純度發揮作用最大的時候，通過色相的深淺和明暗就可以完成一個不錯的畫面，但就視覺設計而言，單一色相相對來說則會比較局限，也很難滿足畫面中多種情緒細微的變化，而與左邊的圖相比之下，整個畫面則會顯得稍微亮了一些，同背景下不同的搭配傳遞出的視覺效果也有差別；

在遵循色彩搭配原理的基礎上，更加需要注重明度和純度的變化所傳遞出的視覺感知效果帶給人們的舒適度，而并非有理論支撐或者照搬理論就就是完全合適的；相反在確定明度和純度之后也可以調整色相使色與色之間更加舒適；

色彩通常是感性的，但同時也是基于一定的理論基礎之上，通過人為的視覺感知，對表達事物理解程度進行調整的，更簡單的理解就是色彩理論作為框架的輔助，而人眼的感官舒適度作為目的，用色彩基礎理論的方法論對明度和純度不同調整嘗試的過程；

理論認知即是對色彩基礎知識學習的層面，是學習和認識色彩的方法論，它是輔助我們合理使用色彩的基本原理，即是對色彩劃分，色彩的構成，色彩原理的思維邏輯理解；

無色系與有色系存在的唯一差別即是無色只有明度沒有純度，而有色則是都存在的，相對來說也會比無色復雜一些，同時也是我們需要深入理解和學習的方向，而理論認知只是建立相應的色彩框架，很多設計師大都停留在色彩框架的邊緣以色彩理論的空架子作為支撐是很難掌握實際需求和最終的視覺效果，但兩者在使用時也會存在一些相似的原理和規律；

當以實際應用模式把無色系和有色系分別列出結構圖可以看出，兩者的變化規律基本一致，而有色系則是多了一個純度，也就是顏色的深淺，并呈現出循環規律，在進行選擇時則可以融合黑白灰以調整有色的顏色深淺和明暗；

而當有色與無色變化規律進行對比之后可以看出，從黑到白的變化中無色是自然過度的，而加入一個紅色之后則發生了有色的變化，黑到紅是明度的變化，而紅到白則包含明度和純度的變化，單個色彩則是與黑白融合變化后的結果，那邊融合的多紅色即偏向那邊，所有單個色彩均是如此變化規律，而色彩搭配則可以看作多與少之間的搭配；

圖1:

在使用黑白灰的情況下，更多的只需要考慮色彩的明暗即可，不管如何使用都離不開從黑到白的無色變化規律，無色可以與任何色彩隨意搭配使用，除了極端的純黑和純白之外，其他均可以看作是黑白的明暗過度色；

圖2:

在有色中加入黑色則可以使色彩變的暗一些，而加入白色則可以讓色彩變的亮一些或者顏色淺一些，即可影響明度同時也影響著色彩的純度，有色的搭配方法則是根據色彩變化的規律進行的，也是色相的變化而在使用中還要結合純度和明度；

案例延展可以出，在規避三背景上面的三原色之外，背景可以使用其他的任何過度色，具體可以根據實際的要表達的需求而定；

感性認知是建立在理論認知的基礎上對目的理解和色彩感官的使用，是以人的感官目的為基礎進行的色彩使用，是色彩所表現出的情感和視覺感受，通常就是我們常說的對色彩的敏銳度以及對需求深度理解的色彩視覺表現，也是三要素的具體表現；

色彩的情感是人視覺感知之后的心理作用，也是色彩心理的表現，在色相較為固定的情況下，通過調整明度和純度之后就會得出新的色調，而隨之變化的也有色彩的情感和心理變化，而情感和心理變化等這些不確定的因素則需要用色彩之間的搭配來相對較為固定的傳達出色彩所代表的某一特定的情緒；

圖1:

在遵循色彩搭配原理的基礎上進行色彩之間的搭配使用是沒有問題的，但就視覺而言左邊的顏色則會顯得太過于扎眼，與文字色和背景色之間并沒有很好的過渡，導致整個版面的色彩視覺感知跳躍，所傳遞出的情感和心理也飄忽不定，靚麗充滿活力的色彩與背景和文字的沉穩雖然是形成了鮮明的對比，但卻讓人感覺不是那么協調舒服；

圖2:

基于感性認知的基礎上，對原有色彩進行明度和純度的調整，讓色彩之間在視覺上保持一致的同時也與背景和文字的色彩相互協調舒適，讓版面不失去色彩突出的同時也讓整個版面的情感和心理變化相對的固定在某一特定的變化中，以達到視覺感知認知的目的與視覺的舒適度平衡，通常調整是根據色彩的主從原則和表現的主體進行的；

在色相不變的情況下，把兩個案例的背景加入大量的黑色，在改變其情緒和心理的同時使其更加突出色彩，而兩個背景也都進行了純度的調整，在差別不是很大的情況下尤其會突出感性認知對情緒和心理變化的影響，同時也是讓色相與色相之間保持視覺的一致性，突出單個色相的原始基本情感；

在使用色彩的時候很多人都誤以為只是色彩與色彩之間的搭配沒有做好，在學習完理論知識之后又很難在實際應用中發揮出來，提升色彩舒適度除了要了解理論知識外，還需要注意色彩的感性認知以及視覺對色彩的敏感度（也就是單個色彩的純度和明度）；

一致性是讓色彩視覺感知舒服的最簡單的方法，同時也是調整色彩的明度和純度而決定的，尤其是在使用多色的情況下一致性尤為重要，在簡單的三色搭配使用原則中同樣需要注意主色與其他兩個色之間的視覺一致性；

以“形影”為題創作的概念性的海報，為了表達這個詞的意思，先做好一個一個圖形，同時帶有一定的影子過渡，顏色方面選擇沒那么高的飽和度和純度的對比色，以凸顯形影表達的意境，然后把圖形置入到新建的畫布中

圖1:

把圖形復制一層使兩個圖形對稱排列并調整到版面中合適的位置，然后根據圖形的色彩基調選擇背景色，色調的選擇是在保證能夠凸顯出主體圖形的同時又能與主體融為一體，并貼合情感的需求，背景色選擇藍色便紫的較淺色調，目的是為了更好的融合圖形的影子以及“形影”所表現的感念氣質，在色調和整體上視覺感知基本保持在同一水平線上，且足以突出主體，同時符合色彩搭配的理論基礎；

圖2:

在較為中性色調的畫面中，色彩的搭配使用最為頭疼，亮一點顯得亮，暗一點則會顯得深沉，在整體的色調基本保持一致的時候，文字使用純白色則是為了在較為和諧且稍微偏灰的畫面中起到點亮的作用，如果用無色系的較深的顏色則會讓整個畫面太過于深沉，且與主體想要表達的氣質不符，同時對圖形和背景添加些許的質感處理，讓整個畫面看起來更加的具有品質感；

無色并不是沒有色彩，在設計中無色系同樣發揮著不可忽略的作用，尤其是在大面積使用高飽和度和純度的畫面中或者是多色的搭配使用中，無色系可以很好的起到調和色彩和視覺感知平衡的作用；

新建一個畫布把主體圖形植入到畫面當中，在很多情況下可以根據所要表達感性概念詞去選擇色彩的大致范圍，然后進行局部的色彩調整油畫，同時也可以直接根據整個畫面和主體所要表達的情感進行色彩搭配，然后調整合適的背景色；

圖1:

為了讓整體的色調和視覺感知保持一致，背景色選擇一個高明度低純度的淺色以突出主體，同時把主體調整到版面中合適的位置為后續的文字編排留下相應的布局空間，從整個畫面的色調當中可以看出，如果要添加相應的合適色彩則會把整個畫面基本的情感和情緒弱化從而增加傳遞出色彩與色彩之間形成的其他情緒和感知，通常情況下大多人會為了色彩搭配而忽略這種微妙的感知認知；

圖2:

把圖形復制一層做相應的效果處理，使其自身的視覺效果得到提升，同時把文字信息植入到畫面當中，在背景淺且較亮的畫面中文字通常會使用無色系，這是為了保證畫面視覺效果和色彩情緒時使用無色系的色色彩作為調和整個畫面的視覺平衡，同時又能保證其基礎設定的情感表達和視覺預想效果，文字使用黑色時則會把整個畫面向外擴展的色感壓回到畫面當中形成一個黑色的壁壘，同時干凈利索的傳遞自身攜帶的信息；

色彩效果對比

在畫面主題顏色不變的情況下，只是調整文字的顏色對比之后可以看出，左邊的文字顏色雖然也是與整體色調較為符合，但就整體而言則會顯得輕浮一些，本身的理論依據并沒有太多問題，只是在視覺感知上面會讓人感覺沒有右邊的成熟穩重，看起來更加舒服；

在設計中色彩雖然變化多端，但除了理論依據之外，還有很多方式方法可以為我們的色彩使用提供幫助，主從原則就是色彩選擇使用最好的方式之一，同時也是設計師普遍使用的方式，其主要是根據設計的目的和主體進行的色彩搭配使用；

當我們拿到一個主題時，首先要先對主體的色調和視覺感知影響的情緒和情感變化做一下簡單的捕捉，然后結合最終預想的視覺效果進行色調的初步選擇和搭配的嘗試；

圖1:

主體所呈現出的色調則是紅藍多一些，在選擇背景時則基于紅色調或者紫色調的基礎上選擇一個高明度低純度的色，這樣可以更好的突出主體，同時還能與主體的色調融合在一起，在視覺上看起來也會舒服一些，然后適當的對模特進行簡單的修飾和處理，并調整到畫面中合適的位置，接著就是把把文字編排置入到畫面中并考慮其應該使用什么樣的色調以更好的貼合畫面和主體；

圖2:

文字的顏色同樣是基于主體的色調進行選擇，如果使用無色系則會讓整個畫面所傳遞出的氣質不倫不類且比較死板，而基于主體色調的基礎上主要考慮文字不被主體吃掉或者扎眼，也能很好的保持清晰的信息傳遞，在最底部加入與背景同色的橫條以最為文字的載體，整體文字色不僅可以與背景和主體融合在一起，同時也能與被其區分開獨立的保持信息的清晰傳遞，在主體色調不變的情況下可以在明度和純度上嘗試更多可能：

嘗試效果

在基于主體色的基礎上可以嘗試更多的配色方案，其視覺效果不僅可以讓畫面看起來更加舒服，同時也會有更多的可能，不管是調整明度，純度，色相都會有不同色視覺效果，最終則需要根據實際的表達需求而定；

在設計中很多情況下色彩起著決定性的作用，而色彩用的好不好除了色相與色相的搭配之外，更重要的則是對明度和純度的視覺敏感度，以及其對視覺感知所帶來的情緒和心理變化，色彩本身是感性，而對于設計師來說則需要通過感性的認知去理解色彩的情緒和心理。

文章來源于16創藝(id:yelloart)，作者Martin_K

?配色組合不會用？這里每一種組合色都有創意十足的作品案例，一起來好好欣賞這些美妙的設計作品！

（本文適用于：網頁設計師、平面設計師、數字插畫師和廣大設計愛好者）

1、黑與黃

明黃和和黑色是今年仍舊流行的組合，這種組合最大的視覺效果是抓眼球！明黃和黑色的組合而成的作品往往畫面簡練，中心突出，能引起讀者足夠的注意力。這種組合往往還會引入白色襯托，經典的黑白雙色配以叛逆黃，前衛、大膽！

2、藍與紅

這是一組非常經典和優雅的色彩搭配！完美的配色方案，是許多平面設計和插圖設計的首選！作為三原色的其中兩個(第三種是黃色)，藍色和紅色是鮮明的對比色，并以純色或中間混合成紫色的漸變完美地互補！

3、紫色與大粉色

一個非?，F代的色彩組合，代表著神秘感、敏感。在Panton色卡中，這兩種超級時尚的色彩組合現在非常受歡迎，并且廣泛應用在插圖、網頁設計、平面設計、應用程序設計中。如此令人震驚和強大的組合色，非常適合從事前衛、時尚類產品的設計師！

4、黑與白

黑與白是設計中最經典、最永恒的組合，任何時代、任何設計都繞不開這一組合帶來的高貴的視覺效果，它是全世界設計師和藝術家珍視的“色彩寶藏”。無論是手工藝術品、數字插畫、平面設計、網頁設計、印刷設計等等，它始終詮釋著：極簡主義！

5、灰與綠

網頁設計的潮流趨勢！這個充滿活力的組合色通常代表了高科技，也代表了創新和先進技術。不僅PC端，移動端也對它趨之若鶩。

6、珊瑚色與蒂爾色

一組對比鮮明的色彩組合，非常適用于數字創意設計，如創意插畫、創意圖形、網頁設計。這兩種顏色分開看，非常迷人，組合在一起，視覺效果會更加強烈。珊瑚色也是2020年主打的流行色，

7、黑與橙

與黑色和黃色的視覺效果相似，黑和橙也是一種超級陽光和充滿活力的色彩組合。清新的橙色很有吸引力。結合經典的黑白組合色，能生出十分和諧的構圖，給人以創新和創造力的印象。

國內排名靠前的幾個新興科技企業的app上都能看到黑色和橙色的組合色。

8、藍和橙

在色相環上，藍色和橙色是對比色，位于色相環相對位置的兩種顏色組合往往都能達到完美的對比度。作為2020年度八大最佳色彩組合之一，藍與橙表現出信任和樂觀，這使得它成為網頁設計和數字創意的寵兒。

非常歡迎您將這8大最佳流行色彩組合應用到您的設計作品中，也歡迎您將完成的作品在本文末分享給大家！也歡迎您將您組合出的流行色曬出來，為更多的設計師們帶來靈感！

作者 | Lyudmil Enchev
原文 | https://graphicmama.com/blog/the-best-color-combinations-to-try-in-2020/
編輯 | 設計達人（id:shejidaren888）
投稿 | 秀芳 | 運營設計師

黑色和黃色

霓虹黃和黑色是一種非常時尚的組合，顏色組合的成功是因為它能簡單地抓住用戶的注意力。經典的黑白兩色搭配輔以叛逆的黃色，讓這一組合呈現出令人驚異的前衛造型。

藍色和紅色

非常經典和優雅的配色，為許多圖形設計和插圖提供了完美的配色方案。作為兩種原色（黃色是第三種），藍色和紅色形成對比，且以純色或令人愉快的漸變的形式彼此完美地互補，在中間融變成紫色。

紫色和珊瑚色

一種非?，F代的顏色組合，以敏感和神秘的魅力。把這個組合的顏色命名為紫外線和盛開的大麗花（珊瑚色），現在已經很受歡迎了。我們可以從插圖、網頁設計、平面設計和移動app設計上看到它。

黑色和白色

最流行的顏色組合：黑色和白色。它在手工藝術品、插圖、圖形和網頁設計、印刷設計等方面顯得很優雅和雅致，它與極簡主義的視覺趨勢有著完美的關系。

灰色和充滿活力的綠色

一種非常充滿活力的色彩組合，特別是在網頁設計中非常流行，通常將這種顏色組合視為高科技，這對于應用程序設計也很常見。

 珊瑚色和藍綠色

一組對比鮮明的色彩組合，在所有類型的數字藝術設計（插圖，圖形和Web構圖）上看起來都非常令人愉悅。兩種顏色本身看起來都令人贊嘆，當它們組合在一起時，它們的效果會進一步增強?？紤]到“活珊瑚”是今年的顏色，這種組合現在很受歡迎。

 黑色和橙色

類似與黑色和黃色，黑色和橙色是一種樂觀和充滿活力的色彩組合。清新的黃色吸引人的感覺。結合經典的黑白配色方案，設計師可以創造出和諧的構圖，給人以創新和創意的印象。

藍色和橙色

藍色和橙色在色輪上放置正好相反，這有助于它們在設計中使用時獲得完美的對比度。流行的色彩組合在傳遞信任和樂觀的同時，也使得它在網站設計和數字藝術中非常受歡迎。

原文地址：小阿田的設計筆記（公眾號）

作者：小阿田的設計筆記

Photo by George Becker from iconscout

我們身處在一個多彩的世界中，物體的不同顏色，會讓我們產生不同的情緒。色彩會影響人們的身心，強烈的紅色會使血壓升高，而藍色則使人冷靜。

設計UI界面時，色彩是影響用戶最簡單和最重要的一個因素。很多人認為UI界面色彩的選擇取決于設計師的品味和審美。然而，顏色的選擇過程比它看起來要復雜的多，在設計中扮演著重要的角色。

可以用顏色來營造一種情緒、吸引注意力或作出強調，用色彩調動人的情緒或使人冷靜下來。通過選擇正確的配色方案，可以營造一種優雅、溫暖和平靜的氛圍。

色彩的選擇是基于色彩心理學和色彩理論的，下面就詳細介紹一下這塊的內容吧。

色彩心理學

男性和女性的色彩偏好是不同的，不同年齡群體的色彩偏好也是不同的。

根據 JoeHallock的研究，不同性別的色彩選擇有天壤之別。研究旨在發現不同色彩的偏好程度，從最喜歡的色彩到不那么喜歡的色彩分別所占的比例。

不同性別的色彩偏好

如上圖，男女都格外喜歡藍色，而對棕色的喜愛程度最低。

以一個APP案例來說明

這款APP的目標是管理成本，用戶包含男性和女性。先假設一個不了解色彩的初學者，選擇棕色作為APP的主色，因為棕色是他最喜歡的顏色。 結果如下：

成本管理APP

如圖，雖然設計還行，但由于色彩的選擇，APP可能無法正常使用。 那如何優化呢？ 本文稍后的部分中，將介紹如何僅通過色彩的改變來優化整個APP。

配色的價值就來了，設計師需要了解色彩的含義和影響，以傳達正確的語氣、信息并引導用戶做出預期的行為。 每種色彩都會對我們的思維產生影響，了解可能的影響可以幫助設計師傳達正確的信息、引導用戶行為。

作為一個設計師，你需要了解色彩的含義，這里只是簡要介紹，詳細內容請參考 http://www.color-wheel-pro.com/color-meaning.html

色彩理論

1.色環

設計界面時，有很多色彩可以使用。首先，要提到的是色環。

著名的色環

另一個重要的話題是配色。配色有很多方法，但暖色和冷色應該平衡。下面是幾種配色方式：

互補色、鄰近色、三色組、分裂互補色、矩形（雙分裂互補色）、正方形

每個設計師都應該知道色彩的三個屬性：色相、明度和飽和度。 Christian Vizcarra對色彩的屬性描述非常詳盡，本文借鑒了其相關內容。

2.色相

色相是自然狀態下的色彩。比如藍色、黃色、綠色和紅色等等，沒明暗的變化。簡言之，色環上沒有改變明暗的色彩。如下圖：

3.明度

明度，指色彩的明暗度。以自然界為例，一些物體在早晨和晚上的色彩不同。如樹木和山脈，早晨色調淺；傍晚因為光線減少了，色調變得偏暗。

Photo by Nextvoyage from iconscout

距光源越近的物體，明度越高，反之，則明度越暗。明度在UI設計中扮演重要的角色，明度運用得好，可以實現好的對比效果。

明度達到100%時，色彩就會變成白色；明度是0%時，就會變成黑色。如下圖：

色彩的明度

4.飽和度

飽和度是色彩的純度。增加飽和度，色彩會變得更強烈、鮮艷生動；降低飽和度，色彩會變得暗淡乏味。

色彩飽和度

使用飽和度前，需要知道設計的載體，印刷還是電子媒介。為印刷設計時，飽和度不能過高，因為印刷使用的CMYK模式，有一定的局限。

UI設計中的色彩

黃金比例——6：3：1原則。

60%+30%+10%的原則，是達到色彩平衡的最佳比例。在60%的空間使用主色，30%的空間使用輔助色，最后剩下10%的空間為另外一種色彩。這樣可以使用戶眼睛從一點移動到下一個點時，非常舒服。

使用6：3：1原則的調色板

UI中的陰影

沒有完全純黑的陰影，陰影的顏色是會受到物體本身固有色的影響，如下圖所示。

Photo by Brigitte Tohm from iconscout

櫻桃的陰影是深紅色，看起來幾乎是黑色，但并不是純黑色。比如還有花兒、盤子和華夫餅的陰影，都不是純黑色的。光和環境決定了陰影的顏色。

UI設計的一個常見錯誤是使用半透明的黑色作為陰影。

UI元素的陰影

字體色彩

如今大多數的界面都是白色的，目的在于盡可能地簡化界面聚焦內容本身，所以字體排版就成了一個非常重要的元素。

左邊的文本顏色是純黑色 (# 000000），右側的色彩看起來是黑色的，但其實是加入了藍色的黑色，變成了藍黑色 (# 181441）。字體色彩在大多數白色的界面中，非常重要，如下圖：

相同透明度下，兩種色彩的對比

相同透明度下，兩組文本字體顏色不同，效果不同。一組是灰色的，另一組是藍灰色的，不同色調的文本對界面有顯著的影響。如下圖：

使用黑色和灰色，很糟糕嗎？不是。人們常說“黑色使一切很酷”，所以這取決于個人的感受。在使用顏色時，考慮到色調，就可以實現更好的對比和協調。

成本管理APP的優化

改為綠色后，APP看起來好多了。因為我們需要在這款App中表現出對于金錢和增長的強烈情感愿望，而綠色描述了金錢和金融世界，男女都同時喜歡綠色。

（譯者注：在國外綠色代表股市上漲，所以對于他們來說，關于金錢的應用才用綠色會更加合適。顏色的使用更貼合使用人群，對體驗來說才會更好，顏色也就變得更加有依據。）

以下是修改后的對比：

比之前看起來好多了是么？ 希望是的。如您所見，只需要關注色彩的一些小細節，就可以設計出高效的用戶界面。

原文鏈接：https://medium.com/iconscout/colors-in-ui-design-theory-psychology-practice-f6d6a5e6e04d

作者：Dalsukh Tapaniya

翻譯：Bravert