配色超麻煩?一個色相環就能搞定!
色彩搭配其實就是色彩調和,通過兩種或兩種以上的顏色,按一定的方法組合到一起,以求達到和諧愉悅的視覺效果,而「色相環」是能幫助我們的一個非常好的工具。
色相環種類很多,有三原色環、三原色+間色環、三原色+間色+複色環、明度色環、飽和度色環等等。
但色環的種類再多,也都是為了把顏色根據色彩的屬性更好的來進行分類,讓人能更清晰的認識到顏色的屬性。
之前有介紹過色相環,所以就不再贅述咯,新來的朋友們可以點擊鏈接複習一下。今天主要想教大家的是怎麼去看色相環,以及如何利用色相環來進行配色。
色相環的種類
我們先來看看色相環。
16色相環
24色相環
當然還有更多色的色相環,顏色越多複色就越多,顏色與顏色之間的色差就越小,色彩變化就越豐富。
這個色相環不僅有多種色相的變化,同時還包含了各種顏色明度的漸變。
這個是以明度為軸心上下漸變,左右展開的是不同飽和度的立體色環,能夠比較好的幫大家了解色相、明度與飽和度之間的關係。
這個也是一種,左側上下是說明明度漸變的,越往上明度越高,越往下明度越低,右側就是基於這個屬性展開的6種顏色的明度變化,同時也包含了飽和度的變化,越向右飽和度越高。
看了這麼多的色相環,其實不難發現,每個色相環都涉及到色相、明度、飽和度這三個色彩基本屬性。
如果運用色相環來進行配色的話,我們首先可以先從下面這張圖入手,在圖中可以很容易理解到同類色、補色、對比色以及鄰近色的概念,而這四個概念完全可以運用到配色中。
下面還是拿其中一個顏色「紅色」來進行搭配,比較容易理解其中的規律。
這個屬性展開的6種顏色的明度變化。支持
同類色搭配
同類色是在一個角度上衍生出不同明度或者不同飽和度的顏色變化,比如黃與深黃,淺黃就是同類色。
看這張圖應該就很明白了吧,我把其中的一個系列的紅提取出來,讓大家看的更清楚。同類色搭配其實也就是紅色和不用明度的紅或者不同飽和度的紅進行搭配,比如紅+深紅、紅+粉紅。
這個屬性展開的6種顏色的明度變化。支持
近似色搭配
從圖中可以看出,近似色是指的鄰居。但值得注意的是,它不單指某個顏色。比如紅色、黃色、紫色三個顏色是鄰居,延伸開來看,這三個顏色的間色、複色之間的近似色也都互相是鄰居。一定要注意這一點,這樣一來配色的範圍是增大的,也是好用的!
這種近似配色因為含有三原色中某一共同的顏色,所以很協調,比如紫色和紅色是鄰居,它們中共同含有紅色。同時因為色相接近,所以搭配起來也比較穩定。
單獨使用某一種顏色或者同類色互相搭配效果固然不錯,也相對簡單,但與其鄰近色搭配所構成的美感更加令人讚歎。
前面兩組配色都是採用色相環中位置接近的鄰近色,若想使視覺效果更加豐富,對比更加強烈,不妨將兩組配色都一起用上!
這個屬性展開的6種顏色的明度變化。支持
對比色搭配
色相環之間的顏色相差越遠,對比就越強烈,若想使對比更加強烈,視覺效果更加豐富,不妨用對比配色。
對比配色包含兩種:色相對比和補色對比。
·色相對比·
色彩有鮮明的強弱,利用明度或飽和度的反差進行搭配,在色相環中位置呈120度角的色相對比,比如:紅(不同明度、飽和度)+藍(不同明度、飽和度)是冷暖對比。
高飽和度紅+同類色高飽和度藍
高飽和度紅+低飽和度藍
低明度紅+高明度藍
低飽和度紅+低明度藍
·補色對比·
互補色對比:比如紅綠、藍橙、黃紫
以紅配綠為例子,它們是一組補色對比色,不同明度飽和度的紅+綠都屬於這一範疇。但是這種配色稍不小心就營造出了土氣的感覺。比如:
這組紅配綠之所以讓人覺得土,是因為飽和度與明度相仿,且太高,視覺效果對比太強。其實,只要我們在配色過程中調整相互的比例關係就能很好的運用這組配色。
例如上面圖片中上衣內搭的綠色提高了明度,褲子、上衣內搭、白領子形成同色搭配,與外套又形成對比搭配,這樣微調一下,有個過渡就沒那麼生硬了,感覺上也會柔和很多。
·正確運用對比色·
①降低飽和度
②提高明度
③降低明度
④調整其中一種顏色的明度或飽和度
⑤調整比例小面積點綴
▼腰帶點綴
▼圍巾點綴
▼包包點綴
▼鞋點綴
支持
與無彩色系搭配
色相環上的任何一個顏色都是可以搭配無彩色系的,另外上面介紹的任何一種配色也都是可以與無彩色系搭配起來的,這是有彩與無彩對比:紅+白、紅+黑、紅+灰。
比如任何紅都能與黑白灰搭配,與白搭配是一種清新明麗感;與黑搭配能使得紅色的艷麗感降低,對比同樣是鮮明的;與灰色搭配更能中和紅色的艷度;紅色的飽和度越低成熟內斂感越強。
▼紅(不同明度、飽和度)+白
▼紅(不同明度、飽和度)+黑
▼紅(不同明度、飽和度)+黑+白
▼飽和度對比
紅(不同明度、飽和度)+灰:
善於顏色搭配,其實並不是指擅長使用很多的顏色進行搭配,而是指能很好掌控色相環中色彩關係的能力。
推薦閱讀:
※家裝怎麼配色和用光?他的家可能給你一點啟發,但是,別輕易模仿!
※不會配色?你試過Adobe爸爸的神器了嗎!?
※R語言可視化——一個神奇的配色網站~
※用黑白灰是入門,敢用粉色、用對粉色,你就是大師
※給你一個好看的漸變色方案——uigradients