關(guān)于配色的書(shū)籍與理論有很多，但是大多數(shù)人可能還是停留在“道理我都懂，可是手就是不會(huì)”的階段，而本文就結(jié)合實(shí)踐分享五個(gè)實(shí)用技巧，幫助大家做出更好的配色。

在之前，配色一直都是我的弱點(diǎn)，而且會(huì)在這方面糾結(jié)很久，每次交稿的時(shí)候，總會(huì)被甲方噴成一坨屎，我覺(jué)得他說(shuō)的很有道理，于是我花了很多時(shí)間在網(wǎng)上學(xué)習(xí)，然后，我的配色可能比坨屎好了點(diǎn)?。?！

因?yàn)槲铱吹降亩际且恍杭t色代表激情、活力；藍(lán)色代表科技、冷靜；綠色代表健康、生機(jī)；橙色代表溫暖；還有鄰近色，互補(bǔ)色等等。

這些理論理論有用嗎？答案是肯定的，但我覺(jué)得這種理論看幾遍也就夠了，看多了反而會(huì)很茫然，畢竟實(shí)踐才是王道。

顏色認(rèn)知這一塊我也就不做過(guò)多的闡述了，網(wǎng)上的文章有很多，也可以在文章底部獲取配色書(shū)籍，里面講的可以說(shuō)是非常全面了。

下面我會(huì)分享5個(gè)總結(jié)下來(lái)的實(shí)用技巧給大家：

1. 顏色模式的選擇
2. 永遠(yuǎn)不要使用純黑
3. 不得觸碰的禁區(qū)
4. 遵循60 : 30 : 10的的配色原則
5. 巧用別人的顏色

文章最后還會(huì)給大家安利幾個(gè)配色網(wǎng)站和一些經(jīng)典的配色書(shū)籍。

一、顏色模式的選擇

很多設(shè)計(jì)師通常是使用RGB顏色模式進(jìn)行調(diào)色，我之前也是一樣，好看不好看全靠感覺(jué)，當(dāng)有一天了解到HSB這個(gè)模式后，就愛(ài)上了，而且非常好掌控，做幾個(gè)對(duì)比就清楚了。

• RGB：是由紅（R）、綠（G）、藍(lán)（B）色彩三原色組成
• HSB：是由色相（H）、飽和度（S）、明度（B）色彩三要素組成

為什么說(shuō)HSB模式更容易掌控呢，因?yàn)榍ё內(nèi)f化的顏色都是由飽和度（S）、明度（B）這兩者控制的。

比如我們隨意選三個(gè)色相360、23、280。

這個(gè)時(shí)候可以清晰的看出中間的明度和其他兩個(gè)不同，我們思考一下，換做之前我們使用RGB模式調(diào)整，我們肯定是選中中間的圓圈，在色板上上移一點(diǎn)，下移一點(diǎn)。

但是我們換用HSB模式，就只需要降低中間的飽和度S，提高它的明度B，看上去就會(huì)和諧很多，不信你看。

可以對(duì)比一下色值，就能發(fā)現(xiàn)，這也就是我所說(shuō)的HSB好掌控的原因了。

二、永遠(yuǎn)不要使用純黑

還記得高中時(shí)期學(xué)習(xí)美術(shù)的時(shí)候老師就強(qiáng)調(diào)不要使用純黑！可能你覺(jué)得黑色不應(yīng)該就是黑色嗎，難不成還要加入其他顏色？

沒(méi)錯(cuò)，就是要加入其他顏色，這也叫做環(huán)境色，我們總是把顏色較深的顏色叫做黑色，實(shí)際上，馬路不是黑色，這篇文章的字色也不是黑色，就像天上的云也不是白色，總是偏藍(lán)的，當(dāng)然烏云除外（細(xì)想下，烏云其實(shí)也是有色相的，哈哈）。

同理，陰影也不是黑色的，比如在藍(lán)色背景上的陰影應(yīng)該就是偏藍(lán)的，黃色背景上的陰影就是偏黃的，萬(wàn)物都會(huì)受到環(huán)境影響。

這是Wayne Thiebaud的作品，我大概看了10遍。他是一位優(yōu)秀的畫(huà)家，不拘一格，陰影一般都不用黑色，哪怕是連衣裙陰影的最深處也不是純黑。

我們?cè)賮?lái)看一下老版的Facebbok界面，為什么Facebook移動(dòng)界面看起來(lái)這么贊？因?yàn)樗鼈兊幕疑晕诫s了一點(diǎn)Facebook標(biāo)志性的藍(lán)。

當(dāng)你精心挑選了顏色，準(zhǔn)備開(kāi)始設(shè)計(jì)時(shí)，你又在頁(yè)面中加入了純黑，那很不幸的告訴你，黑色會(huì)非常的突出，因?yàn)樽匀唤鐩](méi)有真正的純黑，會(huì)顯得不自然。所以不放在黑色、灰色中加入一些其他的顏色，這樣顏色看起來(lái)就不呆板了。

三、不得觸碰的禁區(qū)

咨詢(xún)了很多人發(fā)現(xiàn)，他們?cè)谟蒙臅r(shí)候有一部分區(qū)域是不會(huì)使用的，但不同的人有不同的說(shuō)法：三角形禁區(qū)、矩形禁區(qū)、扇形禁區(qū)。

但不難發(fā)現(xiàn)右下角這塊區(qū)域很難操控，畢竟他們又臟又深，當(dāng)然什么顏色都能駕馭的大師就當(dāng)我沒(méi)有說(shuō)過(guò)這句話(huà)。

舉個(gè)栗子：下圖是之前做的一個(gè)出差的應(yīng)用入口，窗戶(hù)位置一開(kāi)始就使用到了禁區(qū)中的顏色，看上去非常不通透。

但是在調(diào)整到了非禁區(qū)顏色的時(shí)候，整個(gè)都變得通透，統(tǒng)一了起來(lái)。

我們來(lái)看下實(shí)際效果：

最后強(qiáng)調(diào)一下：禁區(qū)中的顏色也不是不可以使用，存在即合理，只是相對(duì)新手不是那么好駕馭，需要慎用。

四、遵循60:30:10的配色原則

經(jīng)常的時(shí)候，我們的配色雜亂無(wú)章，很有可能是這一個(gè)原因造成的，沒(méi)有遵循配色占比，以及配色數(shù)量。

60%的主色使用要點(diǎn)：

主色一般使用品牌色，來(lái)加深品牌記憶，但對(duì)于主色有兩個(gè)錯(cuò)誤認(rèn)知，我們要了解下：

1. 60%的主色不是指的使用面積，而是說(shuō)主色的數(shù)量。
2. 主色不是說(shuō)一種色彩，而是一種色相，是可以通過(guò)調(diào)節(jié)我們前面說(shuō)的飽和度（S）、明度（B）去變化的。

30%的輔色使用要點(diǎn)：

輔色一般和主色一起出現(xiàn)，用來(lái)襯托主色，使頁(yè)面變的更加豐富，一般有以下這幾種配色方法，下圖以藍(lán)色為例，可能出現(xiàn)使用的輔色。

10%的點(diǎn)綴色使用要點(diǎn)：

這是一個(gè)占比最小的顏色，一般在平衡畫(huà)面冷暖關(guān)系的時(shí)候會(huì)出現(xiàn)或者是在主色和輔色無(wú)法滿(mǎn)足某些信息時(shí)會(huì)用到。

點(diǎn)綴一般都是主色的互補(bǔ)色，我們來(lái)看下示例就清楚了：

還有一個(gè)小的知識(shí)點(diǎn)，一個(gè)頁(yè)面中顏色最好不要超過(guò)3種，色相不要超過(guò)7種，避免顏色過(guò)多產(chǎn)生混亂以及視覺(jué)疲勞。

五、巧用別人的顏色

第五點(diǎn)，也是我之前在設(shè)計(jì)過(guò)程中經(jīng)常使用的一種方法，巧用別人的配色，這個(gè)方法只適合初期配色時(shí)沒(méi)什么頭緒的設(shè)計(jì)師。

首先我們像往常一樣打開(kāi)dribble，然后選擇一個(gè)你喜歡或者覺(jué)得可借鑒配色的作品。

打開(kāi)這個(gè)作品你就會(huì)發(fā)現(xiàn)有這樣一個(gè)配色板，那么，你個(gè)色板就直接拿去用吧。

或者你還可以像這樣，挑選一個(gè)你需要的主色，從這里面去選擇一個(gè)合適的作品生成自己的色板。

最后

最后安利3個(gè)親測(cè)好用的配色網(wǎng)站。

相信看懂了前面的配色知識(shí)點(diǎn)后，以下的配色網(wǎng)站也用不到了。

1、Color Space ——適合給主色找配色

https://mycolor.space/

2、Color Hunt ——適合找流行、時(shí)尚的調(diào)色板

https://colorhunt.co/

3、Cool Hue——漸變色配色版（有sketch和ps插件）

https://webgradients.com/

作者：會(huì)設(shè)計(jì)的喵微信公眾號(hào)：會(huì)設(shè)計(jì)的喵，多年UI設(shè)計(jì)經(jīng)驗(yàn)

本文由@會(huì)設(shè)計(jì)的喵 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議。