為零基礎新手量身打造的安全配色指南

 　　今天對一些配色技巧和方法做一個分享和總結，無論你有美術基礎/色彩基礎還是零基礎，都可以使用此方法創造出安全的配色方案。

　　所謂安全配色，就是遵循一些設計規范，色彩規范，適應於Web和其它方面的UI設計，在這些色彩的基礎上，只要能控制好比例，就可以大膽的配色，無需參考，無需臨摹，無需借鑒。一種感性的安全配色，一種符合標准的安全配色。

　　這次分享介入了一些自己學習過總結過的色彩理論，當然如果同學們能夠學習鞏固好自己的色彩理論，扎實好自己的美術功底，對玩轉色彩是非常有好處的哦。本文章由沒位道博主@Chuckie-Chang 分享整理, 歡迎大家交流。

　　學習配色的3種方法

　　學習方法 1: 顏料塗鴉

　　買一點顏料，水彩，水粉，丙烯都可以，學習一點點色彩的基礎知識，然後使用各種顏料大膽的調色，你會發現，原來色彩與色彩之間很神奇，又那麼好玩，何為優秀?無需去考慮，跟著自己的喜好走，亂塗亂畫，使用顏料大膽調和。

　　學習方法 2：觀察生活

　　比如我們的木質桌子，它由那些相似的棕色組成?雜點，灰塵，晚上使用台燈或者白天的自然光下，桌子的顏色的飽和度，明暗度會有什麼改變。再如外面的大樹，不同的時間，它的陰影的長短，深淺，角度，有什麼不同，不同植物的綠色有什麼樣的差別，多看看，多拍拍，你會有很多色彩的感覺。

　　學習方法 3：玩轉軟件

　　比如使用Photoshop CS以上的插件Adobe Kuler, CC2015版本是Adobe Color Themes. 觀察他們的色彩模式，色環角度，顏色位置，也能大幅度找到很多色彩感覺。

　　要零配色，不經過任何參考創造UI界面設計的安全配色方案，我們可以通過四個階段來訓練，來學習。

　　第一階段，色彩知識理解

　　熟悉一下基本的『常用的色彩常識』，快速熟悉，你可以不去記憶概念，術語解釋，只需要看圖即可!!!當然如果你學習精神可佳，自己去學習了解下術語概念啦。

　　(這一階段的圖片多出自互聯網，自己用過的一些配色軟件截圖，其它美術書籍，都是些比較常見的圖片，這裡我根據自己學習理解程度，根據自己的喜好做了一定的篩選整理)

　　如果要對色彩把控准確一些，多一些感覺，我們可以學習一些常用的色彩知識，當然一些不是怎麼用的了解一下，我這裡也不列出來，下面是我自己常用的一些色彩知識。

　　(至於很多色彩術語的准確，詳細的解釋，我就不重復寫出來啦，想了解的自己去百度百科或者買點美術書籍學習一下，這裡我主要是直觀的觀察色彩，使用感覺去了解基本的色彩原理)：

　　1. 色環、色相、明度、對比色、冷暖色

　　直接看這種圖，大概你就懂這些色彩術語指什麼了

　　2. 三原色

　　三原色分為兩種：

　　a)光源、顯示屏：紅綠藍(RGB)，設計常用。

　　b)顏料、油漆桶、美術：紅黃藍。

　　3. 無色系

　　說簡單點，黑白灰，現實生活中，無色系色彩是相當多的。

　　4. 類比色，相似色

　　直接看圖，色環中的角度，一目了然。

　　5. 互補色，對比色

　　直接看圖，180度對角線即是。

　　6. 單色

　　某個色彩的『明度』變化即是。

　　7. 分裂補色（同時用補色及類比色的方法來確定的顏色關系）

　　稍微有點復雜的色彩關系，但是也蠻常用的：

　　8. 二次色（三位一體）

　　像不像個魔法陣，可以旋轉取色哦。

　　9. CMYK

　　CMY是3種印刷油墨名稱的首字母：青色Cyan、品紅色Magenta、黃色Yellow。而K取的是Black最後一個字母，之所以不取首字母，是為了避免與藍色(Blue)混淆。

　　常用的印刷色，了解一下，做UI我就不怎麼考慮這個啦。

　　10. 色彩心理學

　　這個是我自己看了美國視覺設計教材後摘下的，也就是大家常說的色彩的內涵，色彩傳達的意義。

　　11. 偏色調整

　　當你使用顏料玩色彩的時候就比較常用啦，如果用Photoshop 去玩的話，那是可以反悔的。

　　偏黃：減黃

　　偏紅、品：加青(紅色的補色)、減品

　　偏紫：(多大量藍，少量紅)加黃，減品

　　偏綠：加品

　　第二階段，配色軟件運用

　　快速了解了上面常用的一些色彩知識後，就可以使用軟件進行配色啦，這裡我就歸納整理了一些方法，大家可以做參考，由於每個人的配色習慣不同，僅作參考。

　　(這一階段的圖片是自己親自實操截圖的)

　　1. 馬賽克配色法

　　這種方法非常簡單，不需要使用軟件搭建色彩關系，隨便選一張圖片，建議『風景照』，因為大自然的色彩是最和諧的，最安全的，不建議使用別人的插畫或者設計作品來馬賽克。

　　a)首先要想想自己做的設計的目標是什麼?我是要做個人網站?還是要做萬聖節UI?還是要做企業產品站?還是要做女生主題?還是…….

　　b)然後根據你了解的色彩心理學，如果是要做女生使用的UI，那我們可以使用粉紅，紫色等等女生會喜歡的鮮艷的色彩，那我們嘗試找一張『秋天，落葉，唯美』風景照

　　下圖是我直接百度找的，小圖大圖有水印無水印無所謂，我們不拿來商用，我們只是拿來『馬賽克』，不會侵犯版權，沒事。

　　c)然後使用Photoshop把它馬賽克了，濾鏡下的馬賽克，記得要大大的碼。

　　做到以下的效果：

　　d)好了，配色方案已經出來了，很安全，你還要怎樣?如果你嫌棄這個顏色，要調整，圖層建立一個飽和度調節層即可，方便快速。

　　根據需要調整即可，我箭頭標注的都是安全的色彩哦，自己也可以篩選一些。

　　2. Photoshop 插件法（Adobe Kuler, Adobe Color Themes）

　　這種方法直接使用高版本的Photoshop配色插件即可，默認都自帶，CS6至以上的版本都默認自帶了其中一種。

　　a)比如我要設計一個聖誕節的網站，聖誕節有糖果，有聖誕樹，那我就需要定義一個『核心色』，綠色或者紅色，聖誕樹或者聖誕帽的顏色。

　　然後我就可以直接使用軟件大膽建立配色方案啦。

　　這裡我選擇『綠色』，我不用在意我的綠色的飽和度明度是怎樣選擇的，我只要根據自己的感覺，先選擇一個綠色就行。

　　好，就它了，選擇了很亮的綠色，也不算自然綠。

　　b)然後把工具欄的背景色設置成這個色，方便我們直接在插件中調用。

　　c)打開插件，把我們的背景色應用到插件的『基礎色 base color』中, 點擊箭頭所示按鈕即可

　　選擇色彩的搭配方式，依次是：相似色、單色、二次色(三位一體色組合)、互補色(對比色)、復合色、暗色(陰影色)、自定義。

　　選擇後，你可以拖動色彩的控制點變換，確定後點擊如圖的按鈕即可添加到色板中使用

　　色板如下：

　　好啦，配色方案已出，如果你需要，可以增加對比色，我自己常用的3種色彩搭配模式是：相似色，單色，對比色(適當)

　　在你正式設計web或者APP的界面的時候，你就要控制好顏色的比例，這個需要長期積累，但是大家只要記住，對比色適當，特殊的一些風格可以用到1/2，但是大部分時候對比色都占少數，單色鋪大色。

　　第三階段，色彩記憶感

　　熟悉web設計中的常用配色，甚至可以多記憶，培養一種下意識的色彩感覺，記憶常用的色彩的英文名稱和中文名稱。

　　(下圖是引用了美國網頁設計規范中的視覺某部分，由於Web規范顏色有上百種，我們不可能一一記住，我們只需要熟悉這幾種常用的色彩，有一個感覺，背景色和文字色，那我們在配色的時候也可以直接引用，我們只要記住了這些常用色在色板中的位置，它的明度和飽和度的差異，那我們很容易直接調用它們。)

　　常用背景顏色

　　常用文字顏色

　　第四階段，高質量色彩資源探索學習

　　學習譬如Google design中的Color，Material design等新玩意兒，學習新的色彩思維和創意方法。

　　Google.com/design

　　(下圖是網站截圖)

　　好啦，通過以上4各階段的學習，或者一般情況學習到第二個階段，你就可以運用軟件安全的創造一套配色方案。不需要太深的色彩基礎。

　　如果你確實很懶，沒關系，只要掌握了第二階段的軟件配色方法，就OK，當然色彩的比例要自己多練習多把控了，並不是說你創造了配色方案就能做出漂亮的作品。這就需要我們掌握以下色彩比例控制!!