分類
配色

藍色配色,動手調配色彩,不再依賴配色網站

文章最後更新於 2021-07-26

即便配色網站有多種配色方案,
自己仍然無法配出好看的顏色?
Ynes介紹4種基礎的配色模式,
並搭配實作讓你動手配色,
還有配色教學和模板供下載。

RGB三原色光模式

  • 色光的加法混合。
  • R紅、G綠、B藍。
  • 黑色和白色是有無光線的差別。
    疊加在一起為白色,可想像成太陽光很大,黑色則可想像為把燈都關掉。
  • R+G=黃  R+B=洋紅  G+B=青。
RGB三原色光模式
RGB三原色光模式,from維基百科

CMYK印刷四分色模式

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

「主味和隱味」調色概念

  • 概念來自於料理技巧,在鹹的料理中,加上糖來中和調味,鹹與甜都不會太過於突出,形成另一有層次的風味。
  • 應用在調色上,會用到「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:亦可搭配不同面積比例去看配色是否和諧。

藍色配色教學與模板下載