關於配色的書籍與理論有很多，但是大多數人可能還是停留在“道理我都懂，可是手就是不會”的階段，而本文就結合實踐分享五個實用技巧，幫助大家做出更好的配色。
在之前，配色一直都是我的弱點，而且會在這方面糾結很久，每次交稿的時候，總會被甲方噴成一坨屎，我覺得他說的很有道理，於是我花了很多時間在網上學習，然後，我的配色可能比坨屎好了點！！！
因為我看到的都是一些：紅色代表激情、活力；藍色代表科技、冷靜；綠色代表健康、生機；橙色代表溫暖；還有鄰近色，互補色等等。
這些理論理論有用嗎？答案是肯定的，但我覺得這種理論看幾遍也就夠了，看多了反而會很茫然，畢竟實踐才是王道。
顏色認知這一塊我也就不做過多的闡述了，網上的文章有很多，也可以在文章底部獲取配色書籍，裡面講的可以說是非常全面了。
下麵我會分享5個總結下來的實用技巧給大家：
- 顏色模式的選擇
- 永遠不要使用純黑
- 不得觸碰的禁區
- 遵循60 : 30 : 10的的配色原則
- 巧用別人的顏色
文章最後還會給大家安利幾個配色網站和一些經典的配色書籍。
一、顏色模式的選擇
很多設計師通常是使用RGB顏色模式進行調色，我之前也是一樣，好看不好看全靠感覺，當有一天瞭解到HSB這個模式後，就愛上了，而且非常好掌控，做幾個對比就清楚了。
- RGB：是由紅（R）、綠（G）、藍（B）色彩三原色組成
- HSB：是由色相（H）、飽和度（S）、明度（B）色彩三要素組成
為什麼說HSB模式更容易掌控呢，因為千變萬化的顏色都是由飽和度（S）、明度（B）這兩者控制的。
比如我們隨意選三個色相360、23、280。
這個時候可以清晰的看出中間的明度和其他兩個不同，我們思考一下，換做之前我們使用RGB模式調整，我們肯定是選中中間的圓圈，在色板上上移一點，下移一點。
但是我們換用HSB模式，就只需要降低中間的飽和度S，提高它的明度B，看上去就會和諧很多，不信你看。
可以對比一下色值，就能發現，這也就是我所說的HSB好掌控的原因了。
二、永遠不要使用純黑
還記得高中時期學習美術的時候老師就強調不要使用純黑！可能你覺得黑色不應該就是黑色嗎，難不成還要加入其他顏色？
沒錯，就是要加入其他顏色，這也叫做環境色，我們總是把顏色較深的顏色叫做黑色，實際上，馬路不是黑色，這篇文章的字色也不是黑色，就像天上的雲也不是白色，總是偏藍的，當然烏雲除外（細想下，烏雲其實也是有色相的，哈哈）。
同理，陰影也不是黑色的，比如在藍色背景上的陰影應該就是偏藍的，黃色背景上的陰影就是偏黃的，萬物都會受到環境影響。
這是Wayne Thiebaud的作品，我大概看了10遍。他是一位優秀的畫家，不拘一格，陰影一般都不用黑色，哪怕是連衣裙陰影的最深處也不是純黑。
我們再來看一下老版的Facebbok界面，為什麼Facebook移動界面看起來這麼贊？因為它們的灰色，稍微摻雜了一點Facebook標誌性的藍。
當你精心挑選了顏色，準備開始設計時，你又在頁面中加入了純黑，那很不幸的告訴你，黑色會非常的突出，因為自然界沒有真正的純黑，會顯得不自然。所以不放在黑色、灰色中加入一些其他的顏色，這樣顏色看起來就不獃板了。
三、不得觸碰的禁區
咨詢了很多人發現，他們在用色的時候有一部分區域是不會使用的，但不同的人有不同的說法：三角形禁區、矩形禁區、扇形禁區。
但不難發現右下角這塊區域很難操控，畢竟他們又臟又深，當然什麼顏色都能駕馭的大師就當我沒有說過這句話。
舉個慄子：下圖是之前做的一個出差的應用入口，窗戶位置一開始就使用到了禁區中的顏色，看上去非常不通透。
但是在調整到了非禁區顏色的時候，整個都變得通透，統一了起來。
我們來看下實際效果：
最後強調一下：禁區中的顏色也不是不可以使用，存在即合理，只是相對新手不是那麼好駕馭，需要慎用。
四、遵循60:30:10的配色原則
經常的時候，我們的配色雜亂無章，很有可能是這一個原因造成的，沒有遵循配色占比，以及配色數量。
60%的主色使用要點：
主色一般使用品牌色，來加深品牌記憶，但對於主色有兩個錯誤認知，我們要瞭解下：
- 60%的主色不是指的使用面積，而是說主色的數量。
- 主色不是說一種色彩，而是一種色相，是可以通過調節我們前面說的飽和度（S）、明度（B）去變化的。
30%的輔色使用要點：
輔色一般和主色一起出現，用來襯托主色，使頁面變的更加豐富，一般有以下這幾種配色方法，下圖以藍色為例，可能出現使用的輔色。
10%的點綴色使用要點：
這是一個占比最小的顏色，一般在平衡畫面冷暖關係的時候會出現或者是在主色和輔色無法滿足某些信息時會用到。
點綴一般都是主色的互補色，我們來看下示例就清楚了：
還有一個小的知識點，一個頁面中顏色最好不要超過3種，色相不要超過7種，避免顏色過多產生混亂以及視覺疲勞。
五、巧用別人的顏色
第五點，也是我之前在設計過程中經常使用的一種方法，巧用別人的配色，這個方法只適合初期配色時沒什麼頭緒的設計師。
首先我們像往常一樣打開dribble，然後選擇一個你喜歡或者覺得可借鑒配色的作品。
打開這個作品你就會發現有這樣一個配色板，那麼，你個色板就直接拿去用吧。
或者你還可以像這樣，挑選一個你需要的主色，從這裡面去選擇一個合適的作品生成自己的色板。
最後
最後安利3個親測好用的配色網站。
相信看懂了前面的配色知識點後，以下的配色網站也用不到了。
1、Color Space ——適合給主色找配色
https://mycolor.space/
2、Color Hunt ——適合找流行、時尚的調色板
https://colorhunt.co/
3、Cool Hue——漸變色配色版（有sketch和ps插件）
https://webgradients.com/
作者：會設計的喵微信公眾號：會設計的喵，多年UI設計經驗
本文由@會設計的喵 原創發佈於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議。