一君账、基礎概念
1.1 色彩設計的使用場景：
產(chǎn)品設計：工業(yè)設計繁堡、UI設計、書籍報刊設計等。重點在于品牌印象椭蹄，清晰闻牡、舒適、耐看绳矩。誘目性低罩润，可以長時間凝視而不會疲勞。
運營/推廣設計：海報翼馆、廣告割以、招貼等形式。重點在于氛圍營造应媚，吸睛拳球、具有較強的表現(xiàn)力。誘目性高珍特，瞬間吸引人的注意力。
1.2 配色設計的目的：
區(qū)分層次魔吐；渲染氛圍扎筒；強化主題；關聯(lián)傳達品牌特性酬姆；
1.3 色彩的組成：
H（hues）色相：紅嗜桌、黃、藍等色彩的種類辞色；根據(jù)位置來劃分色彩的鄰近色骨宠、對比色等。
色相會具有一定的偏向性相满，如偏藍色的綠色/偏黃色的綠色层亿，在與其他顏色搭配師，不同的偏向性會產(chǎn)生不同的效果立美。
從色彩屬性上匿又，可以分為冷色與暖色。藍色建蹄、紫色等冷色表現(xiàn)出清涼碌更、冷靜的感覺。黃色洞慎、橙色等暖色給人溫暖的感覺痛单。
S（saturation）純度/飽和度：色彩的鮮明程度，為0時為灰色劲腿；
B（brightness）明度/亮度：色彩的明亮程度旭绒，最高為白色，最低為黑色；明度高：輕快快压、明亮圆仔；明度低：厚重、沉著蔫劣。
明度差大：力量坪郭、有活力；明度差新龃薄：高雅歪沃、平穩(wěn)。
色彩模式：
RGB：紅嫌松、綠沪曙、藍；加色混合（混到一起成為白色）萎羔，屏幕所用色彩表現(xiàn)方式液走。
CMYK：青、品紅贾陷、黃缘眶、黑；減色混合（混到一起成為黑色）髓废，印刷所用的色彩模式
1.4 pccs（日本色研配色體系：Practical Color Co-ordinate System）
色調系列：色彩的不同明度和純度的組合，色調由純度和明度交叉創(chuàng)造而成慌洪。不同的色調會給人留下不同的心理印象顶燕，決定畫面的氛圍。
決定畫面的三要素是色調冈爹、色相和對比強度涌攻。
色調差小，則對比小犯助，平穩(wěn)和諧癣漆；色調差大，則對比較強剂买，變化而有力量惠爽。
淡色調（P）
心理印象：溫柔、夢幻瞬哼、輕盈婚肆、輕、淡坐慰、淺较性，多用于化妝品用僧、嬰兒用品等。
淺色調（LT）
心理印象：清爽赞咙、輕松责循、明快、輕攀操、淡院仿、淺，多用于化妝品速和、兒童用品等歹垫。
淺灰色調（LTG）
心理印象：素雅、溫柔颠放、消極排惨、成熟、雅致碰凶。
輕柔色調（SF）
心理印象：質樸暮芭、消極、平和欲低、成熟谴麦。
明亮色調（B）
心理印象：輕快、活潑伸头、童真。多用于兒童用品舷蟀。
強烈色調（S）
心理印象：強烈恤磷、有深度、充滿熱情的印象野宜。
鮮艷色調（V）
心理印象：華麗扫步、熱鬧、刺激匈子、鮮明河胎。
灰色調（G）
心理印象：資深、沉穩(wěn)虎敦、厚重游岳、成熟、含蓄其徙、保守胚迫、消極。
濁色調（D）
心理印象：鈍化唾那、厚重访锻、質樸、穩(wěn)重、高級期犬。
深色調（DP）
心理印象：沉著河哑、干練、穩(wěn)重龟虎。
暗灰色調（DKG）
心理印象：穩(wěn)重璃谨、沉悶、質樸遣总、厚重睬罗。
暗色調（DK）
心理印象：厚重、陰暗旭斥、穩(wěn)重容达、質樸。
1.5 色彩的心理印象：
暖色：紅垂券、黃花盐、橙等，讓人聯(lián)想到火焰、溫暖的太陽等比較溫暖的事物；
冷色：藍色涎显、綠色许昨、紫色等，讓人聯(lián)想到冰渗稍、雪等比較涼爽的事物；
前進色：看著比實際上離自己近，膨脹色届囚，一般是暖色，偏白的顏色是尖；
后退色：看著比實際上離自己遠意系，收縮色，一般是冷色饺汹，黑色等蛔添；
膨脹色：暖色、明度較高的顏色兜辞，讓物體看起來感覺比實際更大迎瞧；
收縮色：冷色、明度較低的顏色逸吵，讓物體看起來感覺比實際更屑性堋；
色彩的重量感：黑色比白色顯得更重胁塞，更牢固咏尝。明度越低压语，顯得越有重量。反之编检，顯得越輕胎食。
不同色調的心理印象：
1.6 五角色
將色彩分為5個角色：主角色、配角色允懂、支配色厕怜、融合色、強調色蕾总。
主角色：配色的中心色粥航，其他顏色以此為基準。
主角色決定主體生百，使畫面整體安定递雀。要用最強色。面積不需要多大蚀浆，但是要有力度缀程。
配角色（突出色）：襯托主角、支持主角市俊，專門設置在主角近旁杨凑，使主角突出。
配角色增加對比摆昧，在一成不變的色彩中增加變化撩满，突出主角色。面積與主角色形成差異绅你，會增強對比的效果（如主角色面積較大時鹦牛，面積越小的配角色效果越好）。
支配色（背景色）：作為背景環(huán)抱整體的顏色勇吊。即時小面積也能支配整體感覺。
背景色支配著畫面的整體感覺窍仰。背景色包圍主體汉规，即使面積小，在觀眾的心中會“看到”主角背后的背景色驹吮，所以也會支配整體的感覺针史。
融合色：主角色游離其他色時，置同系色于游離處碟狞，起到融合整體的作用啄枕。
但兩種顏色對立過于激烈時，加入融合色族沃，起到緩和矛盾的作用频祝，使整體更加平穩(wěn)泌参。
強調色：在小范圍點上強烈的顏色，使畫面整體更加鮮明生動沽一。
強調色讓頁面的變化更加強烈，增加整體的活力漓糙。同樣铣缠，面積與主題差異較大，可以增加對比效果昆禽。
二? 色彩搭配的流程
2.1 確定主題與用戶
首先需要明確設計的目的是什么蝗蛙、內(nèi)容是什么、受眾是誰醉鳖。
設計是解決問題的一種方式捡硅，了解產(chǎn)品的形象、用戶的角色辐棒，可以明確整體所要表現(xiàn)的風格氣質病曾，明確我們要解決的問題以及解決問題的思路與方向。如考慮不同年齡漾根、不同性別泰涂、不同層次用戶對于色彩的偏好。孩童一般喜歡明度和純度比較高的色彩辐怕；老年人一般喜歡明度和純度都較低的色彩逼蒙。這樣在選取顏色的時候才會有方向、有目標寄疏。
了解設計的內(nèi)容可以關注技術的限制是牢、觀看距離的遠近以及周圍環(huán)境的影響。如平面設計一般采用cmyk模式陕截，UI設計一般采用rgb模式驳棱。觀看距離較遠時，需要較強的對比度农曲，增加識別性社搅；反之，距離較近時需要更加柔和乳规，讓觀者的眼睛不會疲勞形葬。而夜晚模式的使用更是對于光線不足時的一種反應。就環(huán)境影響而言暮的，如果產(chǎn)品周圍的物體笙以、產(chǎn)品等顏色比較花哨、豐富冻辩，那么選用簡單猖腕、無彩色的配色會更加容易從中凸顯拆祈。
2.2 確定主色
主色調選取，一般是品牌的主打色谈息，同時需要與所要傳達的主題氣質相符合缘屹。主色所占的比例一般會比較大，對整體風格起到一個主導作用侠仇。
對于公司內(nèi)部的產(chǎn)品轻姿，一般考慮公司的品牌色。對于新的逻炊、toC的產(chǎn)品互亮，可以使用情景版的方式來確定主色∮嗨兀或者使用行業(yè)/客戶特定的色彩豹休，如針對中國電網(wǎng)設計產(chǎn)品，考慮使用其綠色作為主色桨吊。
2.3 確定輔色威根、背景色、強調色
主色確定之后视乐，單色配色一般是在色彩的明度洛搀、純度上發(fā)生變化，并且加上黑白灰等無彩色來形成配色方案佑淀。雙色配色可以考慮類似色留美、對比色、互補色等配色方式伸刃，一般而言谎砾，與主色在明度和純度上的差異不會太大。多色配色可以考慮三角形捧颅、四邊形景图、五邊形的配色方式。
色彩的對比強度碉哑，可以是色相挚币、明度、純度任一方面谭梗。需要依據(jù)整體的感覺、氣質需要來選取和調整宛蚓。激烈激捏、熱鬧的氛圍需要比較大的對比度，柔和凄吏、安靜的氛圍需要不太強的對比远舅。
色彩的冷暖感：如果都選用冷色或者暖色闰蛔，整個畫面就會偏冷或偏暖。除非有特殊的主題需求图柏，一般多色配色時序六，會需要在全是冷色的顏色中加入暖色，或者在全是暖色的顏色中加入冷色來點綴與平衡畫面的冷暖感蚤吹。
色彩的明暗：色彩的明暗就像是畫面的光影例诀，有高光、有陰影物體才會有體積感裁着。同樣繁涂，顏色的明暗對比讓畫面具有層次感與縱深感。同時二驰，全是亮色會顯得浮躁扔罪，全是暗色會顯得沉悶。
2.4 優(yōu)化細節(jié)
色彩之間的呼應：整個畫面之間的顏色并不是割裂的桶雀，這里一塊那里一塊獨立存在矿酵。而是在元素之間穿插錯落。色彩的呼應會讓整體感更加明顯矗积，也更容易讓畫面變得和諧全肮。
色彩的面積：主色與輔色所占的面積大小一般會有所差異，形成對比漠魏。常見的比例有7:2:1,倔矾。整體的感覺與印象是不同面積色彩感覺之間拉扯的結果。
環(huán)境色/光源色的影響：高光與陰影的顏色會受到環(huán)境色的影響柱锹，如黃色燈光下的物體哪自，高光會偏黃色；藍色背景上的物體禁熏，其陰影也會偏藍色壤巷。在對元素填色時，需要考慮環(huán)境色/光源色的影響瞧毙，在基礎色的色相上偏向光源色或者多層疊加顏色來讓整體細節(jié)更豐富胧华、更有質感。
兼顧“突出”與“融合”兩個方面：在完成配色的方案后宙彪，要審視整體的方案與目標氣質矩动、定位基調的一致性。如果過于沉靜释漆，則下點功夫突出一下即可悲没；如果過于喧鬧，則像著沉浸男图、融合的方向調整即可示姿。
三 色彩搭配的方法理論
3.1 方法一（色彩九宮格）：
取色板的右上角頂點為某一色相的純色甜橱。水平往左，是逐漸加入白色的過程栈戳，顏色純度逐漸降低岂傲；垂直往下，是逐漸加入黑色的過程子檀，顏色明度逐漸降低镊掖。將取色板均等分為9個區(qū)域。每個區(qū)域的顏色會給人不同的感覺命锄。與pccs的色調劃分方式有些類似堰乔，在設計軟件中選取顏色時運用比較方便。
色彩九宮格與給人的心理印象
1號區(qū)域-淡色調
心理印象：高明度低純度脐恩，溫柔镐侯、輕盈、夢幻驶冒、素雅苟翻、
2號區(qū)域-明色調
心理印象：高明度中等純度，清爽骗污、明亮崇猫、活潑、可愛需忿。多用于兒童用品等诅炉。
3號區(qū)域-純色調
心理印象：高明度高純度，鮮艷屋厘、刺激涕烧、熱鬧、華麗汗洒、年輕化议纯、沖擊力強。多用于廣告溢谤、海報等運營類設計瞻凤。
4號區(qū)域-淡濁色調
心理印象：中等明度低純度，素雅世杀、格調阀参、安靜、樸實瞻坝、舒適蛛壳、平和。高級灰、莫蘭迪色炕吸。
5號區(qū)域-濁色調
心理印象：中等明度中等純度，堅定勉痴、質樸赫模、安靜、高級蒸矛。
6號區(qū)域-暗色調
心理印象：中等明度高純度瀑罗，沉悶、成熟雏掠、沉穩(wěn)
7-8-9區(qū)域-黑暗色調
心理印象：低明度斩祭，危險、高檔乡话、暗沉摧玫、厚重、陰暗
此區(qū)域的顏色绑青，有人視為色彩禁區(qū)诬像。顏色顯臟不好搭配。當需要純黑色的替代色時闸婴，可以考慮選取這幾個區(qū)域的顏色坏挠，色彩可以偏向于主色的色相或者與主色協(xié)調的色相。
九宮格配色的使用技巧：比較簡單的方式是選擇同一區(qū)塊的顏色邪乍，在色相上產(chǎn)生變化降狠。在多色配色的情況下可以取得較好的效果。也可以考慮明度與色彩的重量感庇楞，選用亮與暗榜配、輕與重的顏色協(xié)調。
快速上手姐刁！10分鐘學會這招超好用的「九宮格」配色技巧 - 優(yōu)設網(wǎng) - UISDC
用我自創(chuàng)的十字形配色法芥牌，讓你快速入門配色！ - 優(yōu)設網(wǎng) - UISDC
看過很多配色理論還是學不會聂使？來看我總結的這3個實用技巧壁拉！ - 優(yōu)設網(wǎng) - UISDC
3.2 方法二：色相、明度柏靶、純度保持一致的配色
色相一致的配色
各個色彩色相保持一致或者接近弃理，通過明度或純度變化來產(chǎn)生差異。
明度一致的配色
各個色彩明度保持一致或者接近，不會產(chǎn)生強烈對比感咱揍，整體會顯得比較均衡尘惧。
純度一致的配色
各個色彩純度保持一致或者接近科阎，純度越高辆苔，刺激性越強算灸，純度越低，越顯得沉穩(wěn)驻啤；
3.3 方法三：色相搭配的配色
同色系配色
色相不變菲驴，在純度與明度上產(chǎn)生變化，形成配色方案骑冗。單色系配色赊瞬，比較容易做出效果。
鄰近色/類似色配色
色相跨度較小贼涩，容易形成比較清晰一致巧涧、意圖明顯的的效果。
中差色配色
色相環(huán)上顏色位置呈90°遥倦，具有一定的對比但不是太強烈谤绳，高級、華麗袒哥、干練闷供。
對比色/互補色配色
色相環(huán)上二者成180°，對比強烈统诺，容易形成炫光效果歪脏，一般會使用面積差異或者明度差異來讓頁面更加穩(wěn)定。
三角形配色
色相環(huán)上顏色呈三角形粮呢，對比較為強烈婿失、穩(wěn)定。
四邊形配色
色相環(huán)上顏色呈四邊形啄寡，有一定的對比豪硅，色彩數(shù)量比較豐富。
五邊形配色
以五邊形的方式從色環(huán)選取顏色挺物，色相之間的對比比較均衡懒浮。色彩數(shù)量豐富，熱鬧识藤、活潑砚著。
3.4 突出型 —— 如何突出
理論 —— 為什么要突出
整體顯得模糊時，應該刪除曖昧模糊的地方痴昧，突出主題稽穆，大力強調作為主角的部分，整體更加清爽踏實赶撰。
當配色過于沉重壓抑時舌镶，應該減少黑色柱彻，增加鮮艷顏色，提升明度餐胀、飽和度哟楷，整體明朗、生動否灾。
方法 —— 整體思路就是增加對比（包括色相吓蘑、明度、純度坟冲、面積、位置）
對比越強溃蔫，顯得有活力健提、精神飽滿；對比越弱伟叛，則更加安定私痹、穩(wěn)定。
色相
加入對比色：對比色是主色的補充统刮，兩者形成沖突紊遵。注意面積、明度侥蒙、純度暗膜、位置的調節(jié)，避免畫面過于激烈鞭衩、不協(xié)調学搜。
準對比色帶來平穩(wěn)的對比：比直接使用對比色的效果更緩和一些，即使用稍偏離對比色的補色论衍。
全色相型：色彩種類豐富瑞佩，畫面熱鬧、開放坯台，類似五邊形配色炬丸。
三角形配色：平衡、穩(wěn)定蜒蕾，類似三原色的配色稠炬。
十字型：兩組對比色，在色環(huán)上構成“十”字咪啡，有力度酸纲、緊湊。
黑色起突出作用：黑色凸顯出力量感瑟匆，能夠襯托出有彩色的鮮艷闽坡。
白色在不破壞畫面感覺的基礎上起強調作用：白色作為中立色栽惶，不破壞其他顏色〖残幔可以作為強調色外厂、間隔色。
用淡色群固定淡色主角：淡色主角代承，背景色汁蝶、輔助色等不應該過于強烈，搶過主角的風頭论悴。整體的淡色調掖棉，讓畫面氛圍更加輕快。
明度/純度
加強中心部分的方法：提高純度膀估；強化明度對比幔亥；強化色相對比；
加入鮮艷色彩：鮮艷色調顯得有活力察纯，暗色調顯得莊嚴帕棉、高雅。
減少一部分黑色：與加入鮮艷顏色是一個道理饼记，讓色調往明亮香伴、鮮艷方向靠近一些。
設置明度差：也就是增加對比具则。對比產(chǎn)生力量即纲、躍動的活力。色彩的對比包括色相博肋、明度崇裁、純度、面積的對比束昵。
制造一個亮點：抑制背景色拔稳，突出主題色的明度、純度锹雏，與背景色拉大面積對比巴比。
面積
增大色彩面積：畫面過于單調、空洞礁遵，可以適當增加色彩的面積轻绞，減少留白，增加圖版率和視覺度佣耐。（圖版率高政勃，整體更加活躍、熱鬧兼砖，適合快速瀏覽奸远。圖版率低既棺，則更加安靜、偏向于細細閱讀懒叛，適合閱讀丸冕、文檔等應用的設計。詳見簡書 - 寫文章）
位置
分離配色：顏色之間不按照色相環(huán)的順序排列薛窥，而是讓對立的顏色放到一起胖烛，增加沖突，制造動感诅迷。
重心：深色（明度低）在上佩番，淺色在下，重心就會上移罢杉，不穩(wěn)定而形成動感趟畏。防止，則重心靠下屑那，更加安定。
3.5 融合型
3.5.1 為什么融合
畫面色彩不協(xié)調/過于喧囂艘款，使用三屬性（色相持际、明度、純度）哗咆、位置蜘欲、面積來緩和氛圍，整體更加和諧晌柬。
3.5.2 如何融合
色相&明度&純度
色相靠近：同系色姥份、鄰近色等，色相差異較小年碘，測試穩(wěn)定澈歉、溫馨、保守屿衅、恬靜的效果埃难。
雙色調：色相相同或相近，色調形成差異涤久，淡色&明色/明色&濁色等的組合涡尘。
對比雙色調：兩組雙色調，色相之間形成對比响迂。雙色調的平穩(wěn)感與色相對比的緊湊感共存考抄。
統(tǒng)一明度：色相差異較大時，采用相同的明度蔗彤，整體會給人安定的感覺川梅。
靠近色調：純度與明度組成色調疯兼，同樣的色調可以強化該色調帶來的感覺，統(tǒng)一整體的畫面氛圍挑势。
通過群化法收斂混亂：將色相镇防、明度、純度中的一部分共通化潮饱，會得到統(tǒng)一感来氧。
濃淡法：按照色相的順序或者明度的順序配色，形成穩(wěn)定的節(jié)奏感香拉。
微差：近似的色相與明度啦扬，整體會比較寧靜。
靈活運用令人生厭的色調：使用小面積強調色十分有效凫碌。強調色的選用：高彩度的同色系色彩扑毡、準高彩度的對比色彩、高明度色彩盛险。
位置
通過重復融合整體：在不同的位置放置一樣的色彩瞄摊，形成呼應，整個畫面更好地融為一體苦掘。
利用白色間隔使畫面更柔和：在過于濃艷的配色中使用白色間隔换帜，可以緩和色相之間的強烈對比。
3.6 其余：
從自然中獲取配色 ：
選取自然風光的照片鹤啡，進行馬賽克處理惯驼，選取其中的顏色作為配色方案。
選擇與主體一致的顏色：
設計材料中有一些必須加入畫面的圖片递瑰、圖案等祟牲，可以在其中吸取顏色，作為字體抖部、裝飾元素的顏色说贝。讓整個畫面更加協(xié)調。
插入間隔色：
主體與背景色慎颗、輔色等產(chǎn)生沖突時狂丝，可以在二者中間插入間隔色，進行一個區(qū)分哗总、緩沖與過渡的作用几颜。間隔色一般為無彩色或者濁色調色彩。
色彩印象：
嬰兒→兒童→成年→中年 —— 淺色調讯屈、輕柔色調→明亮色調蛋哭、鮮艷色調→強烈色調、濁色調→深色調涮母、灰色調谆趾；
男性 —— 純色躁愿，強對比；女性 —— 柔和沪蓬、素雅彤钟，弱對比。
朝氣跷叉、活力 —— 暖色逸雹、全色相；
可愛 —— 增加白色面積占比云挟、在顏色中加入白色梆砸；
素雅 —— 淡雅明快的色調，弱對比园欣；
豪華 —— 暖色帖世、鮮艷色調、強對比沸枯；
自然 —— 明亮日矫、素雅的濁色，在色調圖中的輕柔色調绑榴、強烈色調哪轿、濁色調。
力量彭沼、速度 —— 鮮艷缔逛、厚重的色調备埃，對比強烈姓惑；
幻想、神秘 —— 同色系按脚，自然界中少見的于毙；
漸變：
采用色調一致的顏色，通過色調來形成不同的氛圍辅搬。
·同類色漸變：柔和唯沮、輕微、細膩堪遂。具有柔和的光影感介蛉。
·鄰近色漸變：時尚、耐看溶褪、活躍
·互補色/對比色漸變：沖擊力币旧、吸引眼球、時尚猿妈。
四 其余需要注意的事項
先確定版式吹菱，再選擇配色巍虫。
色彩的數(shù)量與協(xié)調：
有彩色的數(shù)量較多，容易形成熱鬧鳍刷、絢麗的氛圍占遥。但是顏色數(shù)量越多，協(xié)調起來越難输瓜。色彩數(shù)量較少會比較有力量感瓦胎，給人感覺更加堅定、方向明確前痘；
可以在明度或純度上保持相似性凛捏。也可以加入無彩色作為區(qū)分、過渡芹缔∨餮ⅲ或者將某一種顏色用在所有元素上，讓整體更加統(tǒng)一最欠。
多色配色：
色相示罗、純度、明度等至少要有一個保持一致或接近芝硬。如多色相的（色彩種類較多）時蚜点，應該保持各色彩的純度和明度至少一個差別不大。要是都差別很大拌阴，則容易不協(xié)調绍绘。可以將其中一個顏色的明度或純度提高迟赃，進行有意凸顯與強調陪拘。
多色配色也要講究顏色之間的呼應，如某些細節(jié)部分顏色與大面積色彩保持一致纤壁，而非一個顏色占據(jù)一塊左刽。
多色配色時，顏色之間的比例也需要權衡酌媒。比較均衡時欠痴，整體比較熱鬧。主次分明時秒咨，與大面積色的感覺更靠近喇辽。
疊加模式：
通過不同的疊加模式（柔光、疊加雨席、顏色加深等）菩咨，讓圖片或者色彩之間融合更加自然。
五 配色相關的網(wǎng)站/工具
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_高級在線配色器_配色網(wǎng)
Material Design Color, Flat Colors, Icons, Color Palette | Material UI
參考：
CMYK 和 RGB 這兩種色彩模式本質與區(qū)別在哪？ - 知乎
快速上手旦委！10分鐘學會這招超好用的「九宮格」配色技巧 - 優(yōu)設網(wǎng) - UISDC
用我自創(chuàng)的十字形配色法奇徒，讓你快速入門配色！ - 優(yōu)設網(wǎng) - UISDC
看過很多配色理論還是學不會缨硝？來看我總結的這3個實用技巧摩钙！ - 優(yōu)設網(wǎng) - UISDC
高手的平面課堂！最容易上手的配色方法 - 優(yōu)設網(wǎng) - UISDC
NCD WEB : NCD Busines : Image Scale System
用一個實戰(zhàn)項目查辩，幫你掌握科學的 UI 配色方法 | 優(yōu)設網(wǎng) - UISDC
《七日掌握設計配色基礎》
