為什麼電商促銷 Banner 大多是紅色系呢?為什麼 CTA 都是高飽和度顏色呢?
一間吸引人的網店,設計風格實為關鍵,其中網站整體配色更是主要因素之一,由於人們對於顏色的認知不僅限在視覺上,更會延伸到大腦,進而影響我們的感受、思想、甚至是生活文化。到了 20 世紀,陸續也有學者透過科學的方法來探討這些現象,而「色彩心理學」的概念,也因此誕生了。

淺談色彩心理學在電商上的應用

色彩心理學(Color Psychology),這名詞最早是出現在二十世紀,由於人類對於顏色的喜好一直都受到了各種因素的影響而有所差異,舉凡文化背景、生活習慣、性別等皆會造成人類行為上的改變。

舉例來說,在台灣新冠肺炎防疫期間時,「男生戴粉紅色口罩」的話題引起了大眾討論及反思,另外,在既定的印象中,大多數的女性能夠比男性辨識出更多色彩,這也有很大的可能與生活習慣有關,像是女性較常使用口紅、指甲油等化妝品而造成,其正是因為文化背景、性別差異下所造成的顏色性別化刻板印象。

當然,顏色會影響購物也是理所當然的,尤其是色彩心理學在商業上的運用,已是各品牌再熟悉不過的事,包含品牌的設計、產品的設計,都可以透過顏色來凸顯品牌理念跟風格。根據網頁設計及數位行銷公司 WebFX 每年的調查(2020),有 84.7% 的消費者會依據「顏色」作為主要購買商品的理由,同時當消費者在購買商品時,有 92.6% 的人會以商品外觀視覺做購買主因,而以材質及聽、聞感官來決定購買商品的人僅有 7.4%。

人們購買商品考量因素調查(圖截自 WebFX)
圖一、人們購買商品考量因素調查(圖截自 WebFX)

此外,有 80% 的消費者認為顏色可以加深他們對品牌的辨識,亦有超過 52% 的消費者會因為商店整體美感而選擇是否造訪;有 42% 的消費者會因為顏色而點擊廣告,使點擊率提升。

綜合以上,顏色對於一個品牌來說,會影響品牌給人的感覺,甚至是購買商品的意願。因此,掌握住適合自己品牌的配色,將其呈現在你的網店中,就有更多的機會讓消費者停留在你的網站,進而增加他們購買的機會。

認識色彩三個重要屬性:明度、色相、飽和度

既然色彩是會影響消費者決定購買行為的重要因素,那首先我們可以先從了解色彩的三個重要屬性開始,分別為「明度」、「色相」及「飽和度」。

一、明度(Value):

明度,它代表顏色的明暗程度,影響顏色的深淺,顏色越深明度則越低,反之亦然。而調整色相中不同色彩的明度,就可得到更多種色彩的選擇,如藍色色相中,依照明度高低,就可得到淺藍、藍、深藍色等。

以無彩色為例,明度越高,顏色就會趨向於白色,越低則趨向於黑色
圖二、以無彩色為例,明度越高,顏色就會趨向於白色,越低則趨向於黑色

在商業應用上,不同明度的顏色也會呈現不同的品牌調性,低明度顏色常被拿來凸顯商品品質、質感等,或者是來營造品牌整體的奢華的氛圍等,以 shu uemura 植村秀的品牌官網為例,就是透過低明度的顏色最為商品背景,凸顯出產品的質感。

shu uemura 植村秀品牌官網以低明度顏色作為商品背景,凸顯其質感
圖三、shu uemura 植村秀品牌官網以低明度顏色作為商品背景,凸顯其質感

二、色相(Hue):

色相就是顏色,透過明度及飽和度搭配所產生的各種色彩樣貌,最基本的色相為:紅、橘、黃、綠、藍、紫,不同色相也會影響不同的生理及心理感官。而「紅、橘、黃」屬於暖色調;「綠、藍、紫」則為冷色調。

同樣在商業的應用上,色相的選擇基本上是影響整個品牌風格的關鍵,可以透過配色的技巧來創造千變萬化的視覺體驗,像是水流莊牧場,以藍綠色系為主色來凸顯品牌風格,可以感受到藍色系所帶來的乾淨、清新氛圍,讓牛奶顯得更為美味。

水流莊牧場網站,以藍綠色系為主,讓牛奶商品更吸睛
圖四、水流莊牧場網站,以藍綠色系為主,讓牛奶商品更吸睛

三、飽和度/彩度(Saturation):

飽和度換言之就是色彩的鮮豔度,飽和度高代表顏色越鮮豔,視覺感受也越強,同理,飽和度低則會讓色彩偏淡,而影響飽和度的因素就是其中灰色消色的比重,灰色消色比重越大,飽和度就越小,反之亦然。

在商業上的使用,特別是電商產業,高飽和度色彩最常拿來做行銷宣傳的 Banner,因為能讓消費者產生視覺上的衝擊,吸引他們的注意,同時也因為長期以來的銷售習慣影響,讓消費者看到這種高飽和度的素材,便能下意識產生促銷、打折的聯想,因此此作法也就一直延用至今。

各大電商平台促銷活動視覺圖都以高飽和度顏色為主(圖截自MOMO、蝦皮、Pchome網站)
圖五、各大電商平台促銷活動視覺圖都以高飽和度顏色為主(圖截自MOMO、蝦皮、Pchome網站)

綜合以上,透過三個屬性相互搭配,便可從色相中所延伸出許多不同的色彩,產生不同的視覺體驗來影響品牌的風格,因此編輯整理了色相中的基礎色(紅、橘、黃、綠、藍、紫)及消色(黑、白、灰)等九大色相,並說明它們對人們心理、生理上有何影響,以及應用在電商產業的概況,詳見以下:

九大色相對人們心理、生理的影響

一般來說,顏色對人們的影響可分為「直接」及「間接」的效應:

  • 直接影響:通常由顏色本身的特點引起人們心理、或生理上的本能反應,舉例來說,看到綠色會覺得眼睛得以紓緩等。
  • 間接影響:為顏色引起人們在情感和認知上的改變,會讓人產生聯想,同時也具有文化象徵性的印象,舉例來說,紅色讓人聯想到火,同時也會讓人想到聖誕節等。

這些生理及心理的影響,正是可以用來做為「行銷」的武器,讓消費者在潛移默化之下受到影響而購買商品。

一、紅色

紅色在光譜之中波長最長,直接影響上可使人有活力、衝勁,同時也會引起性慾、食慾等,對於視覺上的壓迫較高,長時間觀看容易引起視覺疲勞,產生憤怒感。

而在間接影響中,紅色則容易讓人聯想到火焰、蘋果、鮮血、太陽、節慶等,同時也代表著熱鬧、力量、愛情、運氣、勝利、喜氣、能量、興奮等;負面的聯想則為危險、暴力、警告等。

紅色對人的心理影響(圖取自 123RF)
圖六、紅色對人的心理影響(圖取自 123RF)

【紅色在電商上的應用】

  1. 紅色容易讓人聯想到喜氣,因此最常拿來作為購物節慶的主色,營造狂歡慶典氛圍。
  2. 明度較低的紅色(偏暗紅色),能凸顯出品質、高貴、奢華的氛圍,因此常被化妝品、精品產業等所使用。
  3. 紅色具有力量感,時常與黑色做搭配,呈現力量、速度的感覺,像是運動、健身、汽車汽車等產業才如此應用。

二、橘色

橘色是由紅色及黃色的混合,波長僅次紅光,在直接影響中會刺激腦袋活動、引人興奮、感到溫暖,同時也會增加食慾。

在間接影響中則會容易令人聯想到橘子、南瓜、萬聖節、日落日出、秋天、楓葉等;同時也象徵著溫暖、童趣、光明、提醒、生命力、快樂、輕鬆;若是負面聯想則為危機、警訊、嫉妒、乾燥等。

橘色對人的心理影響(圖取自 123RF)
圖七、橘色對人的心理影響(圖取自 123RF)

【橘色在電商上的應用】

  1. 橘色給人一種秋天之感,因此要推行秋裝的服飾業很適合運用。
  2. 飽和度較高的橘色會凸顯出一種溫暖的感覺,因此適合居家用品的色相選擇。
  3. 橘色在電商上也常給人一種促銷感,因此購物節也適合紅、橘色偏暖色調的顏色。

三、黃色

黃色是明度最高的色相,在直接影響中可以幫助人們釐清思緒,並有助於血清素的分泌、同時也能增加食慾、帶來快樂,但長期接觸容易造成視覺疲勞等狀況。

而在間接影響中,黃色則代表著陽光、玉米、香蕉、月亮、燈,抽象上則為年輕、活力、創新、歡樂;負面聯想則為有警示、疾病、嫉妒的感覺等。

黃色對人的心理影響(圖取自 123RF)
圖八、黃色對人的心理影響(圖取自 123RF)

【黃色在電商上的應用】

  1. 黃色時常與黑色做結合,具有強烈的視覺衝擊感,時常拿來做電商促銷標語的配色。
  2. 黃色容易讓人感到年輕有活力,常被運動、休閒服飾產業做行銷上的使用。
  3. 黃色與橙色也是食品產業相當適合的顏色,容易激起食慾。

四、綠色

綠色為黃色和藍色的混色,偏冷色調,在直接影響上帶給人們一種涼爽舒適之感,同時對人的眼睛有舒緩壓力作用。

在間接影響中,則會讓人聊想到森林、草原、春天、蔬菜、山,抽象上則有營養、成長、生命力、安靜、安全、舒坦之感;負面聯想則是生病、怠惰、生疏。

綠色對人的心理影響(圖取自 123RF)
圖九、綠色對人的心理影響(圖取自 123RF)

【綠色在電商上的應用】

  1. 綠色本身就具有環保、自然、乾淨等意識,因此在居家用品,戶外用品產業很常見。
  2. 綠色同時也給人一種健康、生命力的感覺,適合使用天然成分的化妝品、保養品、健康食品使用。
  3. 綠色也代表春天的顏色,因此可作春季促銷的用色選擇。

五、藍色

藍光是光譜中波長最短的,在直接影響上會讓人感到心理舒緩、放鬆,使人心平氣和,長期接觸則會令人感到抑鬱、降低食慾等。

在間接影響上則讓人想到海洋、天空、同時也有專業、科技、寧靜、穩定、安全、信任、乾淨之感;負面聯想則有抑鬱、悲傷、冷漠、孤立等。

藍色對人的心理影響(圖取自 123RF)
圖十、藍色對人的心理影響(圖取自 123RF)

【藍色在電商上的應用】

  1. 藍色本身帶有專業、安全、穩定之感,常被應用在科技類別產品的行銷上。
  2. 明度高到低的藍色都帶有海洋、沁涼的感覺,因此廣泛被使用在一些保養品、潔淨用品上,凸顯其保濕補水之效,很多飲料業者也常運用不同明度藍色作為主要配色。
  3. 藍色屬於冷色調顏色,適合冬季保暖服飾的促銷使用,透過藍色引起寒冷之感作為背景來凸顯商品的功能性。

六、紫色

紫色為紅色與藍色的混合,並作為黃色的互補色,帶有神秘感,在直接影響中則會引導人們省思,刺激性慾,但也會帶來陰暗之感,產生挫折感。

而間接影響上則讓人想到紫羅蘭、洋蔥、盛典、宗教儀式,並帶有宏偉、高貴、神秘、奢華、時尚、壯麗的感覺;負面則為炫耀、自負、傲慢、虛榮等。

紫色對人的心理影響(圖取自 123RF)
圖十一、紫色對人的心理影響(圖取自 123RF)

【紫色在電商上的應用】

  1. 紫色本身帶有一種神秘感,也非常適合女性,可凸顯出優雅高貴的氣質,因此高質感女裝時常會使用它。
  2. 紫色所延伸出的各種顏色,帶有夢幻感,常應用在情人節、愛情相關等促銷活動。
  3. 明度較高、飽和度低的紫色(粉紫),也常用於女性商品之中,與粉紅色做搭配營造出甜美清新的風格。

七、黑色

黑色是無彩色中明度最低、最暗的顏色,會將可見光完全吸收,在直接影響中,會讓人們感受到重量感,以及會帶來強而有力的感覺。

在間接影響上則會讓人想到夜晚、墨水、宇宙等,抽象上則為神秘、莊重、力量、典雅;負面聯想則為噩耗、死亡、空虛、罪惡等。

黑色對人的心理影響(圖取自 123RF)
圖十二、黑色對人的心理影響(圖取自 123RF)

【黑色在電商上的應用】

  1. 黑色一般會與其他色相搭配使用,與紅色搭配可凸顯力量感;與黃色搭配可提高視覺衝擊等,適合時尚品牌所使用;與白色搭配可營造出簡約的風格,帶有文藝感。
  2. 黑色的莊重感也會作為很多精品、科技產品的背景選擇,營造高端的商品細節,增加質感上的呈現。

八、白色

白色不會吸收任何的光,與黑色完全相反,同時是無彩色中明度最高的顏色,會直接帶給人們舒緩、舒暢的效果。

同時在間接影響上,會讓人想到雪、兔子、冬天、婚禮、牛奶等,抽象上則為純淨、乾淨、和平、天真、神聖、輕鬆、開闊之感;負面聯想則為虛無、冰冷、單調等。

白色對人的心理影響(圖取自 123RF)
圖十三、白色對人的心理影響(圖取自 123RF)

【白色在電商上的應用】

  1. 白色會讓整體視覺顯得簡約乾淨,以簡約風格為品牌主軸的產業可以使用。
  2. 白色也成作為凸顯商品質感的背景色,減少雜訊讓消費者更專注在商品上。

九、灰色

灰色是由黑色及白色的混合色,同樣是無彩色,在直接影響中會帶給人們期望,以及黯淡之感。

而間接影響則會讓人聯想到陰天、鋼鐵、灰塵、月球表面、石頭、大象等,同時在抽象上則帶有穩定、可靠、謙遜、結實、中立等;負面聯想則有乏味、孤寂、保守、衰老之感。

灰色對人的心理影響(圖取自 123RF)
圖十四、灰色對人的心理影響(圖取自 123RF)

【灰色在電商上的應用】

  1. 與白色相同,灰色常用來做為商品細節照的背景使用,凸顯出商品的質感。
  2. 灰色帶有穩定、平靜的感覺,因此居家用品、沐浴用品等產業常使用其做搭配,襯托商品所帶來的平靜安穩之感。
  3. 不同明度的灰色也很適合拿來健身、運動品牌使用,其給人堅硬、強韌之感,很符合健身、運動品牌的調性。

以上九個色相,皆可以調整其飽和度、明度,創造出更多顏色選擇,同時將顏色相互搭配,來營造整體品牌官網的形象及風格,便能夠讓消費者深深的被品牌官網所吸引,以下編輯整理了電商產業常見的色相選擇:

a. 食品飲料:紅、橘、黃、綠、白
b. 生活家居:橘、藍、黑、灰、白
c. 運動健身:紅、黃、藍、黑、白
d. 醫療保健:綠、藍、白
e. 美妝保養:紅、綠、紫、黑
f. 3C 科技:藍、黑、白、灰
g. 衣著服飾:紅、橘、黃、綠、藍、紫、黑、灰
h. 時尚精品:紅、紫、黑

一同打造你的品牌電商用配色抓住消費者!立即免費試用開店 30 天


品牌官網的配色法則

看完以上各種色相所造成的心理、生理的影響,接著就來看看它們彼此可以如何做「配色」。「配色」簡單來說,就是將兩種以上的色彩做搭配,透過色彩的差異產生的聚焦的作用,有效抓住消費者的目光。

同時,配色也很講究色彩的「調和」,如果缺少良好合適的調和,可能會讓消費者的視覺疲勞,或是吸引不到他們的注意,所以掌握一些配色技巧,可以減少用錯顏色的機會。

以下就介紹電商產業上常見配色調和應用:「冷暖色對比」、「有彩、無彩色對比」、「色相搭配」、「飽和度搭配」。

一、冷暖色對比:

冷暖色對比顧名思義就是「紅、橘、黃」色相與「綠、藍、紫」色相去做對比搭配,簡而言之,先選擇你的品牌主色後,再選擇有別於主色的相反冷暖色調。舉例來說,如果今天你的品牌主色為藍色(冷色調),你就可以選擇紅、橘、黃等暖色調色相做搭配。

另外一種冷暖色則為同一個色相中的對比,舉例來說,如果今天品牌為紅色,就可以用明度的高低區分為同色相的冷暖,明度低的暗紅色為暖,明度高的亮紅色為冷,以此去做搭配應用。

果物配嚴選為例,其主要使用綠色(冷色)搭配橘色(暖色)為品牌配色,其中橘色非常適合食品類別(水果尤佳),綠色也能表現出健康、天然之感,兩者色相產生的對比讓消費者進入網店彷彿踏入了一間水果店一般,營造出合適品牌調性的氛圍,讓人馬上了解到品牌所販售什麼商品。

果物配嚴選電商官網
圖十五、果物配嚴選電商官網

二、有彩、無彩色對比:

無彩色即為黑、白、灰,其搭配有彩色去做設計,視覺上會更凸顯有彩色給人的感覺,像是經典的黑黃、黑紅等配色皆是。

以台灣職籃 P League+ 的新竹攻城獅球隊官網,便是透過無彩色(黑、灰、白)搭配有彩色(紫、紅為主),營造出整體官網形象,而紫色帶有神秘、宏偉的感覺,象徵著如隊伍 Logo 萬獸之王的王者地位 ;紅色則有熱情之感,能夠表現出球隊及球迷的活力,同時搭紅色配黑色能凸顯隊伍中每位優秀的球員的力量感,讓消費者更加喜愛這些球員及隊伍。

新竹攻城獅球隊官網
圖十六、新竹攻城獅球隊官網

三、色相搭配:

色相對比有非常多種對比方式,這裡可以先提到互補色的對比搭配,「互補色」可視為色環當中與自己最遠的色彩(如圖),而其餘各自顏色搭配,兩色相鄰距離越近,對比則較弱,越遠則對比越強。

色相搭配示意
圖十七、色相搭配示意

當支蜜 BnnBee 品牌電商為例,就以藍綠色及橘色的互補色去做整體網站的配色,橘色不僅可以凸顯蜂蜜的美味,配合對比色(藍綠色)的使用增加視覺的衝擊,而人腦本身對於互補色也會有生理上的平衡,讓人感到和諧,而藍色系本身帶有安全、專業之感,也讓消費者一進入網店,就能感受到品牌的用心和品質,增加想購買商品的機會。

當支蜜 BnnBee 電商官網
圖十八、當支蜜 BnnBee 電商官網

四、飽和度搭配:

飽和度對比則是改變一個色相的飽和度,將其分為八個以上的色階,並可配合無彩色(黑、白、灰)來做搭配,讓整體網站呈現同一色相的漸變視覺效果,同時也能營造出品牌給人的整體感受,如暖色系的色階漸層,可以呈現出溫暖的感覺;冷色系則能呈現沁涼的感受。

BeHoomie 品牌官網為例,其網站配色選用暖色系的咖啡色為主,搭配不同飽和度的色階,呈現出網站的層次感,同時咖啡色等大地色系,給人一種信實、質樸、忠實之感,能夠更加凸顯品牌的標語「人寵生活,不分你我」的概念,讓消費者進入網店便能體會到與家中毛小孩生活的那種平和、樸實,使人感到安心自在。

BeHoomie 品牌官網
圖十九、