【設計】色彩學懶人包：配色觀念、實務應用完整收錄

顏色是美學的重要環節之一，透過不同的配色組合能豐富視覺印象。不單設計專業要懂，電商、社群、行銷想抓住客戶的心，更應該深入認識一下。本次懶人包收錄了「顏色基礎」、「配色原則」、「色彩心理學」，讓每個人都能輕鬆掌握色彩應用。

認識顏色基礎

先來補充些顏色小常識，幫大家把遺漏在美術課堂的分數給補回來，後續再來聊配色美感，就能有更好的應用連結性。

1 - 色輪

我們熟知的彩虹是將紅、橙、黃、綠、藍、靛、紫等顏色以「帶狀」呈現，色輪 (Color Wheel) 則是將顏色演繹成「環形結構」。同樣包含了完整且豐富的顏色，但更方便視覺辨識冷、暖雙色調，我們就能再依需求選色。

▲ 從環型結構的色輪，可以清楚觀察顏色的關聯性

2 - 顏色如何產生？

看似多元的顏色其實都是從最簡單的「原色」(Primary Colors) 開始，也就是常見的紅色、黃色、藍色這三種顏色，透過它們組合出各種顏色，堪稱是所有顏色的基石。

從原色可以調配出「二次色」(Secondary Colors)，像綠色就是由 50% 的黃色和 50% 的藍色所組成，二次色包含了綠色、橘色、紫色。

所以有了原色、二次色，就可以再創造出「三次色」(Tertiary Colors)，像是 50% 的黃色和 50% 的橘色，可以產生出橘黃色。三次色相比原色、二次色更多元，當中包含了綠黃色、橘黃色、橘紅色、紫紅色、紫藍色、綠藍色。

▲ 從原色 (紅、黃、藍) 逐漸擴充成完整的顏色組合

3 - 選色的專有名詞

對顏色有些概念之後，有些選色的專有名詞也能認識一下：

• 色相 (Hue)：色輪上飽和度 100% 的純色
• 飽和度 (Saturation)：意指顏色的鮮豔程度，等同彩度 (Chroma) 一詞
• 明亮度 (Brightness)：意指顏色的明暗程度，等同明度 (Value) 一詞
• 亮調 (Tint)：在色相裡加入白色，讓顏色顯得較為柔和
• 中間調 (Tone)：在色相裡加入灰色，顏色就能隨著灰色有深淺變化
• 暗調 (Shade)：在色相裡加入黑色，將深層的氛圍引導出

▲ 選色相關的專有名詞也能好好認識一下

4 - 色彩模式

隨著時代演進，顏色的載體不再只是紙張、布料這些有形的內容，還包含了螢幕、投影機這些新載體。由於載體的基本構成不同，所以在顏色呈現上也需要不同的色彩模式。

對應在繪畫或印刷，會用靛藍 (Cyan)、洋紅 (Magenta)、黃色 (Yellow) 的顏料或油墨作為主色，再搭配黑色 (Black) 來彌補混色的不足。CMYK 採用的是「減色法」，顏色會因累加而變深，不想要顏色變深就要避免顏色過度組合。

至於螢幕和投影機採用的是光，主色是紅色 (Red)、綠色 (Green)、藍色 (Blue)。RGB 是採用「加色法」，隨著顏色累加會越變越亮，能創造的顏色也比 CMYK 多出許多。

但數位設計要轉換為實體，像：名片、海報、盒裝這類印刷，就很容易受到 RGB 轉 CMYK 的差異而產生色差，所以你也必須知道這種色差是難以避免的。

▲ 顏料與光需要對應不同的色彩模式

重要的配色邏輯

有了上述這些基本知識後，接著來幫大家分享一些「配色邏輯」，一起來瞭解色彩是如何運作在不同的設計環節。以下是常見的十種配色邏輯，輕鬆來認識一下吧！

▲ 用一張圖片就能搞懂所有的配色邏輯

1 - 灰階配色法 (Achromatic Colors)

灰階配色僅會運到用「黑色」、「白色」，及分佈在這兩個極端區間的「灰色」，基本上也就是不帶有任何色彩飽和度在其中，常見的黑白照片其實就是。

灰階顏色或許並不醒目，但從生物學觀點來看，它卻是人眼最容易辨識的顏色組合，不僅沒有色差問題，也不容易產生閱讀疲勞。它被賦予了黑白兩色的神秘、對比及知性，單純且富有質感，就連許多品牌視覺也都會採用灰階顏色，像 Apple 就是最經典範例之一。

▲ 灰階顏色雖然不醒目，但非常舒服、耐看

2 - 單色配色法 (Monochromatic Colors)

單色配色和灰階配色有相似的運作邏輯，不過它是以單一顏色為基礎，僅透過飽和度、明亮度來建立相近色系的顏色搭配。

在視覺設計中，常利用單色配色來創造情境氛圍，電影、時尚雜誌都偏好單色配色法，主題雖然簡約但富含層次感。

▲ 《駭客任務》系列電影偏好綠色調的使用

3 - 相似色配色法 (Analogous Colors)

相似色配色法像是承接了上述的灰階及單色兩種配色概念，但並非單一顏色深淺的變化，而是向色環的兩側橫向延伸，納入鄰近的顏色來做使用。

Analogous 字面上有「類似」、「相近」的意思，也有人將相似配色法稱為「類比配色」。它讓配色有更豐富的變化性，但仍有相近單色配色的美感，很適合營造自然、和諧的主題氛圍。

▲ 相似色可以輕鬆營造出自然、和諧的主題氛圍

4 - 互補配色法 (Complementary Colors)

互補配色主要是運用「色彩對立」來創造視覺美感，這跟現實生活中的個性、體型這類「反差感」相似，不過依據色環位置會有以下幾種的互補模式：

• 互補 (Complementary)：直接在色環面對面的位置上，成為最大的反差組合，像是聖誕節的紅綠雙色
• 側互補 (Side Complementary)：選擇正面互補的任一側顏色，為互補帶來略為不同的反差感
• 分割互補 (Split Complementary)：透過分割來增加互補色的數量，產生更鮮明的對立
  
• 雙分割互補 (Double Split Complementary)：將互補組合最大化變成五邊形 (Pentagon)，讓顏色搭配更具多樣性

▲ 透過互補來建立視覺反差感，在日常生活也很常見

5 - 三角配色法 (Triadic Colors)

三角配色是非常特別的顏色組合，三個顏色在色輪上有著各 120 度的夾角，在「互補」和「相似」之間取得了平衡。顏色帶有趣味和戲劇張力，但又不會有過度搶戲，這讓它也很適合用於各種設計：Logo 商標、網站主題、海報、書籍封面等。

▲ 三角配色在「互補」和「相似」之間取得了絕對平衡

6 - 矩陣配色法 (Tetradic Colors)

雖然矩陣配色是比較進階的配色方式，但它基本上就是由「兩組互補色」所組成，色輪排列會出現一個矩形外觀。

這四個不同顏色會區分為冷、暖兩個色調，應用上要多留意顏色的平衡感。依照顏色座落位置，矩陣配色法也有兩種不同類型：

• 矩形矩陣 (Rectangle Tetradic)：它也被稱為「雙互補」(Doubel Complementary)，兩個主色和兩個互補色有著較為接近的特性。
• 方形矩陣 (Square Tetradic)：由於四個顏色平均分佈在色輪四周，顏色個性鮮明。建議先選擇是以冷調或暖調為主題後，再來選擇合適的主題色，互補色也會自然產生。

▲ 矩陣配色使用了兩組互補顏色，讓主題感更加活潑

閒聊色彩心理學

「色彩心理學」幫我們找尋出顏色與人類行為的關聯性，不只能解讀各種現象，更成功應用在社會的各個層面，這邊也來舉幾個有趣的例子：

1 - 顏色帶來神奇療效

顏色能夠喚起人類內心的情緒，醫學上為了增強安慰劑的效果，會把藥丸染成紅色或橙色，來提高受測者自身的興奮指數。

▲ 紅色和橙色的藥丸可提高服用者的興奮指數

2 - 增加異性吸引力

一份心理學雜誌研究指出，女性若想提高異性關注度，穿著上可以選擇紅色系的元素，它潛藏了熱情、溫暖與浪漫的投射。不過這並不適用於男性，服裝顏色並不會影響男性的異性吸引力。

▲ 女性穿著紅色衣物可提高異性吸引力

3 - 創造飢餓感

有沒有發現速食店 Logo 或賣場標籤常會用紅色和黃色搭配，因為這個配色組合最能有效提升飢餓感，像是我們熟悉的頂呱呱、麥當勞、漢堡王、In-N-Out Burger 都是這個配色，這現象也被解釋為「番茄醬和芥末理論」(Ketchup & Mustard Theory)。

▲ 連鎖速食店多選用紅色、黃色作為商標配色

延伸閱讀：

【設計】扁平化設計，再次為汽車品牌注入新氣息
【設計】你知道 IKEA 悄悄更換了品牌字體？
【設計】迷幻、真實、復古和動物風將在 2023 年引領市場趨勢
【設計】色彩學懶人包：配色觀念、實務應用完整收錄
【設計】街頭藝術家班克西 (Banksy) 創作出俄烏戰爭下的全新視角
【設計】Adobe 新服務 Firefly 即將上線，AI 人工智慧戰場更顯白熱化！
【設計】規劃接案準備，讓你的設計更有價值
【設計】UNIQLO 母親節跨頁廣告，邀請櫻桃小丸子母女真情告白

-------------------------------

更多內容，歡迎關注『布蘭特大叔』

部落格：https://bit.ly/UB-WebSite
FB 專頁：https://bit.ly/UB-FB
YouTube 頻道：https://bit.ly/UB-YouTube
小額贊助：https://bit.ly/UB-Donation