色彩不但在視覺設計、品牌識別裡扮演極其重要且有力的角色,也可以喚起情緒、傳達明確的訊息,甚至影響人們的心理狀態。色彩該如何搭配才不至於踩雷?今天〈 每日e錠 〉就教你了解基本的色彩心理學,並從萬用的色相環中找到五大配色技巧!
配色有技巧,原來顏色是有情緒的
每種顏色都具有特定的情感聯繫和象徵意義,在商業設計與品牌識別中,可以加深辨識度與更清楚的傳遞理念,讓人看到你的品牌色就能知道你想傳達的風格,藉此快速被記得。除此之外,也能提升顧客購買欲望,或引起觀眾的共鳴。
色彩中最常聽到就是冷色系與暖色系,並因此給人不同的感受。比如暖色系中包括紅色、橙色和黄色等,給人溫暖、充滿活力的感覺,還能刺激食慾,因此常用在食品業;冷色系包括藍色、綠色、紫色等,給人涼爽、安靜、可靠的感受,因這樣的特質適合用於科技、銀行業等。
什麼是色相環?(Color Wheel)怎麼配色?
色相的由來
色彩是由三個元素(HSB)組成,分別是色相(Hue)、彩度(或稱為飽和度,Saturation)、明度(或稱為亮度,Brightness)。簡單來說,色相就是顏色本身。
而色相環則是由瑞士設計師約翰.伊登(Johannes Itten)所提出,依據三原色(紅、黃、藍)與三間色(橙、綠、紫),還有透過這兩種色彩區間所組成的三次色,組合成環狀圖,又名伊登十二色環,也是色相的由來。
了解色相環的實用性
色相環是呈現不同顏色之間關係的工具,可以把它想像成一個彩虹圈,主要功能是展示色彩之間的相對位置和關聯。它可以讓我們直觀地看到不同色彩之間的差異和相似之處。
比如哪些色彩互相搭配較為和諧,哪些色彩形成對比效果。若未來想要一個活潑明亮的配色方案,或想創造對比和引人注目的效果,都能從色相環中找到讓人眼睛一亮且有效的配色方案。
色相環五大配色技巧
了解色相的由來與色相環的實用性後,接下來要帶大家認識最實用的五種配色技巧!
相似色配色法
選擇色相環相近位置的二到三色,能做出協調的配色。由於顏色相似,可以給人一種舒適和自然的感受。使用這種配色法可以用不同的明度與彩度,增加其變化性。
互補色配色法
色相環中 180 度角,也就是每個顏色正對面位置,因色彩對比較強烈,看起來有較衝擊的醒目作用。像大家常聽過的紅配綠、黃配紫等都是互補色。
雖能因對比鮮明產生吸引人的效果,但明度與彩度的調配也很重要,若兩色都是高飽和,對比色配起來可能會讓畫面過於閃爍
分割補色配色法
是基於互補色概念所做的延伸。選用補色時,再將這個補色分割為鄰近兩種色相,視覺上仍有衝擊力,但不像單純互補色那樣的強烈。
例如我們選擇藍色做為主色調,則它的分割補色是橙色和黃色,可以運用比例,帶來一定程度的對比與保持一定的和諧。
三等分配色法
基於將色相環分成三等分的概念,每部分佔據120 度夾角位置,有一定的視覺衝擊力,能使畫面更為活潑豐富,但又不像互補色如此對比。例如選擇紅色的話,搭配的色調將是黃色和藍色,建議可選一個顏色做為主色調,其他兩個做為重點或輔助色使用。
矩形配色法
色相環中的矩形位置,將兩個相似色搭配兩個補色,顏色更豐富熱鬧,且能在對比中保持一定的和諧,但因搭配的色彩數量較多,需注意每個顏色的比例,以免太過花俏。
配色網站推薦
Adobe Color
在 Adobe Color 這個網頁能直接去做配色,專業度高且功能完善。網頁左邊就能選擇上述的五種配色方法去做試玩,也能將喜歡的照片配色擷取下來。後續能記下色號並實際運用在各個渠道上面。
Color Supply
Color Supply 也是個相當方便的配色小工具網站。基於色相環配色,能快速選出上述提及的配色方法,風格可愛,功能單純,可以看到選擇的配色套用在圖像上的效果。
Colordot
Colordot 是款自由度更高的配色網站。只靠鼠標就能直覺配色,剛開始只給你空白頁面,只要在上面移動滑鼠就能隨時調整配色。游標水平方向是調整色相,垂直方向是調整明度,滾輪則是調整彩度,按下滑鼠後就能固定顏色並提供色號。
配色注意事項
能先依照色彩心理學挑選品牌想要的主色,並使用色相環來搭配色彩,若是用在品牌識別設計中,建議一到三種配色為主,才能維持一致性跟提高識別性。
若是生活上的穿搭也能使用上述的配色技巧,比如黃色該配什麼顏色的衣服才能活潑又不顯得花俏?就能運用這些配色方法,精準地找出你想要的風格。
學會配色技巧的好處
知道色相環五大配色技巧與配色網站實際應用後,將來不但能提升品牌視覺與設計的專業性,也能應用於生活中,打造個人獨特風格與舒適空間。
延伸閱讀:
- 為何會有色差?快速了解 RGB / CMYK 色彩模式差異
- 【 Ps 製作 GIF 檔 】用時間軸讓圖片動起來!
- 【 Ai 立體字】快速製作卡通效果的的綜藝字體
- 印刷時該怎麼選紙?不可不知的紙張知識
- 平面設計接案 7 大地雷和報價行情攻略!
- 設計師的好夥伴 – 【BenQ PD2705U 專業設計繪圖螢幕】開箱超完整使用心得