配色與調和

第一節探討了許多過去的色彩調和理論學說，各學者的說法都有其優缺點，

而本節針對近代常用之色彩調和原理做一探討，其以色彩三屬性為主軸探討色彩 調和之配色方法，透過色彩三屬性歸納調和方法實能容易理解色彩調和的規則。

2.2.1 以色相為基準的配色

一般以色相為主的配色大多以色相環為配色依據，有人稱為「角度配色法」，

指的是按照色彩在色相環上的位置所成的角度作為配色依據，傳統上有六種基本 的配色方式，較廣為使用，分別為「單色配色（monochromatic）」、「類似配色

（analogous ）」、「 對 比 配 色 （ complementary ）」、「 分 離 互 補 配 色 （ split complementary）」、「三角配色（triadic）」、「四色配色（tetradic，亦稱雙重互補配

色）」（Beaird, 2010）。

使用角度配色法時，兩色所成的角度越小時，色彩相似性越大，對比性越小；

反之，兩色間的距離越大，差異性越大，對比性也越強烈，而以位於直徑兩端的 互補色相的配色最為強烈。在色相環上有四個曖昧區，也是兩色配色關係不是很 明確的區域，以色相而言不容易討好的配色關係，必須在明度或彩度等其他色彩 關係上加以變化，才可以得到良好的配色（鄭國欲、林磐聳，2002）。

一、 單色配色

單色配色的方式是由一個基底色與數種該色調之濃與淡的色彩搭配，僅以明 度或彩度加以變化時，容易產生統一和秩序的效果（Beaird, 2010）。即為一個基 底色加黑、加白加灰而形成的色彩，也是在色相環或色票上，同一個色彩編號的 色相所包含的各種色調。此種配色較無變化，使人感覺穩定、溫和，但若色彩間 的差異性太小時，會顯得單調而導致不調和，故在明度及彩度上適當變化，才能 得到良好的配色。如圖2-8 所示，中間為基底色，經過明度與彩度調整而搭配出 其餘色相。

圖2-8 單色配色範例

成30 度至 60 度的顏色作為配色，其較單色配色的角度廣，因此在色彩的運用上 可以做出適當的變化，以達到比單色配色更活潑且有朝氣的效果。類似配色是最 受歡迎的配色方法，除了有和諧與平衡感覺，而且有律動感的表現（戴孟宗，2011）。

若選擇的色相範圍差異太小，則會近於單色配色，反之，則會近於對比配色。因 此，色相差異太小或太大，都會影響類似配色的效果。如圖2-9 所示，中間為基 底色，其餘色彩則是與基底色成30 度至 60 度角的顏色。

圖2-9 類似配色範例

資料來源：Adobe^® Kuler., Retrieve from https://kuler.adobe.com/#

三、 對比配色

對比配色使用色相環上彼此位置相對的顏色，此種配色表現較為豐富、活潑，

容易引人注目，但是也可能產生矛盾與衝突的感覺。許多對於配色較無概念者往 往無法考量配色的平衡與協調感，易直覺的使用對比配色，產生不協調的狀況（戴 孟宗，2011）。藉由明度或彩度上的變化，或是調整面積比例可得到調和的關係，

如圖2-10，中間為基底色，右邊為對比色相，可藉由明度與彩度調整達到調和。

圖2-10 對比配色範例

資料來源：Adobe^® Kuler., Retrieve from https://kuler.adobe.com/#

四、 多色相的配色

多色相的配色有三色相配色、四色相配色兩種。三色相配色是以基本色為主，

在色相環上形成三角形的三色配色。三角形為正三角形或等腰三角形，如圖2-11 所示（Fraser & Banks, 2004）。正三角形可以得到比較強烈、活潑、華麗的配色 效果；等腰三角形可以得到安定、穩重的配色效果。

色相環上內接四角形位置的四色配色，四角形為正方形或矩形，如圖 2-11 所示，或是任何兩組的補色配色（Beaird, 2010）。正方形配色是兩對互補色的搭 配，對比性較強，變化較大；長方形配色對比較弱，統一性大（鄭國欲、林磐聳，

2002）。

圖2-11 多色相配色範例

資料來源：修改整理自鄭國欲、林磐聳（2002）。色彩計劃。（頁 76）

2.2.2 以明度為基準的配色

從上一節的文獻探討得知，慕恩與史班瑟色彩調和論中提及明度是影響調和

表2-2

2.2.4 以色調為基準的配色

依照色相配色再利用色調調整可以增加配色樣式，並能掌握色彩的整體感。

以色調來進行配色能夠容易表達其色彩印象，使用色調配色可以套用至整個版面，

也可以只用於部分區塊。色調配色可分為同一色調的配色與不同色調的配色兩種。

同一色調的配色方法對於背景色或圖像的點綴有非常好的效果，但相同色調的色 彩多半明度相近，反而不適合用在文字色和背景色的組合上（iku，2008）。不同 色調的配色可在明度與彩度上做變化，以增加色彩之間的差異。由於不同色調的 組合容易給人雜亂感，所以可將某個色調當做主要的配色重點，以增減其色彩面 積方式來變化。選擇以明度差來表現不同色調時，色彩明暗對比較明顯，能搭配 出分明的配色（鄭國欲、林磐聳，2002）。

2.2.5 常見之網頁配色方法

網頁色彩的選擇是設計過程中重要但常被忽略的一步，坊間許多網頁設計相 關的書籍對於網頁配色的方法種類相當多。由於人對於色彩的感覺是主觀且感性 的，許多人會根據個人偏好或習慣來選擇色彩。然而僅憑藉著個人的感覺，未必 能得到好的配色結果。

現今網頁設計相關書籍時常以網站的主題為要點，首先必須思考網站主題為 何，並為其選定符合網站目的的基礎色，或以企業識別色彩為主，當做基本的主

決定好一個主題色之後，再加入其他色彩點綴，使用同一色相或選擇類似色 相是最安全的組合，並可以主題色為主，選用明度或彩度差距稍大的色彩搭配。

其概念如同以色相、明度、彩度及色調為基準之配色方法，製作出符合主題的視 覺效果。

2.2.6 色彩面積與黃金比例

在色彩設計中，面積屬性是非常重要的一個元素。形態與色彩之間有非常獨 特的關係，當配色比例發生改變時，即使是使用同一個顏色組合，和諧的比例關 係可以提升色彩的表現力，而比例拙劣的形態構圖，卻可以破壞色彩的美感。

在平面設計與版型設計中，黃金比例佔有相當大的重要性，除了應用於畫面 分割外，黃金比例也可應用於色彩配置（莊惠淳，2009）。黃金分割的特色是它 產生了一種協調的特殊效果，亦即它能將不同組成元素結合為一個整體，而每個 組成元素又能保持各自的獨立完整性，並繼續衍生出更大的完整個體（吳國慶，

2008）。大自然有自己的生長原則，黃金比例 1:1.618，如圖 2-12 就是以貝類螺 旋外殼產生的漸變紋路而來。黃金比例除了是動植物生命成長中最重要的比例關 係之外，也是人類跨越種族、地域和文化的共同審美偏好。藉由大自然的比例的 概念，均衡套用在設計與配色上，就能達到具有美感的效果（領先空間商用色彩 研究中心，2009）。

圖2-12 黃金比例矩形

北京領先空間商用色彩研究中心結合設計與面積的種種關係，建立了色彩設 計中的面積與黃金比例（1:1.618）的關係，提出了色彩設計的「黃金比例與主色、

輔助色（又稱配合色）、點綴色（又稱強調色）的關係」，簡稱「主輔點」，如圖 2-13（領先空間商用色彩研究中心，2009）。

圖2-13 主色、輔助色、點綴色比例配置

資料來源：領先空間商用色彩研究中心（2009）。全新商用色彩設計指南：色 彩量化設計。（頁 29）

根據色彩的主題性結合黃金比例配置，能使畫面具有層次感，以下為主色、

輔助色、點綴色與面積比例的關係：

一、主色：在衣服色彩圖案設計中，佔被描述主題對象最大面積的色彩，用以作 出整體感的顏色，通常主色的數量不超過一個，約佔總面積 70％，如圖 2-14。

二、輔助色：除主色以外處於次要面積的色彩，用以輔助主色的顏色，通常輔助 色的數量為二至三個或更多，約佔總面積 25％，如圖 2-14。

圖2-14 按主輔點比例配置之色彩

資料來源：領先空間商用色彩研究中心（2009）。全新商用色彩設計指南：色 彩量化設計。（頁 29）

每個網頁至少都有三個區域需要配色，包含標題、導覽列、背景，這三個區 域在每個網站都可以看得到（Ueki & Azuma, 2003）。因此可以應用主輔點的配 色方式達到協調效果，這三種色彩各自有各自的作用，使用時作為主要感覺的是 主色，搭配襯的是輔助色，需要更醒目的部分則使用點綴色來點出。這些色彩使 用時最需要注意的是，主色若選用高彩度的色彩，在畫面上分配的比例過大時，

會給人很繁雜的感覺。遇到這種情形時，就要減少主色的使用面積，當減少使用 主色的同時，另外兩種色彩的使用也要依比例減少才能達到協調。輔助色的最終 目的是配合主色而使用，但使用時不能比點綴色醒目，輔助色若是使用與主色相 同色系，能使整體色調統一，若使用不同色系的色彩，則能產生具動感的配色。

2.2.7 文字與背景的視認性

以往的研究多著重於網頁技術性的角度來探討網站設計因素對於使用者的 使用效率或績效所產生的影響（Schaik & Ling, 2001）。成熟的網頁排版設計，能 夠創造出某種視覺暗示，它能有效的提高網站上文字的可讀性，並且協助使用者 快速掃瞄頁面（Nielsen & Loranger, 2006）。而網頁結合了文字與影像等元素，文 字對瀏覽者的資訊傳遞也相當重要，可從視認性（legibility）探討網頁文字的視

覺表現（Williams & Tollett, 2000）。文字的機能在於傳達，最佳的文字傳達則需 要正確的字句以顯現可讀性的效果，除此之外，更應進一步要求易於閱讀的條件，

即視認性的問題（邱駿鵬、陳圳卿，2007）。視認性也可稱為可讀性、易讀性，

背景與圖像的色彩明度反差越高，視認性也越高。此概念也能應用在網頁設計當

背景與圖像的色彩明度反差越高，視認性也越高。此概念也能應用在網頁設計當