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

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

因為我看到的都是一些：紅色代表激情、活力；藍(lán)色代表科技、冷靜；綠色代表健康、生機；橙色代表溫暖；還有鄰近色，互補色等等。

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

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

下面我會分享5個總結(jié)下來的實用技巧給大家：

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

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

一、顏色模式的選擇

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

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

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

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

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

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

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

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

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

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

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

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

我們再來看一下老版的Facebbok界面，為什么Facebook移動界面看起來這么贊？因為它們的灰色，稍微摻雜了一點Facebook標(biāo)志性的藍(lán)。

當(dāng)你精心挑選了顏色，準(zhǔn)備開始設(shè)計時，你又在頁面中加入了純黑，那很不幸的告訴你，黑色會非常的突出，因為自然界沒有真正的純黑，會顯得不自然。所以不放在黑色、灰色中加入一些其他的顏色，這樣顏色看起來就不呆板了。

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

咨詢了很多人發(fā)現(xiàn)，他們在用色的時候有一部分區(qū)域是不會使用的，但不同的人有不同的說法：三角形禁區(qū)、矩形禁區(qū)、扇形禁區(qū)。

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

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

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

我們來看下實際效果：

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

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

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

60%的主色使用要點：

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

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

30%的輔色使用要點：

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

10%的點綴色使用要點：

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

點綴一般都是主色的互補色，我們來看下示例就清楚了：

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

五、巧用別人的顏色

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

首先我們像往常一樣打開dribble，然后選擇一個你喜歡或者覺得可借鑒配色的作品。

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

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

最后

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

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

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

https://mycolor.space/

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

https://colorhunt.co/

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

https://webgradients.com/

作者：會設(shè)計的喵微信公眾號：會設(shè)計的喵，多年UI設(shè)計經(jīng)驗

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

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