新手配色手冊!可能是最簡單實用的色彩搭配指南

編者按:今天的色彩搭配教程是針對零基礎的新手寫的,分別是<基礎:色彩的組成>、<進階:色彩的搭配>、<高階:調色三要素>3個部分,有圖有實例,文末推薦了一個網站一個視頻,都是幫你提高配色技巧的,建議閱讀。

1. 基礎教程:色彩的組成

關鍵詞:原色 間色 復色 色環

新手配色手冊!可能是最簡單實用的色彩搭配指南

所有的色彩都是源自"紅黃藍"三種原色。有人可能會潛意識地認為三原色是"紅綠藍",但其實不是。紅綠藍是顯示上的三原色,和美術上的三原色不一樣。

新手配色手冊!可能是最簡單實用的色彩搭配指南

紅黃藍兩兩混合后得到三個二級色即“間色”綠橙紫。

新手配色手冊!可能是最簡單實用的色彩搭配指南

原色與間色混合或間色與間色混合而形成越來越多的顏色,稱之為“復色”。

新手配色手冊!可能是最簡單實用的色彩搭配指南

最后由三種原色、三種間色和六種復色組成的系統就統稱為十二色環(colorwheel),也是學習色彩搭配的基礎。

2. 進階教程:色彩的搭配

關鍵詞:單色 近似色 補色

十二色環的存在并不只是一個擺設,它巧妙地建立了配色系統。

常見的色彩搭配有:單色搭配,近似色搭配,補色搭配,分散互補色搭配,三角對立的配色搭配……

單色搭配(monochromatic)

新手配色手冊!可能是最簡單實用的色彩搭配指南

這個不用解釋,就是只用一種顏色的搭配。

類似色搭配(analogous colors)

新手配色手冊!可能是最簡單實用的色彩搭配指南

色環上任意三個相鄰的顏色,被稱為類似色。通常認為,它們放在一起會很和諧。

類似色是選擇相近顏色時十分不錯的方法,可以在同一個色調中制造豐富的質感和層次。理所當然成為配色法則中最經濟適用的一條。

新手配色手冊!可能是最簡單實用的色彩搭配指南

一大片近似色將梵高叔叔的憂郁高冷展現的淋漓盡致。

新手配色手冊!可能是最簡單實用的色彩搭配指南

再放眼時尚圈,同類色也是除了黑白灰以外最安全的穿搭法則哦!

新手配色手冊!可能是最簡單實用的色彩搭配指南

但是在選擇的時候要注意比例上的調和,選一個為主要顏色。

新手配色手冊!可能是最簡單實用的色彩搭配指南
補色搭配(complementary colors)

新手配色手冊!可能是最簡單實用的色彩搭配指南

色環上相對的兩種顏色,被稱為互補色。放在一起,會形成對比效果。比如藍色和橙色、紅色和綠色、黃色和紫色等。

互補色有非常強烈的對比度,在顏色飽和度很高的情況下,可以創建很多十分震撼的視覺效果。很多廣告和招貼為了吸引眼球經常會使用,用作強調提示作用效果是極好的。

新手配色手冊!可能是最簡單實用的色彩搭配指南

但是記得,在文本中使用互補色是很糟糕的。

要用好互補色,最好的辦法就是:改變明度、降低純度,看起來會柔和許多。下面看幾個例子。

新手配色手冊!可能是最簡單實用的色彩搭配指南

降低純度后的互補色相當和諧。

新手配色手冊!可能是最簡單實用的色彩搭配指南

《天使愛美麗》中的這個場景,是一個典型的紅綠互補色。

新手配色手冊!可能是最簡單實用的色彩搭配指南

室內裝修中互補色也很管用,清新又不失活潑。

分散互補色搭配(split-complementary colors)

新手配色手冊!可能是最簡單實用的色彩搭配指南

尋找三種顏色,其中兩種互相類似,另一種與它們形成對比,這就是分散互補色搭配。分散互補色搭配是初學者很好的選擇,怎么搭都很好看。

新手配色手冊!可能是最簡單實用的色彩搭配指南

紅、深藍與淺藍搭配,完美突出對比感,畫面又不失和諧。

三角對立配色(Triadic colors)

新手配色手冊!可能是最簡單實用的色彩搭配指南

此外,如果要尋找三種互相平衡的顏色,可以選擇12色環上任意三個三角對立的顏色。

新手配色手冊!可能是最簡單實用的色彩搭配指南

要成功地使用三色系產生和諧效果,需要謹慎地在色彩間取得平衡——只用一種主色,其他兩種顏色作烘托。

3. 高階教程:調色三要素

關鍵詞:色相 飽和度 明度

要精準的調出每一種顏色,其實包括三個要素:色相、飽和度和明度。

新手配色手冊!可能是最簡單實用的色彩搭配指南

色相(hue):指飽和度和亮度都為100%的顏色。我們肉眼所見到于是能說出來的顏色就叫色相,所有的色相都可以用色環來展示。

新手配色手冊!可能是最簡單實用的色彩搭配指南

飽和度(saturation)即純度,指色彩的鮮艷程度——顏色中含有灰色的程度。飽和度越高,顏色越純,色彩越鮮明;飽和度越低,顏色中灰色成分越大,色彩越黯淡。

新手配色手冊!可能是最簡單實用的色彩搭配指南

明度(value),即色彩的亮度。反映的是色彩的深淺變化,如粉紅、大紅、深紅,都是紅,但一種比一種深。

新手配色手冊!可能是最簡單實用的色彩搭配指南

明度的變化來自于顏色中白色的成分變化。一般情況下在顏色中加入白色,明度提高,加入黑色,明度降低。最大值時,所有顏色都變成白色,最小值時,所有顏色都變成黑色。

下面來看一下明度(Value)的具體應用。

TINT:HUE+WHITE

新手配色手冊!可能是最簡單實用的色彩搭配指南

在色彩中加入白色。這種基調給人更加明亮、和平但缺少活力的感覺,更體現女性色彩,適用的行業有spa、美容等。

新手配色手冊!可能是最簡單實用的色彩搭配指南

SHADE:HUE+BLACK

新手配色手冊!可能是最簡單實用的色彩搭配指南

在色彩中加入黑色。神秘、黑暗、罪惡、危險色調,更體現男性色彩。使用純色或更明亮的陰影色時,與漸變能很好搭配。

新手配色手冊!可能是最簡單實用的色彩搭配指南

TONE:HUE+GREY

新手配色手冊!可能是最簡單實用的色彩搭配指南

在色彩中加入灰色,調性不至于太黑暗但能突出冰冷的感覺。

新手配色手冊!可能是最簡單實用的色彩搭配指南

最后給大家推薦一個視頻,一個網站和一本書。

一個視頻:<A Brief Lesson on Color Theory>,Vimeo上的視頻,上面文章里的一些色環截圖都是來自這個視頻。搭梯子訪問

一個網站:Color Hunt,每天更新兩條很有想法的配色方案,缺乏靈感的時候不妨一看。

歡迎關注作者的微信公眾號「ZUO設計」

新手配色手冊!可能是最簡單實用的色彩搭配指南

中文字體免費打包下載」

  1. 《中文字體來咯!12款懷舊風格的字體免費打包下載(個人非商用)》
  2. 《中文字體第二彈!12款手寫風格的字體免費打包下載(個人非商用)》
  3. 《吸睛利器!20款適合作為標題的字體免費打包下載(個人非商用)》
  4. 《端午節福利!27款張力十足的中文書法字體免費打包下載(個人非商用》

新手配色手冊!可能是最簡單實用的色彩搭配指南

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量112萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

收藏 47
點贊 6

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。