零基礎也能學會，超級簡單實用的配色方法

K先生，站酷網十大人氣設計師，10W+粉絲，每周四晚9點，準時更新一篇高品質原創設計文章。

色彩對於平面設計的重要性不言而喻，正確美觀的配色是優秀設計作品中不可或缺的因素，也可以說在所有視覺領域裡，色彩都是基礎。但是很多新手設計師都有類似的困惑，就是即使學習了色彩理論，仍然不能很好的運用到工作當中。

在學習配色之前首先要做好版式，因為只有在版式好的前提下，正確美觀的配色才會起到加分的作用。相信很多設計師都有過類似的經歷，就是在最開始接觸設計的時候，都用過一種配色方法，就是從圖片上吸取顏色，然後運用到設計當中，但是照搬圖片中的顏色並不能保證做出好的設計。

那麼本期文章主要講解如何運用圖片中的色彩來進行正確美觀的色彩搭配，希望對新手設計師或對配色感到迷茫的設計師們有所幫助。

色彩吸取的實用方法主要分為三步：

很多武俠小說中都有對武學「終極奧義」的描述，那麼設計的「終極奧義」就是審美和經驗，同時它們也是提高配色能力的重要因素。提取色彩可以作為設計師日常的練習，通過多看多分析優秀攝影作品或設計作品中的配色，來提高自己的色彩敏感度。

並不是任何圖片中的顏色都適合你所設計的作品，設計之前要對設計作品所要傳達的內容進行仔細的思考和分析，然後觀察圖片中的色相、色調、明度、氣質、氛圍等等是否適合自己的設計，色彩可以傳達非常細膩的情感，所以一定要加入主動性創作。

將提取的顏色進行分析重新整理之後就要運用了，運用顏色也並非想像的那麼簡單。首先要觀察自己的設計作品當中可填充顏色部分的色彩承載量，以及是否有圖片、圖案、標識等有色因素；其次確定主色和副色以及是否需要加入調和色；最後綜合考量以上因素運用顏色。

首先做好案例的版式，顏色用黑白灰來代替，也就是俗稱的黑白稿。

在軟體中吸取顏色相信大家應該都會，就是用PS中的吸管工具在圖片上點擊。之所以選擇這張圖片來提取是因為它的色彩組合比較簡單和明顯，色彩大致被劃分成四個區域。

這是對參考圖片基本顏色較為完整的提取，基礎色相為紅藍黃。

由於我們設計的版式並不複雜，並且人物圖片的顏色主要是以白色和黃色為主，對整體的配色影響不大，因此當我們進一步分析這組色彩時，去掉了一些色相相近的顏色，只保留色彩傾向較明確的顏色。

案例風格比較偏向年輕時尚與潮流，而在軟體中直接吸取圖片的顏色結果往往比較灰，如果運用現在所提取的顏色，在色調上會略微沉悶，缺少了一些明快感與活力。

所以我們需要讓色相變得更有傾向性，所謂色彩傾向性其實很簡單，就是說紅色就讓他看起來更像紅色，黃色就讓他看起來更像黃色。所以最終我們進行了綜合的調整，讓顏色更鮮明並且只保留三種顏色。

首先分析一下我們案例中可填入色彩的元素，然後確定畫面的主色，這裡我們就順勢而為，按照原圖中色彩的比重來搭配，將藍色作為主色填充到畫面背景層。

接下來將副色紅色填充到人物下方的色塊中。

然後再將黃色填入到主標題下方的色塊中。

雖然黑白灰都可以作為調和色，但這個案例中文字用黑色會讓整個版面顯得不夠通透，所以最後我們將文字的黑色換成了白色，整個配色過程到此就完成了。

同樣是這個版式，我們換一張圖片提取顏色試試。

這張圖片的色彩組合也相對比較簡單，色彩的層次也很清晰，只需要在亮部與暗部分別提取顏色即可。

這是對參考圖片較為完整的顏色提取，整體偏向黃綠相鄰兩色的搭配。

同樣需要篩選色彩傾向性較明確的顏色，去掉相似的顏色，而這裡我們保留了基調相近的淡色調。

最後再對顏色進行細微的調整，讓原本偏灰的色調再純一些，灰色作為調和色可以忽略不計。

這組顏色的運用同樣沒有做重新組合，依然按照原圖的色彩比例來確定主色和副色，首先將主色填充到畫面背景層。

其次將副色黃色填充到人物下方的色塊中。

再次將綠色填充到主標題下方的色塊中。

同樣的原理，這個版面中的文字也不適合用黑色來調和，所以換成白色。在此需要強調一點就是配色也是反覆調整的過程，並不是某個顏色只能用在某個地方，一切都是以最終呈現的視覺效果為準。

案例二幾乎是純文字的版式，開始也是先用黑白來代替。

這張圖片中的色彩並不多，提取也是比較方便的。

這是對參考圖片基本顏色較為完整的提取，整體的色調比較偏暗。

然後進行分析和篩選，這裡去掉了調和色黑色和色調較暗的藍色。

最後做綜合調整，讓整體的色調更亮更純一些即可。

提取顏色的圖片中色彩的比例分配對我們的應用參考意義不大，所以這裡我們可以加入主動性創作，將藍色作為主色填充到背景層當中。

接下來要思考紫紅色與青綠色的運用，針對這個設計而言，需要突出的是文字部分，而促銷的英文線框作為底紋裝飾性元素要弱於文字，而紫紅色與背景層的藍色對比更加強烈，因此用紫紅色填充文字部分。

最後將青綠色填充到底層文字線框中完成配色。

同樣這個版式我們換一張圖片提取顏色來填充。

這張圖片雖然看上去元素比較雜亂，其實顏色還是比較清晰的。

這是對參考圖片基本顏色較為完整的提取，色彩比較豐富。

接下來要做的是對顏色進行整理和篩選，這組顏色的近似色比較多，而根據案例的風格這裡提取色調偏輕、色彩傾向較明確的顏色。

最後進行細微的調整，使整體色調符合年輕時尚的氣質。

同樣先確定畫面的主色和副色,這裡我們參考原圖後將青色作為畫面主色填充到背景當中。

其次就是黃色與綠色的運用，對於這個版面，如果文字部分用黃色的話，會造成文字的識別度不是很好，因此將綠作為文字填充色，而黃色可以作為點綴色填充文字線框。

最後將黃色填充到底層文字線框中，配色結束。

案例三雖然幾乎也是純文字的版式，但是相對於之前的案例，這個案例中多了顏色重疊的部分。

這張圖片的色彩組合也比較簡單，基本就是紅綠對比色的搭配。

這是對參考圖片基本顏色較為完整的提取，分別在圖片中的亮部和暗部進行提取。

接下來要做的就是對顏色進行整理和篩選，這裡同樣去掉了相似顏色中的淡色調，只保留相對更具有傾向性的顏色。

最後調整色彩純度，讓整體的色調更純一些。

首先確定主色，這個案例是關於雙十二促銷的內容，如果想營造喜慶熱鬧的風格，那麼紅色作為主色再適合不過了。

為了形成對比，接下來將副色綠色填充到數字中。

由於紅色和橙色是相鄰色，既不會產生突兀的對比又能起到很好的點綴效果，因此將橙色填充到背景的雪花上。

提取的有彩色已經全部用到了畫面當中，但是很明顯文字的調和色黑色在這個畫面中同樣不適合，會造成壓抑的氛圍，所以最終將文字填充為白色，整個配色過程完成。

按照之前的方法，同樣這個版式我們換一組顏色嘗試。

這張圖片的色彩也比較明確，方便提取。

這組顏色是對參考圖片基本顏色較為完整的提取，整體色調偏暗。

先對顏色進行整理和篩選，去掉了一些相似的顏色，只保留具有明顯傾向性的顏色。

由於原圖中綠色的部分比較少，因此這裡把青色與綠色做一個結合，然後調整整體的色調。

這個配色的方向也是按照原圖中的色彩比例，首先將較純的黃色作為主色填充到畫面的背景當中。

同樣為了形成對比，接下來將副色青綠色填充到數字中。

然後用深黃色填充背景層上的雪花。

與上一組顏色的道理相同，雖然理論上文字使用黑色也是可以的，但是白色會讓畫面顯得乾淨明快。配色一定要加入主動性的創作，這個主動性創作不但是指對提取出的色彩進行篩選調整，也可以指個人的喜好，當然前提是個人的喜好要建立在一定的審美和經驗的基礎上。

以上就是本期文章的全部內容，通過提取顏色——分析顏色——運用顏色三步走的方式來講述如何運用圖片中的色彩來進行配色，旨在將配色化繁為簡，為自己所用。

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！