爲什麼你的色彩搭配總是雜亂無章?因爲你沒明白這點

為什麼你的色彩搭配總是雜亂無章?因為你沒明白這點

很多學習設計的同學都有這樣一個疑問?

為什麼我的色彩搭配總是看起來雜亂無章,而網上那些大神做的圖片色彩搭配都很協調、合理看起來非常舒服,自己卻找不到原因的所在。

今天這篇文章就來為大家揭開大神們背後這一張神秘的配色面紗。

首先,我們來看這張圖片,它第一眼最吸引你眼球的是什麼?

為什麼你的色彩搭配總是雜亂無章?因為你沒明白這點

是不是這張圖片總體的色彩傾向,大範圍的色彩效果?

沒錯,這個我們稱之為——色調。

色調是顏色的重要特徵,它決定了一幅畫的基調和氛圍。

它是色相、明度和飽和度的組合,這其中任何一種因素起主導作用我們都可以稱之為某種色調。

無論我們在畫面中用了多少種顏色,只要飽和度和明度保持統一,一幅圖的配色就可以達到和諧自然。

在色調裡面我們會涉及到三個因素:色相、飽和度、明度它們所代表的英文字母分別為(HSB模式)。

接著來看一下這三個因素分別是什麼意思。(只有讓大家明白它們的意思之後我才能帶你裝逼帶你飛)

色相(H)

色相,即各類色彩的相貌稱謂。比如:紅、橙、黃、綠、青、藍、紫這些顏色都統稱為色相。下面這個就叫色相環。

為什麼你的色彩搭配總是雜亂無章?因為你沒明白這點

飽和度 (S)

飽和度,是指色彩的鮮豔程度,也稱色彩的純度。飽和度取決於該色中含色成分和消色成分(灰色)的比例。含色成分越大,飽和度越大;消色成分越大,飽和度越小

拾色器最右側的顏色含色成分是最大的所以飽和度皆為最高,反之左邊灰色成分比例最大所以飽和度最低

為什麼你的色彩搭配總是雜亂無章?因為你沒明白這點

明度(B)

明度,是眼睛對光源和物體表面的明暗程度的感覺,主要是由光線強弱決定的一種視覺經驗。

在拾色器中最上端的位置的選色皆為最高明度,反之最下端的明度最低。

為什麼你的色彩搭配總是雜亂無章?因為你沒明白這點

瞭解完色調的三個因素之後......

我們應該幹什麼呢?

什麼?文章不是講完了嗎?還要幹嘛?寶寶們睡覺去了。

NO! NO! NO!

文章還沒講完呢!你快回來~不然我保證你一定會後悔的。

好了,現在我們正式進入大神們的配色裝逼大法——協調配色

下面說下設計中最常見的兩個配色方案。

▌配色協調方法一

不同色相搭配,把不同色彩的亮度和飽和度調成一致或者近似,這是最基本的配色原則。

▌配色協調方法二

同一色相搭配,只調該顏色的亮度和飽和度,也能達到和諧的效果。

通過上面兩個拾色器的圖片可見:當顏色確定之後可色調中可調節的選項就只剩明度和飽和度了。

下面我們先使用第一個配色方法不同色相搭配,把不同色彩的亮度和飽和度調成一致或者近似,這是最基本的配色原則。

我們來看下這張圖片,它有一個最明顯的特點就是顏色有很多種:有紅色相、綠色相、黃色相。

但是為什麼有這麼多色相的圖片我們看起來卻不會覺得雜亂無章,反而看起來非常舒服呢?

為什麼你的色彩搭配總是雜亂無章?因為你沒明白這點

這裡面除了顏色與顏色之間做到合理搭配之外(這個後面會講),還有一個最主要的原因是這張圖片不管是那種顏色都很好的利用了飽和度和明度。

為什麼你的色彩搭配總是雜亂無章?因為你沒明白這點

為什麼你的色彩搭配總是雜亂無章?因為你沒明白這點

為什麼你的色彩搭配總是雜亂無章?因為你沒明白這點

這裡面每一個色相的飽和度和明度相差都非常小,其中有的色相飽和度和明度才相差了1%,所以圖片的色調我們看起來非常舒服自然。

與之相同道理的還有下面這張圖片,大家有空可以自行去吸取這張圖片裡面的顏色,看看它們之間的飽和度和明度是否也相差很小。

為什麼你的色彩搭配總是雜亂無章?因為你沒明白這點

講完第一種協調配色之後,我們再來看下第二種協調配色:同一色相搭配,只調該顏色的亮度和飽和度,也能達到和諧的效果。

這個我就不多做解釋了,我相信聰明的你看完下面這張圖飽和度和明度差值,就不言而喻了。

為什麼你的色彩搭配總是雜亂無章?因為你沒明白這點

為什麼你的色彩搭配總是雜亂無章?因為你沒明白這點

這第二種協調配色在淘寶電商裡面展現得淋漓盡致。

為什麼你的色彩搭配總是雜亂無章?因為你沒明白這點

為什麼你的色彩搭配總是雜亂無章?因為你沒明白這點

因為這種協調配色最為簡單方便,而且效果也很好,所以這種協調搭配常常是電商設計師們最常用的裝逼大法哦,你學會了嗎?


分享到:


相關文章: