設計基礎：配色方式

色彩搭配能傳遞情緒，給予心理暗示，營造不同的氛圍

其他章節會介紹實作方式，你將發現他們有所不同的地方，並不如想像中地容易。

目錄

────────────────

⊙ 1.1.1 關於色調

⊙ 1.1.2 單色搭配

⊙ 1.1.3 相似色搭配

⊙ 1.1.4 補色搭配

⊙ 1.1.5 補色分割搭配

⊙ 1.1.6 矩形搭配

⊙ 1.1.7 三等分搭配

⊙ 1.1.8 最後的碎碎唸

────────────────

⊙ 1.1.1 關於色調 Tone

早晨陽光籠罩大地，會覺得所見之處皆帶有橘黃色的色彩；起霧的時候，窗外的風景則是霧濛濛，像是披上一層薄紗的錯覺。

色調指的是一組色彩的總體傾向

在不同顏色的物體上，蓋著某種顏色，使看似不同顏色的物體，卻有著同調和諧的感覺，這樣的色彩現象就是色調。

不同顏色擺放在一起時，所產生不同的感覺

比較上圖的兩組色彩，帶給你什麼樣的感覺？你會聯想到什麼畫面？

有人說是夜晚與晨霧，也有人說是都市與鄉間。

統調、和諧

雖然色相不同，卻能藉由色彩間的不同屬性（色相、明度、彩度）變化，讓這些顏色排列在一起時，產生統一的配色效果。

---

⊙ 1.1.2 單色搭配 Monochromatic Colors

「為了讓畫面呈現豐富，使用多種顏色的搭配，反而顯得混亂。」這是在一開始學習配色所遇到的瓶頸，也有另一個瓶頸是「因為我無法掌握色彩，於是我依賴黑白色，不敢加入其他色彩。」

單一色相明度、彩度變化的配色

使用單一色相的細微變化有助於簡化設計，同時避免單調

案例

---

⊙ 1.1.3 相似色搭配 Analogous Colors

相近的三個色彩即為相似色，表示接近且類似的顏色。相似色搭配的特點為色彩接近，在視覺上感覺較和諧，用色出錯率低，十分溫柔的安全配色。

愉悅、低對比的配色

視覺和諧，十分溫柔的安全配色

案例

---

⊙ 1.1.4 補色搭配 Complementary Colors

其中一色通常是原色，而另一色則為二次色；二次色即為原色第一次混和出的顏色。

補色搭配能增加視覺強度，搭配在一起時會顯得非常醒目。

強烈、醒目的配色

Design by Jhane Chou

視覺強烈

Design by Jhane Chou

案例

Traingle

Circle

Square

⊙ 1.1.5 補色分割搭配 Split-Complementary Colors

一色為原色，另外兩色取補色兩邊的顏色（鄰色）。

補色分割搭配延續補色的強烈對比，以另一補色的兩邊鄰色為搭配，相較補色搭配來的和諧溫柔。

和諧的補色配色

Design by Jhane Chou

視覺強烈略帶和諧

Design by Jhane Chou

案例

Looking for adventure

Ice Hockey

⊙ 1.1.6 矩形搭配 Tetradic colors 看似為兩組補色的搭配，實際上會選擇其中一色做為主色，降低其他顏色的飽和度或強度，讓色彩維持平衡。 由於顏色較多，有時會讓人產生「分不清誰是主角」的感覺。 除此之外，常常看見此類的配色不單只是顏色表現，還會帶入材質、漸層等效果來調整色彩的視覺分量。 取一為主色補色，其他色為輔助 Design by Jhane Chou 豐富的色彩效果 Design by Jhane Chou 案例 融解 Shapes ⊙ 1.1.7 三等分搭配 Triadic colors 由三個顏色組成，這三個顏色在色輪上的位置彼此等距。 三等分配色可包含三種原色、二次色或三次色。與矩形搭配相似，選擇其一色作為主色，以其他三等分顏色做襯托。 強烈的配色 Design by Jhane Chou 繽紛的視覺效果 Design by Jhane Chou 案例 #MakeItOnWacomCintiq campaign ⊙ 1.1.8 最後的碎碎唸 接下來會介紹如何有系統的配色，而不是漫無目的地嘗試。