顏色怎麼配?1招技巧加3個配色網站

零經驗也適用!最萬能的顏色配色技巧,結合配色網站更強大!


daydreamaster-color-scheme
Photo by Pressfoto from Freepik

顏色好多到底哪個好看?顏色配來配去一直重複?配色網站好麻煩不會操作?請用這一招配色技巧,馬上讓你事半功倍!

透過色彩
讓你的設計會說話

Arenski/一看就懂配色設計

想做好一個平面設計,除了排版、字體、圖片之外,更重要的就是配色。你相信顏色有影響情緒的能力嗎?這個現象跟「色彩心理學」有關[1],在《一看就懂配色設計》一書中,特別提及顏色對於情緒有一定的影響力,舉例來說:白色會感到乾淨;藍色會感到涼爽;紅色會感到熱情。因此每次設計出的作品,都要根據不同情境,來選擇最合適的配色,透過顏色引導,營造出特定氛圍。現在也有滿多好上手的配色工具可以協助初學者,像是 Coolors 配色網站,就提供了相當好用的免費功能,如:快速產色、圖片抓色、漸層色版、色盲檢測、儲存顏色……等。

馬上解鎖設計與行銷的實用資源清單!專為設計師和行銷人員打造,精選出多達數十種設計工具與行銷工具,立即點擊下方按鈕解鎖查看!

色彩學入門知識

提到配色,還是必須要簡單認識一下,色彩學入門知識「色環」。色環英文是 Color Wheel ,為色彩學的工具之一,是將可見光區域的顏色以圓環作呈現,又可稱為「色輪」或「色圈」,其中包含 12 種不同顏色,因此又有「十二色色環」之稱[2]。以此為基礎,衍伸出不同的配色模式,主要可區分以下幾種:

(1) 單色配色法

單色配色法(Monochromatic Colors)是基於同一種顏色的不同色調和亮度來進行配色。這種配色法通常可以營造出統一且和諧的氛圍,乾淨簡約卻又不會太無趣。

daydreamaster-color-scheme
Photo by Canva from Canva

(2) 互補色配色法

互補色配色法(Complementary Colors)是選擇色環正對面的兩種顏色。這種配色法具有強烈反差感,可創造生動活潑的效果,不過使用時應避免用於文字,以防看不清楚。

daydreamaster-color-scheme
Photo by Canva from Canva

(3) 相似色配色法

相似色配色法(Analogous Colors)是指色環上相鄰的三種顏色。此方法為多了一點變化性的單色配色法,使用時建議挑選其一為主色,其餘顏色為輔助色,否則顏色太相似會看不到重點。

daydreamaster-color-scheme
Photo by Canva from Canva

(4) 三角配色法

三角配色法(Triadic Colors)又稱為「三等分配色法」,即是於色環上繪製出三角形而成的三種顏色。此種配色法可有效讓顏色達到平衡,同時富含戲劇張力,一樣建議擇一為主色,其餘顏色為輔助色,以避免畫面過於雜亂。

daydreamaster-color-scheme
Photo by Canva from Canva

(5) 矩形配色法

矩形配色法(Tetradic Colors)又稱為「矩陣配色法」,即是於色環上繪製出方形而成的四種顏色。此配色法是由兩組互補色組成,同時包含冷暖色調,所以使用前應了解主體的冷暖設定,並降低非主色的飽和度,確保視覺平衡。

daydreamaster-color-scheme
Photo by Canva from Canva

配色技巧:擷取圖片顏色

請花 30 秒給我一組包含 3 個顏色的「夏天配色」。夏天是什麼顏色?藍色?然後呢?沙灘?你腦海是不是閃過各種情境要素?然而時間已經超過了……。

如果「單靠印象」來做設計,思考就容易受到限縮,導致碰壁。配色技巧的核心重點,就是透過網路或使用 Pinterest 搜尋圖片配色靈感,並依據圖片上的要素,來選擇適合的顏色。因為顏色的功用在於營造氛圍,而圖片已經幫我們完成這件事,當我們了解這個原則之後,即可藉由搜尋來完成配色。如果這對你來說還是太困難,那 Coolors 配色網站的圖片抓色功能,可以完美地幫助你。除此之外,本篇文章最後還有補充 18 組配色實例,提供大家參考。

配色網站:參考顏色搭配

在開始設計專案前,可藉由配色網站來進行顏色模擬搭配,讓配色能更精準。不過配色網站的操作,也有難易之分,對於初學者而言,建議優先使用 Pinterest,尋找配色靈感,快速又容易。對於進階者而言,可以選擇好上手且功能齊全的 Coolors;專業性高的 Adobe Color;操作簡易的 Canva。

Coolors 配色網站

daydreamaster-coolors

Coolors 是一款非常好上手的配色網站,提供快速配色產生器,「按一下空白鍵」即可獲得無限種配色,同時搭配鎖定、刪減、微調功能,直到找出期望配色[3]。Coolors 支援多種色碼 RGB、CMYK、LAB、HSB,以及超多免費顏色工具,像是:擷取圖片顏色、製作漸層色版、色盲模擬檢測、儲存喜愛顏色……等。你不只能在電腦網頁版上使用,還可下載手機版應用程式,讓你隨時隨地玩出新色彩,既快速又方便,絕對值得立即體驗。

Coolors 優點

Coolors 對於初學者相對友善,操作介面直覺簡單,快速上手,省下大把學習時間。配色工具免費又齊全,充分滿足大部分設計使用上的需求。

Coolors 缺點

Coolors 雖然為英文介面,不過大多數功能皆以圖示取代,初學者可不用擔心。另外,少部分進階功能需額外付費解鎖,需要者可視情況升級。

Adobe Color 配色網站

daydreamaster-adobecolor

Adobe Color 來自 Adobe 系列[4],前身名稱為 Adob​​e Kuler。作為一款專業線上顏色配色網站,Adobe Color 不僅完全免費使用,還提供中文介面,而且線上製作的色票,還可透過「資料庫」功能,直接匯入其它系列軟體,如:Photoshop、Illustrator、InDesign,以及 Adobe Express 線上排版網站。另外,網站本身也有「探索」和「趨勢」功能,藉由 Adobe 本身龐大的資料數據,推薦你其它配色參考,或時下流行顏色,相比其它配色網站,使用體驗將會大幅提升。

Adobe Color 優點

Adobe Color 具全中文介面,不只提供專業配色工具,更利用自身品牌優勢,建構出一套完整配色系統。你還可透過內建「擷取主題」功能,抓取圖片主要配色,來生成色票,以及使用「協助工具」,進行顏色檢測,讓一般用戶或色盲患者獲得最佳體驗。

Adobe Color 缺點

Adobe Color 同樣有著專業軟體的通病,那就是必須具備基礎的配色知識才可完全上手,不過還是有容易上手的部分,如優點所提到的「擷取主題」功能。此外,部分功能要訂閱或購買 Adobe 系列軟體才可解鎖,但對於一般使用者免費版已足夠使用。

Canva 配色網站

daydreamaster-canva

Canva 成立於 2012 年[5],品牌本身主打的是線上排版軟體工具,因此衍伸出其它附加功能,如:Canva 配色網站、Canva 素材圖庫……等,可稱之為簡易版的 Adobe 系統。Canva 配色網站目前只有英文介面,對於英文苦手比較吃力,建議搭配翻譯使用。網站除了具備基本配色工具之外,也包含配色靈感可以參考,還提供擷取主題顏色功能,可以快速抓取色票。特別的是,你可以在網站學習顏色知識,了解顏色的意涵,以及顏色如何影響情緒。

Canva 優點

Canva 專門提供給「非完全體」用戶,是個適合學習設計的地方。配色系統點到為止,不會過於艱深難懂,可搭配內建排版軟體,利用套版功能直接排版出一個海報設計或平面設計作品。

Canva 缺點

Canva 只有英文介面,尚未支援中文。在操作功能上,相比其它專業網站較為陽春,無法執行細節調整,自由度受限,難以發展高專業性操作。但對於初學者而言,以達到配色參考目的。

配色推薦:節日顏色應用

不管你是設計師還是行銷專員,每年總是會碰到各種節日,是不是又再擔心這次的設計該如何配色?配來配去又跟去年相似,除了學習運用配色網站之外,以下特別補充 18 組常見節日的顏色配色推薦,讓剛入門的初學者有快速參考的範例。同時分享一個實用的中文素材管理工具 Eagle,它可在瀏覽網頁時直接儲存喜愛的配色,是眾多設計師的必備工具之一。

(1) 新年配色

新年(New Year)為每年的 1 月 1 日,對於亞洲文化來說,還可再細分出農曆新年,俗稱「過年」[6]。新年常見的顏色配色要素為紅包的紅色金元寶的金色,有著喜氣與財富的意象。各國都有著跨年文化,每年的 12 月 31 日晚上,會放煙火慶祝過完一年,因此可以選擇的顏色更廣,其中包含紅色、橘色、綠色和藍色……等,夜晚建議改以深藍色取代,避免直接使用黑色,導致過於陰暗。

#DCDCDC

#E3B562

#D02A34

daydreamaster-color-scheme-newyear
Photo by Jason Leung from Unsplash

#ECA15C

#D9281E

#0C335B

daydreamaster-color-scheme-newyear
Photo by Pexels from Pixabay

(2) 元宵節配色

元宵節(Lantern Festival)為農曆年的 1 月 15 日,又稱為「上元節」,是農曆新年的第一個月圓日[7]。傳統習俗會在這天進行與「燈」有關的活動,例如:提燈籠、猜燈謎、放天燈……等,緣由是古時候的這天,老師會幫學生點燃燈籠,象徵前途光明,流傳至今。元宵節主要的顏色配色為燈籠的紅色搭配華麗鑲邊的金色;另外,因放天燈的習俗,還可使用火焰的橘色夜晚的深藍色

#D4D0C6

#C49B58

#D82125

daydreamaster-color-scheme-lanternfestival
Photo by Mrsiraphol from Freepik

#FDF6E6

#E78A22

#19394E

daydreamaster-color-scheme-lanternfestival
Photo by Andrii from Adobe Stock

(3) 情人節配色

情人節(Valentine’s Day)為每年的 2 月 14 日,因情人節種類眾多,此處就以西洋情人節為代表[8]。愛情的代表色為紅色,因此情人節的顏色配色主要圍繞在紅色系,如:愛心的紅色玫瑰的紅色蝴蝶結緞帶的粉紅色,甚至還可加入求婚戒指的金色紅酒瓶的黑色,來增加顏色變化性。

#EEEFF1

#E9A2AB

#A22536

daydreamaster-color-scheme-valentinesday
Photo by Belight from Adobe Stock

#F1EFE9

#BC1E21

#131310

daydreamaster-color-scheme-valentinesday
Photo by Atlas from Adobe Stock

(4) 母親節配色

母親節(Mother’s Day)為每年 5 月的第二個星期日,由美國國會於 1913 年所訂下的日期[9],發起人為安娜.賈維斯(Anna Jarvis),其母親最愛的花為康乃馨,故康乃馨便成為母親節的代表花。母親節的顏色配色,除了使用康乃馨花朵的粉紅色或紅色之外,康乃馨葉子的綠色也可作為搭配顏色之一,更可嘗試使用母親呵護小孩的意象作為顏色的選用,如:皮膚的米色

#F2F1EF

#E17F7F

#8B9875

daydreamaster-color-scheme-mothersday
Photo by Pixel Shot from Adobe Stock

#EFEFEF

#E3D2C8

#D3B3B3

daydreamaster-color-scheme-mothersday
Photo by Lightfield Studios from Adobe Stock

(5) 端午節配色

端午節(Dragon Boat Festival)為農曆年的 5 月 5 日,又可被稱為「詩人節」,為紀念古代詩人屈原於此日投江自盡[10],常見的習俗活動有吃粽子、划龍舟……等。端午節顏色配色可選擇粽子竹葉的綠色糯米的米色以及紅棗的紅色,亦可使用划龍舟作為選色要素,如:龍舟的深藍色或比賽場地河川的淺藍色

#F4EFE6

#B72122

#3E4731

daydreamaster-color-scheme-dragonboatfestival
Photo by Wirestock from Freepik

#448AA6

#D8202D

#070F29

daydreamaster-color-scheme-dragonboatfestival
Photo by Cheng Feng from Unsplash

(6) 父親節配色

父親節(Father’s Day)為每年的 8 月 8 日,因諧音的緣故,因此又被稱為「爸爸節」[11]。父親節的顏色配色可以選擇父親常使用的用品作為顏色要素,例如:皮鞋的褐色領帶的藍色手錶的銀色眼鏡的黑色……等。另外,父親有著身材壯、力氣大的印象,所以常被聯想為超人,故可使用紅色與藍色,作為配色之一。

#D5D8D1

#1D3349

#68483A

daydreamaster-color-scheme-fathersday
Photo by Celso Pupo from Adobe Stock

#DFE0E0

#BE3839

#083151

daydreamaster-color-scheme-fathersday
Photo by Vadim Guzhva from Adobe Stock

(7) 中秋節配色

中秋節(Mid-Autumn Festival)為農曆年的 8 月 15 日,為秋季的第二個月,又可稱為「月夕」[12]。此時的月亮又大又圓又亮,所以有著賞月或吃月餅的習俗。中秋節的主要顏色配色與月亮息息相關,如:月亮的黃色月兔的白色月餅的米色月餅內餡的褐色。除此之外,這天還有著一邊烤肉一邊團圓的習慣,還可挑選與食材相關的顏色,可讓整體視覺更加豐富。

#F9ECAC

#ECA637

#245069

daydreamaster-color-scheme-midautumnfestival
Photo by Frimufilms from Freepik

#F0ECEA

#DEA061

#5C3218

daydreamaster-color-scheme-midautumnfestival
Photo by Topntp26 from Freepik

(8) 萬聖節配色

萬聖節(Halloween)為每年的 10 月 31 日,是來自西方的傳統節慶[13],在當天的夜晚稱為「萬聖夜」,此時小朋友會變裝打扮,提著籃子跟鄰居要取糖果,並大聲喊著:「不給糖就搗蛋(Trick or Treat)!」。萬聖節的顏色配色與鬼怪相關,如:南瓜怪的橘色烏鴉的黑色科學怪人的綠色狼人的褐色月亮的黃色……等,讓整體視覺營造出詭異的氣氛。

#FAE9C0

#E0653F

#0B0607

daydreamaster-color-scheme-halloween
Photo by Deejaymd from Adobe Stock

#E2A851

#5FB8AA

#0C0F16

daydreamaster-color-scheme-halloween
Photo by Milanmarkovic78 from Adobe Stock

(9) 聖誕節配色

聖誕節(Christmas),為每年的 12 月 25 日,又稱為「耶誕節」[14]。聖誕節的顏色配色,是由幾種要素組構而成,例如:聖誕老人服裝的紅色聖誕老人鬍子的白色聖誕樹與槲寄生的綠色薑餅人的米色拐杖糖的紅白色……等,但由於這幾種顏色太常見,了無新意,因此若想多點變化,可以考慮使用星星的黃色夜晚的黑色,營造出黑暗中帶點溫暖的感受,讓設計跳脫傳統框架。

#EFEFEF

#D41A20

#395A33

daydreamaster-color-scheme-christmas
Photo by Freepik from Freepik

#E7E6E3

#E6AE30

#0B0609

daydreamaster-color-scheme-christmas
Photo by Shunevich from Adobe Stock

創造一個好看的顏色搭配

配色在設計中是非常重要的一環,不同的顏色會影響不同的情緒。在《一看就懂配色設計》書中,特別針對「顏色知識」、「配色規則」、「實例演示」三大項,由淺入深進行教學,非常適合剛入門的初學者閱讀。如果你想直接進行實操,可以根據自身經驗挑選適合的顏色搭配網站,例如:參考配色的 Pinterest;快速上手的 Coolors;專業介面的 Adobe Color;功能單純的 Canva。不過最重要的還是學會分析要營造的氛圍,並從中擷取圖片顏色,這才是最萬用的配色技巧。你準備好了嗎?下次試試看吧!


常見問題

從何開始學習色彩配色?

你一定要先學會「看懂顏色」!在《一看就懂配色設計》書中,強調色彩知識的重要性,並提供 15 種配色模式參考,專為初學者設計,從 0 到 100,一本書完整搞定!

免費好用色彩搭配網站推薦?

根據使用需求以及操作經驗不同,由易至難的色彩搭配網站推薦為:可直接參考配色的 Pinterest;可快速完成配色的 Coolors;可學習配色知識的 Canva;可提供專業配色的 Adobe Color。

色環配色法有哪幾種?

色環配色法可分為五種:單色配色法、互補色配色法、相似色配色法、三角配色法、矩形配色法。

燙金色色號(假金)CMYK 數值?

不做後加工,直接印刷的「金色」,被稱為「假金」。有此需求的設計師,可以使用金色色號「C20 M30 Y85 K5」。

Pantone 色票是什麼?

鼎鼎大名的 Pantone 色票是什麼?Pantone 中文名稱為「彩通」[15],為一家全球聞名的色彩系統供應商,替每個顏色編上專屬色號,而這些色號又可稱為「色票」。

莫蘭迪色卡的由來?

源自 20 世紀畫家喬治.莫蘭迪(Giorgio Morandi)[16],其擅長靜物畫,並採用低飽和度和灰色調的顏色作畫而聞名。這些顏色的色卡,被後人稱為「莫蘭迪色卡」。

配色英文是什麼?

配色英文是 Color Matching。

色彩計畫英文是什麼?

色彩計畫英文是 Color Scheme,係指配色的整體規劃及使用方針。

[1] 資料來源:色彩心理學(維基百科)
[2] 資料來源:色環(維基百科)
[3] 資料來源:What is Coolors(Coolors)
[4] 資料來源:Adobe Creative Cloud(Wikipedia)
[5] 資料來源:Canva(維基百科)
[6] 資料來源:新年(維基百科)
[7] 資料來源:元宵節(維基百科)
[8] 資料來源:情人節(維基百科)
[9] 資料來源:母親節(維基百科)
[10] 資料來源:端午節(維基百科)
[11] 資料來源:父親節(維基百科)
[12] 資料來源:中秋節(維基百科)
[13] 資料來源:萬聖節(維基百科)
[14] 資料來源:聖誕節(維基百科)
[15] 資料來源:Pantone 彩通(官方網站)
[16] 資料來源:Giorgio Morandi(維基百科)





推薦閱讀


加入討論