一、基礎概念
1.1 色彩設計的使用場景：
產品設計：工業設計、UI設計、書籍報刊設計等。重點在于品牌印象，清晰、舒適、耐看。誘目性低，可以長時間凝視而不會疲勞。
運營/推廣設計：海報、廣告、招貼等形式。重點在于氛圍營造，吸睛、具有較強的表現力。誘目性高，瞬間吸引人的注意力。
1.2 配色設計的目的：
區分層次；渲染氛圍；強化主題；關聯傳達品牌特性；
1.3 色彩的組成：
H（hues）色相：紅、黃、藍等色彩的種類；根據位置來劃分色彩的鄰近色、對比色等。
色相會具有一定的偏向性，如偏藍色的綠色/偏黃色的綠色，在與其他顏色搭配師，不同的偏向性會產生不同的效果。
從色彩屬性上，可以分為冷色與暖色。藍色、紫色等冷色表現出清涼、冷靜的感覺。黃色、橙色等暖色給人溫暖的感覺。
S（saturation）純度/飽和度：色彩的鮮明程度，為0時為灰色；
B（brightness）明度/亮度：色彩的明亮程度，最高為白色，最低為黑色；明度高：輕快、明亮；明度低：厚重、沉著。
明度差大：力量、有活力；明度差小：高雅、平穩。
色彩模式：
RGB：紅、綠、藍；加色混合（混到一起成為白色），屏幕所用色彩表現方式。
CMYK：青、品紅、黃、黑；減色混合（混到一起成為黑色），印刷所用的色彩模式
1.4 pccs（日本色研配色體系：Practical Color Co-ordinate System）
色調系列：色彩的不同明度和純度的組合，色調由純度和明度交叉創造而成。不同的色調會給人留下不同的心理印象，決定畫面的氛圍。
決定畫面的三要素是色調、色相和對比強度。
色調差小，則對比小，平穩和諧；色調差大，則對比較強，變化而有力量。
淡色調（P）
心理印象：溫柔、夢幻、輕盈、輕、淡、淺，多用于化妝品、嬰兒用品等。
淺色調（LT）
心理印象：清爽、輕松、明快、輕、淡、淺，多用于化妝品、兒童用品等。
淺灰色調（LTG）
心理印象：素雅、溫柔、消極、成熟、雅致。
輕柔色調（SF）
心理印象：質樸、消極、平和、成熟。
明亮色調（B）
心理印象：輕快、活潑、童真。多用于兒童用品。
強烈色調（S）
心理印象：強烈、有深度、充滿熱情的印象。
鮮艷色調（V）
心理印象：華麗、熱鬧、刺激、鮮明。
灰色調（G）
心理印象：資深、沉穩、厚重、成熟、含蓄、保守、消極。
濁色調（D）
心理印象：鈍化、厚重、質樸、穩重、高級。
深色調（DP）
心理印象：沉著、干練、穩重。
暗灰色調（DKG）
心理印象：穩重、沉悶、質樸、厚重。
暗色調（DK）
心理印象：厚重、陰暗、穩重、質樸。
1.5 色彩的心理印象：
暖色：紅、黃、橙等，讓人聯想到火焰、溫暖的太陽等比較溫暖的事物；
冷色：藍色、綠色、紫色等，讓人聯想到冰、雪等比較涼爽的事物；
前進色：看著比實際上離自己近，膨脹色，一般是暖色，偏白的顏色；
后退色：看著比實際上離自己遠，收縮色，一般是冷色，黑色等；
膨脹色：暖色、明度較高的顏色，讓物體看起來感覺比實際更大；
收縮色：冷色、明度較低的顏色，讓物體看起來感覺比實際更小；
色彩的重量感：黑色比白色顯得更重，更牢固。明度越低，顯得越有重量。反之，顯得越輕。
不同色調的心理印象：
1.6 五角色
將色彩分為5個角色：主角色、配角色、支配色、融合色、強調色。
主角色：配色的中心色，其他顏色以此為基準。
主角色決定主體，使畫面整體安定。要用最強色。面積不需要多大，但是要有力度。
配角色（突出色）：襯托主角、支持主角，專門設置在主角近旁，使主角突出。
配角色增加對比，在一成不變的色彩中增加變化，突出主角色。面積與主角色形成差異，會增強對比的效果（如主角色面積較大時，面積越小的配角色效果越好）。
支配色（背景色）：作為背景環抱整體的顏色。即時小面積也能支配整體感覺。
背景色支配著畫面的整體感覺。背景色包圍主體，即使面積小，在觀眾的心中會“看到”主角背后的背景色，所以也會支配整體的感覺。
融合色：主角色游離其他色時，置同系色于游離處，起到融合整體的作用。
但兩種顏色對立過于激烈時，加入融合色，起到緩和矛盾的作用，使整體更加平穩。
強調色：在小范圍點上強烈的顏色，使畫面整體更加鮮明生動。
強調色讓頁面的變化更加強烈，增加整體的活力。同樣，面積與主題差異較大，可以增加對比效果。
二? 色彩搭配的流程
2.1 確定主題與用戶
首先需要明確設計的目的是什么、內容是什么、受眾是誰。
設計是解決問題的一種方式，了解產品的形象、用戶的角色，可以明確整體所要表現的風格氣質，明確我們要解決的問題以及解決問題的思路與方向。如考慮不同年齡、不同性別、不同層次用戶對于色彩的偏好。孩童一般喜歡明度和純度比較高的色彩；老年人一般喜歡明度和純度都較低的色彩。這樣在選取顏色的時候才會有方向、有目標。
了解設計的內容可以關注技術的限制、觀看距離的遠近以及周圍環境的影響。如平面設計一般采用cmyk模式，UI設計一般采用rgb模式。觀看距離較遠時，需要較強的對比度，增加識別性；反之，距離較近時需要更加柔和，讓觀者的眼睛不會疲勞。而夜晚模式的使用更是對于光線不足時的一種反應。就環境影響而言，如果產品周圍的物體、產品等顏色比較花哨、豐富，那么選用簡單、無彩色的配色會更加容易從中凸顯。
2.2 確定主色
主色調選取，一般是品牌的主打色，同時需要與所要傳達的主題氣質相符合。主色所占的比例一般會比較大，對整體風格起到一個主導作用。
對于公司內部的產品，一般考慮公司的品牌色。對于新的、toC的產品，可以使用情景版的方式來確定主色。或者使用行業/客戶特定的色彩，如針對中國電網設計產品，考慮使用其綠色作為主色。
2.3 確定輔色、背景色、強調色
主色確定之后，單色配色一般是在色彩的明度、純度上發生變化，并且加上黑白灰等無彩色來形成配色方案。雙色配色可以考慮類似色、對比色、互補色等配色方式，一般而言，與主色在明度和純度上的差異不會太大。多色配色可以考慮三角形、四邊形、五邊形的配色方式。
色彩的對比強度，可以是色相、明度、純度任一方面。需要依據整體的感覺、氣質需要來選取和調整。激烈、熱鬧的氛圍需要比較大的對比度，柔和、安靜的氛圍需要不太強的對比。
色彩的冷暖感：如果都選用冷色或者暖色，整個畫面就會偏冷或偏暖。除非有特殊的主題需求，一般多色配色時，會需要在全是冷色的顏色中加入暖色，或者在全是暖色的顏色中加入冷色來點綴與平衡畫面的冷暖感。
色彩的明暗：色彩的明暗就像是畫面的光影，有高光、有陰影物體才會有體積感。同樣，顏色的明暗對比讓畫面具有層次感與縱深感。同時，全是亮色會顯得浮躁，全是暗色會顯得沉悶。
2.4 優化細節
色彩之間的呼應：整個畫面之間的顏色并不是割裂的，這里一塊那里一塊獨立存在。而是在元素之間穿插錯落。色彩的呼應會讓整體感更加明顯，也更容易讓畫面變得和諧。
色彩的面積：主色與輔色所占的面積大小一般會有所差異，形成對比。常見的比例有7:2:1,。整體的感覺與印象是不同面積色彩感覺之間拉扯的結果。
環境色/光源色的影響：高光與陰影的顏色會受到環境色的影響，如黃色燈光下的物體，高光會偏黃色；藍色背景上的物體，其陰影也會偏藍色。在對元素填色時，需要考慮環境色/光源色的影響，在基礎色的色相上偏向光源色或者多層疊加顏色來讓整體細節更豐富、更有質感。
兼顧“突出”與“融合”兩個方面：在完成配色的方案后，要審視整體的方案與目標氣質、定位基調的一致性。如果過于沉靜，則下點功夫突出一下即可；如果過于喧鬧，則像著沉浸、融合的方向調整即可。
三 色彩搭配的方法理論
3.1 方法一（色彩九宮格）：
取色板的右上角頂點為某一色相的純色。水平往左，是逐漸加入白色的過程，顏色純度逐漸降低；垂直往下，是逐漸加入黑色的過程，顏色明度逐漸降低。將取色板均等分為9個區域。每個區域的顏色會給人不同的感覺。與pccs的色調劃分方式有些類似，在設計軟件中選取顏色時運用比較方便。
色彩九宮格與給人的心理印象
1號區域-淡色調
心理印象：高明度低純度，溫柔、輕盈、夢幻、素雅、
2號區域-明色調
心理印象：高明度中等純度，清爽、明亮、活潑、可愛。多用于兒童用品等。
3號區域-純色調
心理印象：高明度高純度，鮮艷、刺激、熱鬧、華麗、年輕化、沖擊力強。多用于廣告、海報等運營類設計。
4號區域-淡濁色調
心理印象：中等明度低純度，素雅、格調、安靜、樸實、舒適、平和。高級灰、莫蘭迪色。
5號區域-濁色調
心理印象：中等明度中等純度，堅定、質樸、安靜、高級。
6號區域-暗色調
心理印象：中等明度高純度，沉悶、成熟、沉穩
7-8-9區域-黑暗色調
心理印象：低明度，危險、高檔、暗沉、厚重、陰暗
此區域的顏色，有人視為色彩禁區。顏色顯臟不好搭配。當需要純黑色的替代色時，可以考慮選取這幾個區域的顏色，色彩可以偏向于主色的色相或者與主色協調的色相。
九宮格配色的使用技巧：比較簡單的方式是選擇同一區塊的顏色，在色相上產生變化。在多色配色的情況下可以取得較好的效果。也可以考慮明度與色彩的重量感，選用亮與暗、輕與重的顏色協調。
快速上手！10分鐘學會這招超好用的「九宮格」配色技巧 - 優設網 - UISDC
用我自創的十字形配色法，讓你快速入門配色！ - 優設網 - UISDC
看過很多配色理論還是學不會？來看我總結的這3個實用技巧！ - 優設網 - UISDC
3.2 方法二：色相、明度、純度保持一致的配色
色相一致的配色
各個色彩色相保持一致或者接近，通過明度或純度變化來產生差異。
明度一致的配色
各個色彩明度保持一致或者接近，不會產生強烈對比感，整體會顯得比較均衡。
純度一致的配色
各個色彩純度保持一致或者接近，純度越高，刺激性越強，純度越低，越顯得沉穩；
3.3 方法三：色相搭配的配色
同色系配色
色相不變，在純度與明度上產生變化，形成配色方案。單色系配色，比較容易做出效果。
鄰近色/類似色配色
色相跨度較小，容易形成比較清晰一致、意圖明顯的的效果。
中差色配色
色相環上顏色位置呈90°，具有一定的對比但不是太強烈，高級、華麗、干練。
對比色/互補色配色
色相環上二者成180°，對比強烈，容易形成炫光效果，一般會使用面積差異或者明度差異來讓頁面更加穩定。
三角形配色
色相環上顏色呈三角形，對比較為強烈、穩定。
四邊形配色
色相環上顏色呈四邊形，有一定的對比，色彩數量比較豐富。
五邊形配色
以五邊形的方式從色環選取顏色，色相之間的對比比較均衡。色彩數量豐富，熱鬧、活潑。
3.4 突出型 —— 如何突出
理論 —— 為什么要突出
整體顯得模糊時，應該刪除曖昧模糊的地方，突出主題，大力強調作為主角的部分，整體更加清爽踏實。
當配色過于沉重壓抑時，應該減少黑色，增加鮮艷顏色，提升明度、飽和度，整體明朗、生動。
方法 —— 整體思路就是增加對比（包括色相、明度、純度、面積、位置）
對比越強，顯得有活力、精神飽滿；對比越弱，則更加安定、穩定。
色相
加入對比色：對比色是主色的補充，兩者形成沖突。注意面積、明度、純度、位置的調節，避免畫面過于激烈、不協調。
準對比色帶來平穩的對比：比直接使用對比色的效果更緩和一些，即使用稍偏離對比色的補色。
全色相型：色彩種類豐富，畫面熱鬧、開放，類似五邊形配色。
三角形配色：平衡、穩定，類似三原色的配色。
十字型：兩組對比色，在色環上構成“十”字，有力度、緊湊。
黑色起突出作用：黑色凸顯出力量感，能夠襯托出有彩色的鮮艷。
白色在不破壞畫面感覺的基礎上起強調作用：白色作為中立色，不破壞其他顏色。可以作為強調色、間隔色。
用淡色群固定淡色主角：淡色主角，背景色、輔助色等不應該過于強烈，搶過主角的風頭。整體的淡色調，讓畫面氛圍更加輕快。
明度/純度
加強中心部分的方法：提高純度；強化明度對比；強化色相對比；
加入鮮艷色彩：鮮艷色調顯得有活力，暗色調顯得莊嚴、高雅。
減少一部分黑色：與加入鮮艷顏色是一個道理，讓色調往明亮、鮮艷方向靠近一些。
設置明度差：也就是增加對比。對比產生力量、躍動的活力。色彩的對比包括色相、明度、純度、面積的對比。
制造一個亮點：抑制背景色，突出主題色的明度、純度，與背景色拉大面積對比。
面積
增大色彩面積：畫面過于單調、空洞，可以適當增加色彩的面積，減少留白，增加圖版率和視覺度。（圖版率高，整體更加活躍、熱鬧，適合快速瀏覽。圖版率低，則更加安靜、偏向于細細閱讀，適合閱讀、文檔等應用的設計。詳見簡書 - 寫文章）
位置
分離配色：顏色之間不按照色相環的順序排列，而是讓對立的顏色放到一起，增加沖突，制造動感。
重心：深色（明度低）在上，淺色在下，重心就會上移，不穩定而形成動感。防止，則重心靠下，更加安定。
3.5 融合型
3.5.1 為什么融合
畫面色彩不協調/過于喧囂，使用三屬性（色相、明度、純度）、位置、面積來緩和氛圍，整體更加和諧。
3.5.2 如何融合
色相&明度&純度
色相靠近：同系色、鄰近色等，色相差異較小，測試穩定、溫馨、保守、恬靜的效果。
雙色調：色相相同或相近，色調形成差異，淡色&明色/明色&濁色等的組合。
對比雙色調：兩組雙色調，色相之間形成對比。雙色調的平穩感與色相對比的緊湊感共存。
統一明度：色相差異較大時，采用相同的明度，整體會給人安定的感覺。
靠近色調：純度與明度組成色調，同樣的色調可以強化該色調帶來的感覺，統一整體的畫面氛圍。
通過群化法收斂混亂：將色相、明度、純度中的一部分共通化，會得到統一感。
濃淡法：按照色相的順序或者明度的順序配色，形成穩定的節奏感。
微差：近似的色相與明度，整體會比較寧靜。
靈活運用令人生厭的色調：使用小面積強調色十分有效。強調色的選用：高彩度的同色系色彩、準高彩度的對比色彩、高明度色彩。
位置
通過重復融合整體：在不同的位置放置一樣的色彩，形成呼應，整個畫面更好地融為一體。
利用白色間隔使畫面更柔和：在過于濃艷的配色中使用白色間隔，可以緩和色相之間的強烈對比。
3.6 其余：
從自然中獲取配色 ：
選取自然風光的照片，進行馬賽克處理，選取其中的顏色作為配色方案。
選擇與主體一致的顏色：
設計材料中有一些必須加入畫面的圖片、圖案等，可以在其中吸取顏色，作為字體、裝飾元素的顏色。讓整個畫面更加協調。
插入間隔色：
主體與背景色、輔色等產生沖突時，可以在二者中間插入間隔色，進行一個區分、緩沖與過渡的作用。間隔色一般為無彩色或者濁色調色彩。
色彩印象：
嬰兒→兒童→成年→中年 —— 淺色調、輕柔色調→明亮色調、鮮艷色調→強烈色調、濁色調→深色調、灰色調；
男性 —— 純色，強對比；女性 —— 柔和、素雅，弱對比。
朝氣、活力 —— 暖色、全色相；
可愛 —— 增加白色面積占比、在顏色中加入白色；
素雅 —— 淡雅明快的色調，弱對比；
豪華 —— 暖色、鮮艷色調、強對比；
自然 —— 明亮、素雅的濁色，在色調圖中的輕柔色調、強烈色調、濁色調。
力量、速度 —— 鮮艷、厚重的色調，對比強烈；
幻想、神秘 —— 同色系，自然界中少見的；
漸變：
采用色調一致的顏色，通過色調來形成不同的氛圍。
·同類色漸變：柔和、輕微、細膩。具有柔和的光影感。
·鄰近色漸變：時尚、耐看、活躍
·互補色/對比色漸變：沖擊力、吸引眼球、時尚。
四 其余需要注意的事項
先確定版式，再選擇配色。
色彩的數量與協調：
有彩色的數量較多，容易形成熱鬧、絢麗的氛圍。但是顏色數量越多，協調起來越難。色彩數量較少會比較有力量感，給人感覺更加堅定、方向明確；
可以在明度或純度上保持相似性。也可以加入無彩色作為區分、過渡。或者將某一種顏色用在所有元素上，讓整體更加統一。
多色配色：
色相、純度、明度等至少要有一個保持一致或接近。如多色相的（色彩種類較多）時，應該保持各色彩的純度和明度至少一個差別不大。要是都差別很大，則容易不協調。可以將其中一個顏色的明度或純度提高，進行有意凸顯與強調。
多色配色也要講究顏色之間的呼應，如某些細節部分顏色與大面積色彩保持一致，而非一個顏色占據一塊。
多色配色時，顏色之間的比例也需要權衡。比較均衡時，整體比較熱鬧。主次分明時，與大面積色的感覺更靠近。
疊加模式：
通過不同的疊加模式（柔光、疊加、顏色加深等），讓圖片或者色彩之間融合更加自然。
五 配色相關的網站/工具
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
NCD WEB : NCD Busines : Image Scale System
用一個實戰項目，幫你掌握科學的 UI 配色方法 | 優設網 - UISDC
《七日掌握設計配色基礎》
