基礎概念
色彩設計的使用場景：
產品設計：工業設計、UI設計、書籍報刊設計等。重點在於品牌印象，清晰、舒適、耐看。誘目性低，可以長時間凝視而不會疲勞。
運營/推廣設計：海報、廣告、招貼等形式。重點在於氛圍營造，吸睛、具有較強的表現力。誘目性高，瞬間吸引人的注意力。
配色設計的目的：
區分層次；渲染氛圍；強化主題；關聯傳達品牌特性；
色彩的組成：
H（hues）色相：紅、黃、藍等色彩的種類；
色相會具有一定的偏向性，如偏藍色的綠色/偏黃色的綠色，在與其他顏色搭配師，不同的偏向性會產生不同的效果。
S（saturation）純度/飽和度：色彩的鮮明程度，為0時為灰色；
B（brightness）明度/亮度：色彩的明亮程度，為0時為黑色；
色彩模式：
RGB：紅、綠、藍；加色混合（混到一起成為白色），屏幕所用色彩表現方式。
CMYK：青、品紅、黃、黑；減色混合（混到一起成為黑色），印刷所用的色彩模式
pccs（日本色研配色體系：Practical Color Co-ordinate System）
色調系列：色彩的不同明度和純度的組合。不同的色調會給人留下不同的心理印象。
淡色調（P）
心理印象：溫柔、夢幻、輕盈、輕、淡、淺，多用於化妝品、嬰兒用品等。
淺色調（LT）
心理印象：清爽、輕松、明快、輕、淡、淺，多用於化妝品、兒童用品等。
淺灰色調（LTG）
心理印象：素雅、溫柔、消極、成熟、雅致。
輕柔色調（SF）
心理印象：質朴、消極、平和、成熟。
明亮色調（B）
心理印象：輕快、活潑、童真。多用於兒童用品。
強烈色調（S）
心理印象：強烈、有深度、充滿熱情的印象。
鮮艷色調（V）
心理印象：華麗、熱鬧、刺激、鮮明。
灰色調（G）
心理印象：資深、沉穩、厚重、成熟、含蓄、保守、消極。
濁色調（D）
心理印象：鈍化、厚重、質朴、穩重、高級。
深色調（DP）
心理印象：沉着、干練、穩重。
暗灰色調（DKG）
心理印象：穩重、沉悶、質朴、厚重。
暗色調（DK）
心理印象：厚重、陰暗、穩重、質朴。
色彩的心理印象：
暖色：紅、黃、橙等，讓人聯想到火焰、溫暖的太陽等比較溫暖的事物；
冷色：藍色、綠色、紫色等，讓人聯想到冰、雪等比較涼爽的事物；
前進色：看着比實際上離自己近，膨脹色，一般是暖色，偏白的顏色；
后退色：看着比實際上離自己遠，收縮色，一般是冷色，黑色等；
膨脹色：暖色、明度較高的顏色，讓物體看起來感覺比實際更大；
收縮色：冷色、明度較低的顏色，讓物體看起來感覺比實際更小；
色彩的重量感：黑色比白色顯得更重，更牢固。明度越低，顯得越有重量。反之，顯得越輕。
不同色調的心理印象：
色彩搭配的流程
確定主題與用戶
首先需要明確設計的目的是什么、內容是什么、受眾是誰。
設計是解決問題的一種方式，了解產品的形象、用戶的角色，可以明確整體所要表現的風格氣質，明確我們要解決的問題以及解決問題的思路與方向。如考慮不同年齡、不同性別、不同層次用戶對於色彩的偏好。孩童一般喜歡明度和純度比較高的色彩；老年人一般喜歡明度和純度都較低的色彩。這樣在選取顏色的時候才會有方向、有目標。
了解設計的內容可以關注技術的限制、觀看距離的遠近以及周圍環境的影響。如平面設計一般采用cmyk模式，UI設計一般采用rgb模式。觀看距離較遠時，需要較強的對比度，增加識別性；反之，距離較近時需要更加柔和，讓觀者的眼睛不會疲勞。而夜晚模式的使用更是對於光線不足時的一種反應。就環境影響而言，如果產品周圍的物體、產品等顏色比較花哨、豐富，那么選用簡單、無彩色的配色會更加容易從中凸顯。
確定主色
主色調選取，一般是品牌的主打色，同時需要與所要傳達的主題氣質相符合。主色所占的比例一般會比較大，對整體風格起到一個主導作用。
對於公司內部的產品，一般考慮公司的品牌色。對於新的、toC的產品，可以使用情景版的方式來確定主色。或者使用行業/客戶特定的色彩，如針對中國電網設計產品，考慮使用其綠色作為主色。
確定輔色、背景色、強調色
主色確定之后，單色配色一般是在色彩的明度、純度上發生變化，並且加上黑白灰等無彩色來形成配色方案。雙色配色可以考慮類似色、對比色、互補色等配色方式，一般而言，與主色在明度和純度上的差異不會太大。多色配色可以考慮三角形、四邊形、五邊形的配色方式。
色彩的對比強度，可以是色相、明度、純度任一方面。需要依據整體的感覺、氣質需要來選取和調整。激烈、熱鬧的氛圍需要比較大的對比度，柔和、安靜的氛圍需要不太強的對比。
色彩的冷暖感：如果都選用冷色或者暖色，整個畫面就會偏冷或偏暖。除非有特殊的主題需求，一般多色配色時，會需要在全是冷色的顏色中加入暖色，或者在全是暖色的顏色中加入冷色來點綴與平衡畫面的冷暖感。
色彩的明暗：色彩的明暗就像是畫面的光影，有高光、有陰影物體才會有體積感。同樣，顏色的明暗對比讓畫面具有層次感與縱深感。同時，全是亮色會顯得浮躁，全是暗色會顯得沉悶。
優化細節
色彩之間的呼應：整個畫面之間的顏色並不是割裂的，這里一塊那里一塊獨立存在。而是在元素之間穿插錯落。色彩的呼應會讓整體感更加明顯，也更容易讓畫面變得和諧。
色彩的面積：主色與輔色所占的面積大小一般會有所差異，形成對比。常見的比例有7:2:1,。整體的感覺與印象是不同面積色彩感覺之間拉扯的結果。
環境色/光源色的影響：高光與陰影的顏色會受到環境色的影響，如黃色燈光下的物體，高光會偏黃色；藍色背景上的物體，其陰影也會偏藍色。在對元素填色時，需要考慮環境色/光源色的影響，在基礎色的色相上偏向光源色或者多層疊加顏色來讓整體細節更豐富、更有質感。
色彩搭配的方法理論
方法一（色彩九宮格）：
取色板的右上角頂點為某一色相的純色。水平往左，是逐漸加入白色的過程，顏色純度逐漸降低；垂直往下，是逐漸加入黑色的過程，顏色明度逐漸降低。將取色板均等分為9個區域。每個區域的顏色會給人不同的感覺。與pccs的色調划分方式有些類似，在設計軟件中選取顏色時運用比較方便。
色彩九宮格與給人的心理印象
1號區域-淡色調
心理印象：高明度低純度，溫柔、輕盈、夢幻、素雅、
2號區域-明色調
心理印象：高明度中等純度，清爽、明亮、活潑、可愛。多用於兒童用品等。
3號區域-純色調
心理印象：高明度高純度，鮮艷、刺激、熱鬧、華麗、年輕化、沖擊力強。多用於廣告、海報等運營類設計。
4號區域-淡濁色調
心理印象：中等明度低純度，素雅、格調、安靜、朴實、舒適、平和。高級灰、莫蘭迪色。
5號區域-濁色調
心理印象：中等明度中等純度，堅定、質朴、安靜、高級。
6號區域-暗色調
心理印象：中等明度高純度，沉悶、成熟、沉穩
7-8-9區域-黑暗色調
心理印象：低明度，危險、高檔、暗沉、厚重、陰暗
此區域的顏色，有人視為色彩禁區。顏色顯臟不好搭配。當需要純黑色的替代色時，可以考慮選取這幾個區域的顏色，色彩可以偏向於主色的色相或者與主色協調的色相。
九宮格配色的使用技巧：比較簡單的方式是選擇同一區塊的顏色，在色相上產生變化。在多色配色的情況下可以取得較好的效果。也可以考慮明度與色彩的重量感，選用亮與暗、輕與重的顏色協調。
快速上手！10分鍾學會這招超好用的「九宮格」配色技巧 - 優設網 - UISDC
用我自創的十字形配色法，讓你快速入門配色！ - 優設網 - UISDC
看過很多配色理論還是學不會？來看我總結的這3個實用技巧！ - 優設網 - UISDC
方法二：
色相一致的配色
各個色彩色相保持一致或者接近，通過明度或純度變化來產生差異。
明度一致的配色
各個色彩明度保持一致或者接近，不會產生強烈對比感，整體會顯得比較均衡。
純度一致的配色
各個色彩純度保持一致或者接近，純度越高，刺激性越強，純度越低，越顯得沉穩；
方法三：
同色系配色
色相不變，在純度與明度上產生變化，形成配色方案。單色系配色，比較容易做出效果。
鄰近色/類似色配色
色相跨度較小，容易形成比較清晰一致、意圖明顯的的效果。
中差色配色
色相環上顏色位置呈90°，具有一定的對比但不是太強烈，高級、華麗、干練。
對比色/互補色配色
色相環上二者成180°，對比強烈，容易形成炫光效果，一般會使用面積差異或者明度差異來讓頁面更加穩定。
三角形配色
色相環上顏色呈三角形，對比較為強烈、穩定。
四邊形配色
色相環上顏色呈四邊形，有一定的對比，色彩數量比較豐富。
五邊形配色
五邊形配色
以五邊形的方式從色環選取顏色，色相之間的對比比較均衡。色彩數量豐富，熱鬧、活潑。
其余：
從自然中獲取配色 ：
選取自然風光的照片，進行馬賽克處理，選取其中的顏色作為配色方案。
選擇與主體一致的顏色：
設計材料中有一些必須加入畫面的圖片、圖案等，可以在其中吸取顏色，作為字體、裝飾元素的顏色。讓整個畫面更加協調。
插入間隔色：
主體與背景色、輔色等產生沖突時，可以在二者中間插入間隔色，進行一個區分、緩沖與過渡的作用。間隔色一般為無彩色或者濁色調色彩。
漸變：
采用色調一致的顏色，通過色調來形成不同的氛圍。
·同類色漸變：柔和、輕微、細膩。具有柔和的光影感。
·鄰近色漸變：時尚、耐看、活躍
·互補色/對比色漸變：沖擊力、吸引眼球、時尚。
其余需要注意的事項
先確定版式，再選擇配色。
色彩的數量與協調：
有彩色的數量較多，容易形成熱鬧、絢麗的氛圍。但是顏色數量越多，協調起來越難。色彩數量較少會比較有力量感，給人感覺更加堅定、方向明確；
可以在明度或純度上保持相似性。也可以加入無彩色作為區分、過渡。或者將某一種顏色用在所有元素上，讓整體更加統一。
多色配色：
色相、純度、明度等至少要有一個保持一致或接近。如多色相的（色彩種類較多）時，應該保持各色彩的純度和明度至少一個差別不大。要是都差別很大，則容易不協調。可以將其中一個顏色的明度或純度提高，進行有意凸顯與強調。
多色配色也要講究顏色之間的呼應，如某些細節部分顏色與大面積色彩保持一致，而非一個顏色占據一塊。
多色配色時，顏色之間的比例也需要權衡。比較均衡時，整體比較熱鬧。主次分明時，與大面積色的感覺更靠近。
疊加模式：
通過不同的疊加模式（柔光、疊加、顏色加深等），讓圖片或者色彩之間融合更加自然。
配色相關的網站/工具
ColorMunki - ColorMunki Design
Color Picker — A handy design tool from Color Supply
Color Hunt - Trendy Palettes for Designers and Artists
LOL Colors - Curated color palette inspiration
Coolors.co - The super fast color schemes generator
Color Scheme Designer 3_高級在線配色器_配色網
Material Design Color, Flat Colors, Icons, Color Palette | Material UI
參考：
CMYK 和 RGB 這兩種色彩模式本質與區別在哪？ - 知乎
快速上手！10分鍾學會這招超好用的「九宮格」配色技巧 - 優設網 - UISDC
用我自創的十字形配色法，讓你快速入門配色！ - 優設網 - UISDC
看過很多配色理論還是學不會？來看我總結的這3個實用技巧！ - 優設網 - UISDC
高手的平面課堂！最容易上手的配色方法 - 優設網 - UISDC
小禮
作者：dddt01
鏈接：https://www.jianshu.com/p/3fc89e6589b6
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。