網(wǎng)易UEDC – 熊貓 :?你好色嗎？我相信大家都是好色的，只是每個(gè)人好色的程度不一樣罷了。有些老司機(jī)會天天開火車，你會跟不上他的節(jié)奏。那其實(shí)配色也是一樣，每個(gè)人對色彩的敏感度不同，配色弱一點(diǎn)的同學(xué)總是不敢用色，也可能不知道為什么用這樣的顏色？那么，讓老司機(jī)熊貓帶你上車，探索你不知道的色彩密碼！

首先我們來看一個(gè)顏色

當(dāng)我們盯著它看10秒再看白色的地方，會有什么不一樣？有沒有出現(xiàn)一個(gè)新的顏色呢？

是不是出現(xiàn)了這么一個(gè)顏色的殘影，那么為何會這樣？因?yàn)槲覀兊难劬π枰吹酵暾臇|西，當(dāng)視覺受到一定刺激后，心理產(chǎn)生了平衡這個(gè)色彩的渴望，需要通過看到的顏色的互補(bǔ)色來平衡你的心理需求。

平衡的色彩關(guān)系是心理和生理的渴望

上圖中圖1這個(gè)畫面中只用了一個(gè)紅色系，而且都是暗紅色，畫面就會變得陰森、恐懼和詭異；而圖2運(yùn)用到了我們的生理補(bǔ)色，整個(gè)畫面就會變得美觀、自然和舒適。

如何才能做帶色彩平衡

1. 冷暖色的平衡

什么是絕對冷暖

絕對冷暖就是你一眼就能看出這個(gè)顏色的冷暖差異。比如偏紅的是暖色，偏藍(lán)的是冷色，這是我們最常見的晚霞，我們會覺得很美，他是天然的冷暖色平衡。所以冷暖色的搭配符合自然平衡的規(guī)律，也會影響你的心理情緒。

那么我們在設(shè)計(jì)與繪畫中將冷暖色分為三種色調(diào)：

• 暖色調(diào)分為紅橙黃
• 冷色調(diào)分為青色、藍(lán)色
• 紫色和綠色相對中性，因?yàn)樗麄兤渑恼{(diào)性不強(qiáng)，紫色介于紅藍(lán)之間，綠色介于黃藍(lán)之間。

案例1

△ 圖1：情感失衡； 圖2：冷暖色平衡合理

冷暖色的搭配是情感的表達(dá)。我們有意識的去將畫面進(jìn)行冷暖平衡搭配的時(shí)候，我們的視覺就能得到滿足。而其中的比例關(guān)系需要我們根據(jù)情感去調(diào)整，如果我們需要一種個(gè)性張揚(yáng)的冷暖配色。那我們就把各自的比例放大。

大面積的使用冷暖對色會使情感更加夸張，通常我們使用飽和度比較高的冷暖搭配會使產(chǎn)品變得很炫酷。

案例2

這是我在一家餐廳門口看到的易拉寶，先不說他字體排版的問題，我們看到他想突出的內(nèi)容是什么？

他把最重要的信息忽略了，因?yàn)樗驯尘坝昧伺?，然后想突出「砍」和「省」字，加了一個(gè)大紅色，這是我們設(shè)計(jì)中最忌諱的配色，在一個(gè)暖色上加了一個(gè)更暖的顏色，會讓你的畫面看不清，如果你對顏色的敏感度不高，在冷暖搭配中運(yùn)用不好，那我這有個(gè)小技巧——暖前冷后搭配法。

畫過色彩油畫的同學(xué)應(yīng)該都知道，每一個(gè)顏色都是有冷暖的，會有冷色的紅，也有暖色的青。這是我10年前畫的一副色彩，當(dāng)時(shí)老師就說，你前面的物體畫暖一點(diǎn)，后面畫的冷一點(diǎn)，你們有發(fā)現(xiàn)嗎？

其實(shí)設(shè)計(jì)也是一樣的，我們在做設(shè)計(jì)時(shí)，也需要做冷暖對比的平衡原則，冷暖對比并不是說一個(gè)紅就一定要一個(gè)藍(lán)色去撞色，那是一種比較強(qiáng)烈的冷暖對比，剛剛講的絕對冷暖是一個(gè)大環(huán)境，相對冷暖是顏色的細(xì)節(jié)冷暖。

這是我工作中做的一些設(shè)計(jì)稿。運(yùn)用冷暖配色，背景為冷色，前景是暖色，這樣我們的信息可讀性會更強(qiáng)。

什么是相對冷暖

我們來看一下Ps的色相盤，最中間的是青色，也就是這個(gè)色盤的冷極點(diǎn)，當(dāng)上面的紅色往下走的時(shí)候是越來越冷的，走到了冷極點(diǎn)后，在往下走是越來越暖的。所以上面的紅色是偏冷，也就是冷紅，下面的紅偏暖，也就是暖紅。

我們來看一個(gè)案例來說明一下。

△ 淘寶的兩個(gè)入口按鈕

當(dāng)我們?nèi)ノ档臅r(shí)候發(fā)現(xiàn)：紅色是偏冷的紅，藍(lán)色是偏冷的藍(lán)。所以有些同學(xué)在做設(shè)計(jì)時(shí)一些細(xì)節(jié)上的顏色會不在一個(gè)調(diào)子上面，這時(shí)候你要檢查一下，同一個(gè)屬性里面是否都在一個(gè)色調(diào)里面，除非你是要突出某個(gè)東西刻意去做的不一樣。

小結(jié)：冷暖色是情感傾向的表達(dá)，平衡視覺心理。不同的主題適合不同的冷暖，過冷或者過暖都會導(dǎo)致情感失衡。

2. 互補(bǔ)色的平衡

互補(bǔ)色，是我們最常見也是用的最廣泛的配色。色環(huán)180°左右的兩個(gè)色區(qū)為互補(bǔ)，注意是180左右，因?yàn)轭伾遣唤^對的。

案例1

當(dāng)我們會設(shè)計(jì)海報(bào)時(shí)，做成這樣已經(jīng)覺得還不錯(cuò)了，可能你覺得這樣的配色很舒服，但是你想表達(dá)什么？是好好吃飯？還是袋鼠的眼睛？

當(dāng)一個(gè)顏色在畫面中過多時(shí)就會造成缺失感。我們很多同學(xué)在做推廣的時(shí)候，經(jīng)常會遇到這些問題，需求要你突出產(chǎn)品還是文案，還是兩者都要突出，在這些推廣中，如果都是屬于張揚(yáng)的畫面，我們會將背景與產(chǎn)品文案用互補(bǔ)色平衡的方法，調(diào)節(jié)你補(bǔ)色的明度和飽和度，這樣你的頁面會很跳。

案例2

在這個(gè)畫面中其實(shí)沒有大問題，他用黑色去平衡畫面，黑白灰的平衡我們后面會講到。

我們只要看畫面的視覺沖擊，如果使用互補(bǔ)色會怎樣？我們看到紅綠色版本的視覺沖擊會更強(qiáng)，更有張力！所以當(dāng)我們再設(shè)計(jì)一些品牌推廣的時(shí)候，需要搶占用戶的眼球，這時(shí)候用互補(bǔ)色的平衡對比，大膽使用顏色，利用飽和度、明度去嘗試能讓你的畫面產(chǎn)生不一樣的效果。

案例3

△ 暖紅與暖綠的互補(bǔ)

小結(jié)：互補(bǔ)色能補(bǔ)充色彩情感表達(dá)的缺失感，調(diào)節(jié)互補(bǔ)色的明度、飽和度能改變情感的走向。

3. 深淺色的平衡

說到深淺色用的最多的地方是漸變，漸變是為了讓畫面更加通透和具有層次感。但漸變也是要講究色彩的韻律，它不是隨意的。

案例

之前很火的一款游戲叫紀(jì)念碑谷，這款游戲用到了很多深淺色的配色方法來豐富畫面的層次。

我們把這類深淺稱為單色深淺，只需調(diào)整他的明暗就可以做出不同程度的漸變了。這樣我們在單色里可以做到不同的層次關(guān)系和明暗關(guān)系。

單色深淺

我們可以制作一個(gè)深淺的調(diào)色板，從5%-100%的一個(gè)亮度調(diào)色板。

比如，我們在制作按鈕的狀態(tài)時(shí)也是如此。我們可添加10%亮度得到一個(gè)hover的狀態(tài)，降低10%明度得到一個(gè)點(diǎn)擊狀態(tài)，如果10%不夠，那就20%。切記深淺平衡并不是說用透明度去調(diào)，這樣很不專業(yè)而且顏色會偏離。

案例

深淺色運(yùn)用的地方很多，比如我們的Ps和Ai。左深右淺、背景深、文字淺，這樣的一個(gè)對比關(guān)系能拉開信息的層次。

多色深淺

一些家裝設(shè)計(jì)的色彩搭配也能運(yùn)用到設(shè)計(jì)上，通常我們用相鄰色的不同深淺去搭配，比如黃綠色。

△ 無印良品的紅金搭配

小結(jié)：深淺色調(diào)節(jié)畫面的節(jié)奏感，是畫面層次更加豐富；通過調(diào)節(jié)色彩的明度，拉開主次關(guān)系，突出重點(diǎn)。

4. 黑白灰的平衡

案例1

大衛(wèi)石膏像，畫過素描的同學(xué)應(yīng)該知道黑白灰在素描中的關(guān)系。一個(gè)完整的畫面中，是應(yīng)該出現(xiàn)黑白灰的三種平衡關(guān)系，最亮和最暗是這個(gè)畫面中最極端的那個(gè)點(diǎn)，灰色則是綜合黑白之間的比例。那么設(shè)計(jì)中如何平衡黑白灰呢？

我們將RGB的色盤調(diào)成灰度模式。發(fā)現(xiàn)藍(lán)色是最暗的，青色和黃色是最亮的。越靠近藍(lán)色就越黑，越靠近黃色和青色的色系就越亮。

我們把紅黃藍(lán)綠放在黑色上對比，效果是很明顯的。黃色是最亮的，然后是綠色，紅色偏灰，藍(lán)色就很暗了。

案例2

當(dāng)一個(gè)畫面產(chǎn)生多種顏色的時(shí)候，除去中性色，你就可以利用這個(gè)平衡法則，三種顏色是處于黑白灰的穩(wěn)定關(guān)系。

案例3

同樣，看這個(gè)畫面，這個(gè)畫面看似顏色很多，好像很復(fù)雜的樣子。

除去中性色之后，其實(shí)藍(lán)色是最暗的，青色是最亮的，他在做一個(gè)漸變的是時(shí)候是按照黑白灰平衡的原理，所以漸變出來的顏色不會亂，很有韻律，所以它的配色也是成立的。

案例4

我們回到之前互補(bǔ)色的這個(gè)畫面，我們用黑白灰的平衡法測試一下看是什么樣的效果？

我們發(fā)現(xiàn)紅綠都是灰色的。因?yàn)楫?dāng)你直接用紅綠互補(bǔ)的時(shí)候，畫面會很刺眼，辣眼睛對吧。這時(shí)候我們需要中性色黑白的介入去控制畫面的平衡，這樣的紅綠互補(bǔ)才會成立而且更美觀。

比如我用這個(gè)案例給你解釋一下：

當(dāng)我再綠色上面加個(gè)紅色。哇，是不是非常的辣眼睛、刺眼、難受。當(dāng)我加上黑白之后，這個(gè)辣眼睛的程度是不是被削弱了。

小結(jié)：黑白灰的平衡能有效把控色彩的穩(wěn)定，能控制互補(bǔ)色的不平衡。

小技能：利用灰度模式可以檢測畫面的黑白灰層級關(guān)系和比重。

那么問題來了！你可能覺得這些都要出現(xiàn)在畫面里嗎？是不是要一定要用絕對的互補(bǔ)色？是不是都是要大面積出現(xiàn)？我只能說每個(gè)概念都是相對的，因?yàn)樯适莻€(gè)感性的東西，我們要根據(jù)我們的產(chǎn)品、需求來賦予他們該有的色彩。我們需要不斷的去看、去摸索、練習(xí)！

沒有不好的顏色，只有不好的搭配

色彩是設(shè)計(jì)中最具有表現(xiàn)力和感染力的因素，它通過人們的視覺感受產(chǎn)生一系列的生理、心理感受，喚起用戶不同的情緒。

歡迎關(guān)注作者「網(wǎng)易UEDC」的微信公眾號：

「還有這些神器也能讓你學(xué)配色」

• 《缺少靈感？自動生成上千款熱門配色色板的Coolors》
• 《講真，這可能是目前最全的在線配色工具合集了》
• 《收藏這7個(gè)在線配色神器，再也不愁配色靈感了 ！》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com