文章最後更新於 2021-07-26
即便配色網站有多種配色方案,
自己仍然無法配出好看的顏色?
Ynes介紹4種基礎的配色模式,
並搭配實作讓你動手配色,
還有配色教學和模板供下載。
RGB三原色光模式
- 色光的加法混合。
- R紅、G綠、B藍。
- 黑色和白色是有無光線的差別。
疊加在一起為白色,可想像成太陽光很大,黑色則可想像為把燈都關掉。
- R+G=黃 R+B=洋紅 G+B=青。

CMYK印刷四分色模式
- 色料的減法混合。
- Cyan青、Magenta洋紅、Yellow黃、blacK黑。
- 疊加在一起為黑色,可想像成是顏料混合後呈現黑色。
- M+Y=紅 C+Y=綠 C+M=藍。

「主味和隱味」調色概念
- 概念來自於料理技巧,在鹹的料理中,加上糖來中和調味,鹹與甜都不會太過於突出,形成另一有層次的風味。
- 應用在調色上,會用到「CMYK印刷四分色模式」原理。
- 藍色=Cyan青+Magenta洋紅,加入blacK黑可調整亮度。
主味「Cyan青」、「Magenta洋紅」、「blacK黑」。
隱味「Yellow黃」。
- 在藍色中加入不同比例的隱味「Yellow黃」,會呈現不同的藍色。

HSL
- Hue色相:有彩色、無彩色。
- Saturation彩度:顏色清淡到鮮豔的變化。
- Lightness亮度:顏色從明亮到暗沉的變化。
延伸閱讀:「4大實用配色技巧,操作你的配色練習」
參考資料與推薦課程
藍色單色配色

1.RGB色彩模式,將R、G數值調為0,B數值調滿的藍色。

2.HSB色彩模式,H挑選藍色系,進行彩度和亮度的調整,搭配第一個顏色。

3.HSB色彩模式,H挑選藍色系,進行彩度和亮度的調整,搭配前兩個顏色。

4.HSB色彩模式,H挑選藍色系,進行彩度和亮度的調整,搭配前三個顏色。

5.回頭檢視,認為第一個顏色在這組配色中顯得怪,切換到CMYK色彩模式,增加「隱味Y」數值。
藍色雙重色配色

1.挑選一順眼的藍色。

2.我再挑了藍色的對比色橘色作為雙重色搭配。

3.再選一藍色系帶點紅色,偏較暗的紫色。

4.再挑選一彩度較低,亮度高的橘色系。

5.將第一個顏色,在CMYK色彩模式,增加「隱味Y」數值,變成較黯淡的藍色,能與紫色相稱。

6.將第二個橘色,調整更加入紅色的嫩橘色,也比原本橘色更調低彩度和亮度。
藍色多重色配色

1.挑了一藍灰色。

2.挑近鄰的藍綠色。

3.挑相鄰的紅色系,選擇低彩度高明度的粉紅色。

4.挑一綠色帶點黃色,可與第二與第三顏色相稱。

5.調低第四個顏色的彩度。
貼心提醒QA
Q1:我要如何知道什麼顏色相互搭配會是好看的?
A1:顏色搭配好看佔主觀成分很大,並無標準答案,只有透過練習,累積 配色經驗,在每次配色都更順手。
Q2:同款顏色我要如何增加顏色變化度,創造更多色彩?
A2:藉由調整顏色的「彩度」、「亮度」或「主味和隱味的技巧」,即可在色彩光譜上調整出許多同系列色彩。
Q3:顏色搭配除了主觀感受外,還會受到什麼影響嗎?
A3:配色尚須留意主題性相關、文化意涵和版面配置等因素。
*你也可嘗試設定一主題(清新/復古/怪誕/悲傷)來進行配色練習。
*文化意涵可能是此顏色代表的政治形態、人們直覺的聯想。例如,紅色代表熱烈和警示危險。
*版面配置則是編排系統性,會影響人們閱讀時的歸納與便利程度。
Q4:新手練習適合用幾格配色?
A4:從以上練習可發現,我僅用了4格進行示範。
我建議若是新手剛開始,可以先從3-4格,單色和雙重色配色練習開始,從有限的顏色選擇和格數去練習排出無限的可能,再進階到多重色和多格數。
Q5:配色靈感缺乏時,怎麼配都覺得不順怎麼辦?
A5:關掉螢幕,去做其他事,休息過後再回來繼續吧。
A5:無彩色(黑灰白)在無配色靈感時,是很好的搭配調劑。
A5:多留意生活中各種事物(大自然、包裝品)的配色,增加配色靈感資料庫。
Q6:顏色搭配好了,就無懈可擊,不用再變動了嗎?
A6:配色完成後可以過段時間後再打開,主觀上認為不太滿意,仍可繼續變動調整,這是動態性調整的過程。
A6:亦可搭配不同面積比例去看配色是否和諧。