必備配色技巧懶人包:配色原理+配色靈感+配色網站

根據研究顯示,人們在判斷是否購買一項商品時,70%的決定會被商品的顏色所影響。此篇文章分享了基本的配色技巧、原理與步驟流程,也整理出了幾個超實用的配色網站和工具。善用這些工具,讓你的配色不再卡卡。

基本配色原理:利用色環不同夾角搭配

根據瑞士設計師伊登提出的基礎12色彩色環,是由三原色黃、藍、紅作為基礎色,

其中黃、藍、紅又稱為一次色,把這三種顏色以50%+50%的比例兩兩相加可以得到三種2次色

在2次色的基礎上再加一次色,以50%+50%的比例調和,可以得到三次色。

這樣一來就得到基礎的12色色環

伊登12色環是由三原色組成

在基本配色的原則中可以分為四種基礎配色,以這四種基礎邏輯,可以搭配出千變萬化的配色組合

  1. 相似色

相似色是指相同色相,但是明度不同的顏色。採用鄰近色做顏色搭配可以體現整體感,但也可能容易顯得比較單一。(延伸閱讀:色彩學中3個重要的顏色DNA:色相、明度、彩度)

monochromatic

2. 類比色

類比色是指色環上夾角60度以內的顏色。類比色色相不同,但視覺上會感覺較有統一性。是一個配色較不容易出錯的配色邏輯。

類比色案例

3. 互補色

互補色是指在色環上相對的兩個顏色。採用互補色的手法來配色,可以讓畫面生動活潑。此種配色手法效果強烈、炫目、力量充足,但若使用不當可能產生幼稚、粗俗、原始、不安定等效果。

互補色案例

4. 對比色(Triad)

對比色為色環中120-180度的顏色,也就是色環中分成三等份所指到的顏色,所以又稱為三分色。此種配色手法效果強烈、醒目、有力、活潑,但容易出現雜亂感,進一步造成視覺疲勞。

對比色案例

5. 分裂補色

分裂補色是指色環中三個形成高的等腰三角形的顏色。

分裂補色案例

6. 矩形補色

矩形補色是指在色環中四個可以形成一個矩形的顏色。這也剛好是兩組互補色,故又可稱為雙重補色。

double com
矩形補色案例

配色步驟

講完了配色理論與邏輯,還是不知道怎麼下手配色嗎?可以按照以下步驟來發想

  1. 決定你作品的主要色系。
  2. 利用上面其中一種配色邏輯找到約1-2種其他輔色。
  3. 三種顏色按照 5%、25%、75%的比例,把顏色套用在你的作品中。(不是固定數據,主要是讓畫面出現層次)

注意,如果你不是要製作出特殊效果,一個畫面中最好不要出現3種顏色,否則容易造成視覺混亂(黑色、白色不算、同樣色相不同明度算同一種顏色)

另外重點中的重點:不同顏色的比例要拉出區隔,才能讓你的作品/商品有層次感。當然不一定要使用5%、25%、75%的比例,也可以試試看10%、20%、70%等等,重點是畫面的協調與層次感。

尋找輔色的方法有以下幾種,

  1. 參考色環,用肉眼大至上抓顏色
  2. 使用Adobe Photoshop中的擴展插件 (打開Photoshop–視窗–延伸功能–色彩主題)
    在Photoshop的色彩主題中,按下中間的三個小圓圈按鈕,可以選擇配色邏輯,你也可以透過滑動小圓圈調整色彩組合的明度,非常方便。
photoshop color theme

看完以上步驟還是不知道怎麼開始配色嗎?小編推薦幾個我自己也常用的懶人配色手法:從別人的作品中提取顏色!

配色工具

介紹兩個超實用的網站

  1. Dribble
  2. Designspriation

這兩個網站上來自全球、不同種類的設計作品、藝術作品等等,而這兩個網站最棒的地方,就是會自動幫你分析圖像中的主題顏色。

以Dribble 為例,點找到你喜歡的作品/顏色,點擊進去後,在圖片下方可以看到系統分析的顏色組成,這個可以稍微調整之後當成你的配色組合。

dribble

或是你可以去點選你喜歡的顏色,dribble會幫你整理出更多相同色系的作品。

dribble

另外Designspriation的使用方法類似,在這邊就不多贅述。

那如果你有自己拍攝或搜尋到的照片,也可以反向,透過線上的軟體來提取照片中的元素,來當成你的配色方案。這邊介紹兩個超好用的顏色提取網站,提供大家使用

  1. Color mind
colormind

2. Color Extraction Lab -TinEye

使用方法也非常簡單,直接拖曳想分析的照片進去視窗即可。

color Extraction Lab

最後如果你還是沒有任何想法,也可以透過顏色組合色卡,直接選擇你順眼的來使用也可以,

Color Hunt 是一個非常簡單實用配色組合的網站,可以直接選擇順眼的組合來製作。

color Hunt

延伸閱讀

色彩學中3個重要的顏色DNA:色相、明度、彩度

2021春夏 WGSN與Coloro 預測的5個顏色流行趨勢

PANTONE Color Institute 城市玩色計畫 台北站

加色混合RGB v.s. 減色混合CMYK:調色基礎模式

利用完形知覺法則提升你的設計力