當前位置:
首頁 > 創意 > 教你學會設計配色!思路+技巧

教你學會設計配色!思路+技巧

圖/文Nataly Birch


不論是品牌設計還是其他設計,配色都是其中最關鍵也是最具有挑戰性的組成分。完美的配色方案並不是隨便挑兩個色彩就可以投入使用,實際上,優秀的配色背後有許多實用的規則在做支撐。今天的文章就來幫你做好優秀的配色方案。

教你學會設計配色!思路+技巧

從色輪開始我們從開始學設計接觸色輪,但是看起來很簡單的色輪直到今天依然是設計師手中最實用的利器。色輪不僅僅是一系列色彩的簡單組合,它暗含色彩之間的關係和規律,可以幫你構思配色,確定色彩之間的搭配是否協調。推薦閱讀:實用方法幫你輕鬆配色!

教你學會設計配色!思路+技巧


色輪中包含了原色、間色和複色:


原色:紅色、黃色、藍色

間色:綠色、紫色、橙色


複色:天藍色、羅蘭紫、玫瑰紅、橘紅色、黃綠色等


三原色想必大家都了解,值得注意的是,間色通常指的是兩種原色混合而得出的色彩,所以它也叫第二次色。這樣一來,複色也容易理解了,它是兩種間色或者原色與間色呼喝而形成的色彩,所以它也有個名字叫做第三次色。

教你學會設計配色!思路+技巧


接下來的環節就很重要了:如何將色輪上的色彩合理的搭配到一起。

相似色:色輪上相鄰的三種色彩搭配在一起


互補色:色輪上來自不同兩邊完全相對的色彩是互補色


分離互補色:挑選一種色彩,然後再在色輪左右兩側上挑選一組互補色加入進來


雙互補色:這是最難創建的互補色,你需要挑選一個原色,然後在色輪上挑選兩對互補色與之進行搭配


單色調:使用一種色彩和它的同色系色彩來搭配

三色調:使用色輪上相互距離相同的三種色彩來搭配


絕大多數的配色工具會使用色輪來幫你挑選配色,相當省心。


黑色、白色和中性配色挑選一兩個明亮的色彩並不足以支撐整個配色方案,那些經常被人忽視的色彩可能佔據整個設計的色彩中的絕大部分,它們就是以黑和白為代表的中性色。

教你學會設計配色!思路+技巧

中性色為其他色彩搭建了表現的舞台,讓他們展現性格營造氛圍。中性色更多的時候是在背景、細節上為整個項目營造出或冷或暖的氛圍,讓導航擁有更好的可用性,讓排版的可讀性更優秀,視覺上具備良好的引導性。


色調和色彩少有設計師直接在色輪上取色就直接拿來用的,因為絕大多數時候,配色是需要經過調整才能用的。這個時候,你就需要調整色彩、色度和色調這些屬性:

教你學會設計配色!思路+技巧


色彩:顏色+白色


色度:顏色+黑色


色調:顏色+灰色/白色/黑色


這些調整方式能改變色彩的飽和度,讓你的配色方案變的不一樣。完成基礎的配色之後,通過改變色彩、色度和色調來擴充整個配色,這樣確保了配色中的顏色都處於同一系,有增加了配色的豐富度。



謹慎跟隨趨勢如你所知,每年隔三差五都會出幾個「配色流行趨勢」,就像時尚圈中的「流行色」一樣。這些配色雖然看起來相當有意思,但是需要謹慎使用:如果要長期使用,可能並不那麼好用。如果你真的想跟隨某個趨勢,最好經常使用,認真打磨,讓它成為你的配色方案列表中的一員。推薦閱讀:2016年最時髦的色彩搭配方案

教你學會設計配色!思路+技巧


一般情況下,你所創建的配色方案,應該是經得起時間考驗,能一次又一次使用的(色彩是品牌形象和品牌識別的根本)。所以,最好是將一系列真正「屬於你的」的配色方案,同時尚的趨勢結合起來,最大化的使用。

教你學會設計配色!思路+技巧


避免彩虹式配色色彩的使用應該是有節制的。你的配色方案中並不需要5種甚至10種色彩同時存在,最好的配色方案通常只是2~4種色彩的搭配。

教你學會設計配色!思路+技巧


為什麼每個色彩在整個設計中都有它的作用,而每個色彩都應該有各自發揮的空間,並且被人所注意到。太多的色彩聚合到一起,就只是顏色而已。

教你學會設計配色!思路+技巧


好的設計和配色方案會讓每種色彩具備它獨有的作用與角色,讓色彩各司其職,用戶也更容易融入到整個設計中來,也更容易同網站進行交互和溝通。


為文本元素單獨挑選色彩當你思考色彩搭配的時候,文本元素應當使用什麼樣的色彩是非常值得你思考的。除非文本色彩被固定死了只能是黑白灰,那麼你應當考慮一下文本的配色問題。

教你學會設計配色!思路+技巧

教你學會設計配色!思路+技巧 點擊播放 GIF/22K

教你學會設計配色!思路+技巧


這個道理並不難理解。以自然為主題的網站可能會使用綠色和棕色,而銀行類的網站則大多使用讓人信任的色彩,比如藍色。網站有著怎樣的立意?它要展現什麼樣的主題,傳達什麼樣的情緒?在這樣的構思之下,可以幫你更好的建立配色方案。


堅持遵循配色方案當你創造出一套優秀的配色方案的時候,你會盡量將這個方案貫穿整個項目。這個時候,你應當建立一套規則,來確保整個配色能夠系統化地貫穿到整個項目當中。

教你學會設計配色!思路+技巧


這個過程中,你可能會思考下面的問題:


你同時在處理色彩有哪些?


哪些色彩是通過調節色彩、色調和色度而創造的?


是否為文本設定單獨的色彩?


是否具備成系列的配色?


能否在配色方案之外再單獨加入獨特的色彩?

教你學會設計配色!思路+技巧


感謝大家的觀看, 希望可能幫到大家!


請您繼續閱讀更多來自 平面設計 的精彩文章:

純金屬名片,你愛不愛?
您可能感興趣

平面設計配色搭配技巧
平面設計中的配色技巧
卧室配色有什麼技巧?
紹興裝潢公司 家裝配色技巧
網頁設計配色方法論:配色秩序
全新配色設計 簡約耐看的「亞麻」配色
設計書單 | 只學配色?抱歉!救不了你的設計
設計師必備配色方案
國外兒童房配色技巧,跳脫傳統思維,洋為中用玩轉個性配搭
鄉村風格設計的配色秘訣
時尚雜誌不會告訴你的配色技巧//零基礎也能變為配色高手!
學好配色給卧室換新裝
設計配色方案分享|色彩靈感
靚麗家裝色彩巧搭配 抓配色原則成為調色高手
設計配色方案分享
一組實用的設計配色方案
你的形象價值百萬:國際形象顧問教你用配色技巧穿出大牌氣質!
穿衣服也講究配色,還記得物理學過的三原色嗎?
還在為海報設計的配色方案發愁?快來看看配色技巧