新手如何成為設計師：配色篇

撰寫者：冰凝

        色彩的搭配並非盲選，而是要從原理下手！

設計前看著空白的畫布發呆嗎？

想排版卻覺得顏色搭起來怪怪的？

想知道顏色該如何搭配，首先要思考設計的配色前要先知道

色相、彩度和明度。

文章後面有推薦幾個配色網站，但要先知道原理才能更加解

顏色這樣搭配才會好看喔～

一、色相、彩度和明度

要徹底了解顏色就必須知道色相、彩度、明度，不但能更加快速的選色，還能搭配出和諧的色彩。　　

（一）色相（Hue )：在不同波長的光照射下，人眼所感覺不同的顏色並能夠區分的色彩，如右圖我們能輕易地分辨並說出正確的色相不會有搞混的問題。　　　　　　　

　　例如：常見的紅綠燈，能夠明確區分出紅燈停綠燈行。紅色和綠色就是兩個不同的色相。

（二）明度（Value）：在同樣的光照下，對於物體表面亮暗的感知程度。

　　例如：在畫水彩時，我用紅色做變化，想要調出暗紅色就要紅色顏料加上黑色，想調出粉紅色就要紅色顏料加白色顏料。當紅色在混黑色或白色的這個動作就是讓紅色的明度變低（混黑色）和變高（混白色）。

（三）彩度（Chroma)：色彩的鮮豔、混濁程度，當色彩帶有灰色時彩度就會降低，視覺上的感受也會變混濁、髒亂的感覺。

　　色彩又分為「有彩度」和「無彩度」，一般我們見到的顏色都是有彩度的。例如：紅色、藍色、綠色等等。「無彩度」是指黑白灰，沒有顏色只有明暗所以稱為無彩度。

二、配色公式

　　顏色的搭配雖然不是絕對的，但有以下５種方式能簡單上手，讓配色不再搞砸！

（一）單色技法：使用單一顏色進行設計，可從商品或物件、人物既有的顏色下手！色相不變只動明度與彩度。

　　例如：今天要做的礦泉水的宣傳海報，就可以選用藍色，以藍色為基準，用深藍、藍、淺藍達成統一色系。既和諧又不失整體的統一性。

（三）相似色：色彩鄰近的顏色，例如：紅色兩邊是橘色和紫色，就能配出橘紅色、紫紅色。

（四）互補色：選用差異較大顏色（在色相環中對面的顏色）進行配色，用來凸顯重點營造視覺衝擊。

　　但除非有特殊需求盡量少用互補色設計，顏色過於搶眼，能吸引人注意，但眼睛無法直盯太久。例如：黃色配紫色。

（五）三原色原則：簡單來說就是僅用三種顏色去呈現整張圖，如下分為兩種方式

１、底色、文字、重點色

以這三種類型的元素去選擇顏色，通常用於以文字為主的排版，如右圖中底色為白色，文字藍色，重點色黃色。

２、基礎色6：輔助3：點綴色1

以比例搭配顏色使用，用於有物件或是照片的排版，如左圖，基礎色白色（底），主色藍色（可以是大物件或圖片顏色或文字），點綴色黃色。

三、配色重心

　　在色彩心理學中，人類會透過視覺再連結到感覺、記憶、思想等，給予色彩定義。像是黑色有權威、高雅、冷漠的感覺。

　　當然顏色也有重量之分，色彩的輕重一般是由明度決定。像是白色和黑色同時放在一起，就會覺得白色比較輕，黑色比較重！這就是顏色的感覺重量，當畫面出現多種顏色時，畫面就會有輕重，進而產生所謂重心。

　　所謂的「配色重心」是指：圖片上方顏色較深，重心就會偏上，會呈現緊張感。圖片下方顏色較深，重心就會偏下，會呈現穩定感。

四、色彩三屬性

　　將色相、彩度、明度有系統的控制，可以讓顏色更協調。

　　色彩三屬性包括：色相、彩度、明度，以其中一種屬性為主，讓別的顏色與此定位的屬性協調一致。

　　以下分為２種範例，分別以選擇色相以及明度來舉例，其中要先提及的是，我們所謂的「一致」並非數值完全相同，而是讓數值接近不要差距太大，下圖框選起來的數值就是色相控制相近：

　　以下是第二種範例，選擇明度一致。

　　明度一致的話就比較不會出現前面提到的重心偏上或偏下的問題，但還是要注意文字的顏色明度差異別太過頭！例如：假若下方這張圖中間的文字，改為純黑色的話，依然會出現重心問題。

五、整體的對比度

　　畫面的對比輕重，會最直接影響觀看者的閱讀。對比度決定了易讀性，背景色與文字帶有明度對比，可適時將畫面轉為黑白檢視。

　　下圖的範例，上方藍色海報整體使用淡色系加上字體是白色，畫面中缺少深色元素；下方粉色海報雖然整體一樣以淡色系為主，但有加入一些明暗較低的深色（樹枝和標題），在用色上整體的對比就比藍色海報來的容易閱讀。

六、配色網站的應用

　　最後推薦給配色困難戶幾個配色網站，多樣配色方案直接套用。

（一）AdobeColor

　　這個Adobe的配色網站十分方便，可以依照自己的喜好調整配色，不會只有侷限在別人調好的色彩中。

　　如是使用Adobe系統作業的人更加方便啦，登入後可將顏色、漸層儲存至Creative Cloud中，就可以透過CC Libraries，在Adobe產品（Photoshop、Illustrator、Fresco等）中使用儲存的調色盤。

１、色輪：

像是前面說到的類似色、補色等等可以按左方按鍵，網頁的色相環就會自動跳轉到位子上，下方也會有顏色色票可以吸取顏色或直接在Photoshop等軟體內輸入數值找到顏色。

Photoshop輸入色票：

　　打開檢色器(可點選工具欄下方的顏色就會開啟檢色器)，在右下方數值欄打上相對應的顏色數值。其他軟體也都是相同的方式，只是輸入數值的地方會有些許不同。

２、擷取主題：

　　能放置圖片吸取顏色。適合用在已有素材時卻不知道如何配色的時候，例如：今天客戶要求設計旅遊的海報並給了幾張景點風景照，就可以在照片中找到適合的配色啦～因為是照片原有的顏色所以搭配起來必然是和諧的。

３、擷取漸層：

　　能放置圖片吸取顏色漸層。是上個工具的變化版，上個工具選取的是單一顏色，這個擷取漸層可以將畫面上的顏色串聯起來，就能獲得好看的漸層色彩。

４、協助工具：

　　最後當你想呈現的內容只有文字時會很方便的工具，選擇顏色後下方會預覽出系統搭配好的底色與文字，可以直接看到效果減少來回修改配色的時間！左方也有用色對比數值。

　　對比度越高越容易閱讀，但並非對比度越高越好，還是要適當的配合整體的顏色。

（二）Colorion

　　這個網站有許多已經配好的色票，可以直接取用！點擊顏色可以直接複製色彩數值。

（三）Color Hunt

　　這個網站也是有許多已經配好的色票，可以直接取用！點擊顏色可以直接複製色彩數值。和上個網站差不多，可以選擇一個自己喜歡的網站使用。

（四）Nippon Colors

　　網頁很美也很有特色的色彩網站，頁面會點選的顏色做變化，充滿日式氛圍！裡頭都是日本傳統色彩，每個顏色都有相對應的名稱，有顯示色票數值（滑鼠移動到RGB上方會出現）、CMYK和RGB的色彩數值。