為設計師寫的色彩對比指南，讓你真正了解色彩對比

可以說我們每個人每天無時無刻都在和顏色打交道，作為一名設計師，對顏色更是敏感。色彩的搭配影響著每個作品的成敗，所以對於設計師來說，深入了解色彩掌握色彩搭配是一門重要的功課。

色彩是豐富多彩的，每一種色彩代表著不一樣的心理和情感，不一樣的色彩體現的情感讓人們在視覺上心裡上的作用都不一樣。不一樣的顏色碰撞也會給人們產生不一樣的心理感受，這是色彩心理學教會我們的。色彩對比在生活中起著舉足輕重的作用，所以我們要去深入的了解色彩對比的更多信息內容。包括色彩是什麼？什麼樣的色彩搭配讓人振奮人心？什麼顏色組合對比是禁忌的？……了解完這些知識後，你就能明白什麼顏色搭配組合能讓客戶或受眾滿意。

一、色彩對比的基礎知識

不同的顏色可以表達不同的感受，顏色上的對比也有很多，這個跟色彩構成有很大的關係。色彩對比的基礎知識主要給大家講講幾個重要的對比方式：色相對比、明度對比和純度對比。

1、色相對比

色相即各類顏色色彩的相貌稱謂，任何黑白灰以外的顏色都有色相的屬性。如朱紅、普藍、檸檬黃等。色相是色彩的首要特徵，是區別各種不同色彩的最準確的標準。

色相環是由原色、二次色和三色色組合而成（可看標準24色相環）。色相環中的三原色是由紅、黃、藍，在環中形成一個等邊三角形。二次色是橙、紫、綠，處在三原色之間，形成另一個等邊三角形。

紅橙、黃橙、黃綠、藍綠、藍紫和紅紫六色為三次色，三次色是由原色和二次色混合而成。

根據上面的色相環可以看出色環上的顏色是多豐富多彩，隨意抽取兩個顏色，都能形成不一樣的對比。因此色相對比又分很多，有補色對比、對比色對比、鄰近色對比等等。

（1）互補色對比

在色相環的組成中，相隔 180 度的色彩我們稱之為互補色：紅與綠互補，黃與紫互補而藍色與橙色互補。互補色的對比效果強烈、眩目、響亮、極有力，但也需要慎用，因為使用不當易產生幼稚 、原始、粗俗、不安定、不協調等不良感覺。

一般在設計作品中，比較少的設計師會採用互補色來做作品的配色，因為互補色在實際應用中把握不好的話比較危險，容易讓人產生不舒服、不協調的不舒適感。也有不少優秀的設計師將互補色運用得非常出色。以下這些知名的標誌設計就採用了互補色來搭配的：

（2）鄰近色對比

鄰近色對比好理解一些，好比黃色跟橙色可以稱為鄰近色，草綠和果綠也可稱為鄰近色。色相環上相鄰的二至三色對比，色相距離大約30度左右，為弱對比類型。鄰近色相對比效果感覺柔和、和諧、雅緻、文靜，但也會讓人感覺單調、模糊、乏味、無力，所以必須調節明度差來加強效果。

鄰近色之間往往是你中有我，我中有你。比如：朱紅與桔黃，朱紅以紅為主，裡面略有少量黃色；桔黃以黃為主，裡面有少許紅色，雖然它們在色相上有很大差別，但在視覺上卻比較接近。在色輪中，凡在90度範圍之內的顏色都屬鄰近色的範圍。

（3）對比色對比

色相對比距離約120度左右，為強對比類型，要比鄰近色相對比鮮明、強烈、飽滿。豐富，容易使人興奮激動和造成視覺以及精神的疲勞。如黃綠與紅紫色 對比等，但是顏色之間協同統一的工作也比較難做。這種對比不容易單調，但一般需要採用多種調和手段來改善對比效果，不然就容易產生雜亂和過分刺激的效果。

（4）零度對比

零度對比其實也分了幾塊，比如無彩色對比、無彩色與有彩色的對比、同種色相對比和無彩色與同種色相比四種，這塊只要理解下無彩色的概念即可。

無彩色指的就是沒有色相的顏色，前面小編說的顏色都有色相，但黑白灰這三種是沒有色相的，所以也被稱為無彩色。

無彩色對比：如黑與白 、黑與灰、中灰與淺灰，或黑與白與灰、黑與深灰與淺灰等。

無彩色與有彩色的對比：如黑與黃、白與藍等。

同種色相對：如藍與淺藍（藍+白）色對比，橙與咖啡（橙+灰）或綠與粉綠（綠+白）與墨綠（綠+黑）色等對比。

無彩色與同種色相比：如白與深藍與淺藍、黑與桔與咖啡色等對比。

2、明暗對比

明度指的就是色彩的亮度。比如：深黃、中黃、淡黃、檸檬黃等，這些黃顏色在明度上就不一樣。顏色有深淺、明暗的變化，這些顏色在明暗、深淺上的不同變化，也就是色彩的明度變化。

兩種以上色相組合後，由於明度不同而形成的色彩對比效果稱為明度對比。它是色彩對比的一個重要方面，是決定色彩方案感覺明快、清晰、沉悶、柔和、強烈、朦朧與否的關鍵。

可以看到，明度變化裡面也有低中高明度區分的。

Digital Asset 數據產品網站和POCARI SWEAT這兩個網站都採用了明暗對比來設計的。

在POCARI SWEAT網站的界面當中，右邊的深藍色顯得比較穩重，左邊導航部分採用一個明亮的藍色，左右兩邊形成了鮮明的對比，這樣的界面穩重中又帶著輕快，視覺效果也比較好。

3、純度對比

純度指的是色彩的鮮艷和深淺程度。純度是色彩鮮艷度的判斷標準，純度最高的色彩就是原色，隨著純度的降低，色彩就會變暗、變淡。

純度指的就是飽和度，檸檬黃的純度是比較高的，當加入一點紅色之後就變成橙色，因而檸檬黃和橙色就形成了純度上的對比。兩種以上色彩組合後，由於純度不同而形成的色彩對比效果稱為純度對比。它是色彩對比的另一個重要方面，但因其較為隱蔽、內在，故易被忽略。在色彩設計中，純度對比是決定色調感覺華麗、高雅、古樸、粗俗、含蓄與否的關鍵。

純度變化裡面也有低中高純度區分。

純粹純度上的變化案例比較不好找，因為顏色到低純度之後顏色本身就變得很臟，色彩本身也不好看。所以很少設計師會去做純粹純度上的變化，一般都是結合明度變化加純度變化。

James Gillen-詹姆斯吉倫設計師個人網站，從界面疊加的玫紅色當中可以看到中純度的玫紅和一些比較低純度的，界面的整體衝擊力還是比較強的。

後面的純度和明度可能比較容易混淆，純度指的是顏色的飽和度，明度指的是顏色的明暗程度，這樣說可能比較好區分。

二、如何選擇最佳的色彩搭配

關於色彩對比的重要性，其實不用說應該大部分設計師都知道。色彩對比為受眾提供了視覺上的享受。我們可以試想一下，如果整個設計作品都是一個顏色，或者都是一個色系的，那這個作品拿出來得多無聊。

強烈的色彩對比可以比較抓人眼球，特別是在超市的貨架上，我們往往很容易被一個色彩對比明顯的包裝所吸引。網頁的界面設計也是，我們更加容易被色彩絢爛，對比明顯且好看的界面所吸引。

列舉的三個網頁界面截圖，第一個注意到的其實是最後一個，比較抓眼球，這樣的色彩對比讓受眾有所期待，對該產品或者網站印象深刻。

我們在給一個作品配色的時候，我們會選擇多種的配色方案，根據上面介紹的色彩基礎知識，我們可以分成：

1、單色配色

單色的配色很簡單，這樣的界面通常相對比較單調。簡單舉個例子，我將色環上的顏色排列成一行，方便對比查看：

Nineswiss這個網站設計，採用了單色設計，界面效果比較單調。所以一般情況下我們建議採用單色的時候，可以多用幾個同色系的顏色來協調，這個可以採用相關的純度明度變化的顏色。例如：

LOHBS的這個網站，雖然採用了橙色來做主色，同時利用了其他一些純度明度上變化的顏色來豐富界面。當然，也用到了部分的鄰近色，比如黃色。但是這種配色方案可以增加視覺的衝擊效果，增加畫面的豐富性。

2、互補色配色

互補色的使用，前面說過了，衝突性會比較強，所以使用中需要謹慎。

運用要領：互補色， 75％+25％+ 5％。

由於互補色之間的對比相當強烈，因此在實際運用過程中，配色的比例相當的重要。詳見下圖：

當兩個互補色出現在畫面當中的比例各為50%的時候，畫面的衝突性比較大，這樣的配比對比是及其不舒服的。當橙色佔三分之一和四分之一的時候會比之前二分之一佔比的視覺效果要好很多。最後一個圖在互補色中間加了一個白色做協調，使得整體的過渡更加柔和，這樣的搭配是最舒服的。

在實際的運用過程中，我們可以選擇其中之一的顏色為大面積，構成主調色，而另一顏色為小面積作為對比色。日本的設計師 まりっぺ也針對色彩的配色提出比例原則 75％、25％與 5％ 的配色比例方式 ，這個原則跟上面說的一致，兩個互補色各佔75%和25%，剩下的用5%的過渡色來做畫面的協調色，使得主次分明。來看看實際應用中的作品：

奧塞梯餡餅的官網就是用了紅綠互補色的對比設計的。綠色的佔比面積比較少，中期用了大量的黃色做協調，整個網頁界面非常的出色。

3、鄰近色配色

鄰近色配色這個方案用得比較多，因為鄰近色有相似的顏色特點，但又各有特性，所以這樣的搭配方式比較受歡迎。比如黃色、橙色、紅色的組合使用，綠色和藍色的組合搭配。下面列舉部分常用的鄰近色搭配方案：

以上列舉的都是3種的鄰近色搭配，在實際應用中切勿平均比例去應用，這樣出來的界面效果一定不好看。具體比例的建議可以一個大的為主其他兩個顏色為輔助色做點綴。

這裡沒有列舉到紫色，不是說紫色不常用，紫色在多數網頁當中出現都是比較特殊的，鄰近色上比較搭配的是藍色和紅色，但是一般紫色出現的佔比面積大的時候，藍色和紅色一般佔比面積會比較小，這個就不單獨拿出來講解了。

Kresko食品網站應用了鄰近色的對比，黃色的界面中添加了橘色和紅色，鄰近色的運用會讓整個頁面比較協調，看起來也比較舒服。

4、零度對比配色

從上面講解的零度對比分很多種，常見的有無彩色對比、無彩色與有彩色的對比、同種色相對比和無彩色與同種色相比四種。常用的基本是無彩色與有彩色的對比。

零度對比的配色比較個性，給人一種比較冷酷的視覺感受。無彩色雖然無色相，但它們的組合在實用方面很有價值。其中無彩色和有彩色的搭配使用會比較出色，如果是使用無彩色的話，建議跟有彩色搭配比較好。

MINI 5-DOOR HATCH這個網頁就是採用了無彩色和有彩色的對比，整體畫面色彩對比特別明顯，容易彰顯個性和主題。黑色的底色、白色的字體和灰色logo，無彩色的黑白灰都運用到了。有彩色選用了藍色，比較明亮，也跟產品的顏色相呼應。在整個畫面當中，倘若沒有藍色出現，畫面會變得枯燥單調，加入藍色之後，整個畫面鮮活起來了。

NewsTech設計公司這個網站採用了無彩色的對比，整個界面都是用了黑白灰來表現，一般這種界面都會顯得比較冷酷和個性，但看久了也會覺得有點單調。這個界面在黑白灰的處理上做得特別好，通常只用黑白灰來表現主題難度很大，因為對於界面的黑白關係不好掌握，也不好凸顯主次關係，但這個界面真是小編覺得推薦的一個，界面的主次關係很明顯，在點線面的處理上可以看出設計者花了不少心思。

5、漸變配色

這兩年，相信大家都打開網站，看到不少帶有漸變色的界面效果，而這種效果也讓很多人驚艷到。漸變色給人豐富的視覺感受，同時也能表達豐富的情感體驗。

漸變色有很多方式，比如中心漸變、對角漸變、垂直漸變、水平漸變、雙漸變或是多色漸變。前面說的四種漸變比較好理解，我們在ai、ps裡面看到的漸變色面板，主要就是上面說的這幾種。具體區分可以參照下圖：

漸變色在網頁當中的運用表現在很多方面，可以是整體色繫上的漸變，也可以是一個小元素的漸變，不管是哪種方式的漸變，只要使用恰當，那對網站來說，便是錦上添花。

像即時通訊喧喧的官網一樣，也是採用了漸變色的背景，整體簡潔又豐富。這樣的表現形式比較常見。

6、其他配色

其他配色這個使用性也比較廣泛，很多設計師不受前面幾種顏色的設定，更加自由的選擇對應的顏色搭配。

蟬知官網這個例子，主色調採用了綠色，但是界面中可以看到有紅色、黃色的局部元素出現，整體界面也活潑一些。類似的例子還有很多，這些網站會採用較多的色彩來做對比，活躍整個界面。

配色過程中需要注意到的一些常見問題：

1、文字的可讀性

在顏色對比的使用過程中，一定要注意文字的可讀性。切勿用互補色來處理文字，因為看上去會很不舒服。

運用要領：深色背景上用淺色字，淺色背景上用深色字。

可讀性，是任何設計的必備要素，也是比較重要的一個要素。所以設計師在設計的時候，應該考慮到顏色對文本閱讀的影響，設計上的處理也要跟注意一些。

2、顏色不是用得越多越好

在實際運用過程中，切勿顏色使用過多，顏色多了就容易給人雜亂感，且沒有美感。

三、每位設計師都需要知道的

全球約有8％的男性患有某種形式的色盲。這種情況在女性中比較罕見，但每17名色盲患者中有1人是女性。總共有4.5％的世界人口看不到世界其他地區的所有顏色。這個比例雖然小，但是作為一名設計師，我們也要考慮到這種特殊情況，我們希望我們的每一個作品所有人都能正常的訪問或者能正常的呈現出來。

簡單舉個例子，紅綠色盲也是常見的一種色盲人群，我的弟弟就對分不清綠色。這樣一類人，意味著世界上任何含有紅色/綠色的物體都不會正常呈現。例如，一個具有紅色/綠色盲症的人會將紫色視為藍色。這是因為他們無法看到有助於區分紫色和藍色的紅色。

您可以想像，這使得選擇完美色彩對比的過程更加困難。如果您選擇綠色作為主要背景顏色，甚至選擇字體顏色，則4.5％的預期觀眾可能無法準確查看所有內容。他們甚至可能根據您選擇的色調和色盲程度有多嚴格，甚至無法閱讀這些詞。

所以，當我們在設計作品的時候，要先確定好我們的受眾人群，在配色的時候，需要再著重考慮到這些特殊人群的存在性。

四、建議

設計不是一下子就能立馬進步的，它是個循序漸進的過程，需要積累需要練習。也許今天給大家介紹的這些方法還不能滿足大家，配色方案如果上面列舉的幾種常見配色方法還不能給大家啟發，那再給大家推薦幾個配色網站以供參考。沒有思路的時候可以去配色網站上找點靈感，下面這幾個是國外知名度比較高的跟配色相關的網站。

Paletton，幫助平面設計師和網頁設計師選擇理想的配色方案，打開網站即可選擇一種顏色，然後系統自動生成配套的色系供設計師使用。

Adobe color cc，Adobe官方配色網站，你輸顏色它出配色。

Color Palette Generator，製作配色方案。輸入圖像的URL以獲得與圖像匹配的調色板。這對於根據圖片來定網站色調的比較好用。

Color Scheme Designer，Color Scheme Designer 後來改名成Paletton，是小編用得比較頻繁的配色網站。使用時只用開一個窗口，功能完備且實用，定製性強，幾乎無缺點，非要說一個的話就是複製RGB值不太方便。

Nippon Colors，這個網站沒有前面幾個推薦的配色網站好用，實用性不是很高。但是這是小編不得不推薦的，這個絕對是文藝范十足。

配色網站就介紹這麼多，之前小喬還整理過一篇：網頁設計師常用的一些工具素材合集的工具文，應該對大家有所幫助，更多設計相關的內容也歡迎大家關注小喬設計的個人博客。