6個步驟帶你找到最適合你的網站配色跟8個超好用的配色工具

6個步驟帶你找到最適合你的網站配色跟8個超好用的配色工具

相信大家在自己架設網站的時候都會苦惱一個問題,就是我的網站到底應該要用什麼樣的配色呢?其實這是一個很需要思考的問題,因為人們大多數都是透過視覺來搜集訊息的,我們生活中的所有事物都是透過顏色組成的,不同的顏色都可以激發不同的情緒。

所以一個網站的配色方案可以代表網站的品牌形象,而且還不只如此,透過配色還可以影響人的購買意願,甚至光靠配色,就可以讓人了解一個品牌的精神。

所以今天這篇文章會跟大家分享:

  • 顏色是怎麼影響人的
  • 如何在6個步驟找到你的網站的配色方案
  • 10個好用的配色工具

色彩對人的影響

紅色的食物可以刺激人的食慾,藍色可以讓人更加的鎮定,綠色給人自然、平和的感覺,對於顏色的研究非常的多。

先不說其他的項目,光是在商業上研究表示,人在初次跟人或產品互動之後,大約90秒就會下定決心要不要購買,大約62%-90%的評估是因為顏色,這些因素很大一部份都跟色彩心理學有關。

而且大部分的人在瀏覽網站的內容的時候,大多數不是用閱讀的方式,而是使用掃描的方式,很快速的看完網站的內容,所以如果要人們詳細閱讀網站的內容的,就必須要有吸引人的元素,而顏色就是很重要的一部份。

不同顏色的含義

不同顏色都有不同的含義,也會有不同的影響,但是每個人對於不同的顏色都會有一些差異,這些差異大多來自三個因素,分別是:

  • 文化:不同文化對於不同的顏色有不同的意涵,像是在韓國粉紅色代表信任,在其他國家就不一定
  • 經驗:依據不同人對顏色會有不同的體驗,聯想到的情緒也會不同,就像是藍色對於一般人來說是有信任、鎮定或是憂鬱的顏色,但是對於衝浪手來說藍色是有活力的
  • 情境:不同的顏色在不同的情境下會有不同意思,就像黃色大家可能會聯想到太陽,但是在紅綠燈上,黃色卻是有提醒的作用。

所以不同人對於顏色的感知都會有些微的差異,因此在思考網站的配色的時候,也會建議大家要思考你使用的顏色是否也符合你的目標客群。

接下來會介紹一些常常會出現的顏色基本的意涵,幫助大家可以更好的確定網站適合的顏色。

  • 紅色:最引人注目,也是最刺激、富侵略性、令人興奮的顏色,具強烈的感染力,與較佳的明視效果。
  • 橘色:比紅色更華美、鮮艷,卻不似紅色搶眼,是最溫暖、親切的顏色。
  • 黃色:陽光的色彩,明度最高,反射性強,易引起注意及造成眼睛疲勞不適。
  • 綠色:最令人沒有壓力的顏色,幾乎能容納所有顏色,也適合所有年齡,視認性不高,多為陪襯用。
  • 藍色:最冷的色彩,也是最歡迎的顏色,天空和大海的景色都呈現藍色。
  • 紫色:給人高貴奢華、浪漫優雅等正面形象或是流動魔幻、不安、神秘恐懼等負面感覺。

正確的配色會帶來什麼樣的效益

建立品牌形象

剛剛有說到眼睛是大多數人吸收訊息的管道,所以使用吸引人、賞心悅目的顏色是最可以激起訪客的好奇心的,根據研究表示色彩可以讓品牌的知名度提高80%。

剛剛也有說到不同的顏色是可以影響人的感受的,所以運用正確的顏色,就可以影響人們對你品牌的看法。

提升轉換率

轉換率是網站很重要的一部份,架設網站不是要讓你網站的訪客變成你的客戶,就是讓他訂閱你的網站,所以行動呼籲(CTA)是很重要的,這時候如果使用吸引眼球的顏色,凸顯出你網站的CTA的話,反而會讓更多人會點他。

五種配色的方法

講了那麼多關於色彩對人的影響跟效益,相信大家已經明白配色對於網站的重要性,接下來就要告訴大家常見的配色方法,幫助大家更容易找到適合的網站配色,在這個部分不會細講色彩的知識,但會使用色環的概念。

Color matching method
  • 互補色配色法:就是指色環上的相對位置的兩種顏色,藍色橘色、紅色綠色、黃色紫色,通常會是一個主要色一個次要色。
  • 相似色配色法:相似色指的是在色環上的相鄰的三個或四個顏色
  • 補色分割配色法:這種配色法主要是一種顏色配上兩種互補相鄰的兩個顏色
  • 三等分配色法:這是有三種在色環上位置等距的三個顏色組成的
  • 矩形配色法:這種配色法是使用兩種互補色,雖然會更豐富,但是也會更難控制

以上是五種常見的配色方法,有些人可能會想說還有使用單色配色法的,或是更多顏色配色的,但是這兩種對於新手來說是很難控制的,所以這裡建議使用3種或是3種以下來做網站配色的方案。

找到網站配色的6個步驟

Step.1#找到主要色

一個配色方案裡面會有三種類別,主要色、次要色跟輔助色,主要色顧名思義就是網站最主要的顏色,他會包含在LOGO的配色裡,所以第一步就是要先找到網站的主要色,這裡提供三個方向去思考。

  1. 從目標客群思考:剛剛有說到不同人會對顏色的感知有些微的差異,所以可以思考你的目標客群他可能會喜歡什麼樣的顏色。
  2. 從品牌的定位思考:可以從你品牌創立的目標或是初衷去想,例如你的網站是關於食材生鮮蘇果的,你希望大家都可以食用到新鮮的食材,就可以使用綠色當主色調。
  3. 透過圖片尋找:這是個人認為一個比較抽象的方法,你可以找到覺得適合你的品牌情境的照片,從照片裡找到你認為適合的顏色當主色調,通常他可能是面積最大最突出的顏色。

Step.2#確定顏色的數量

接下來要思考的是你的網站需要用到幾個顏色,記得新手的話建議不要超過三個顏色,這樣會比較好控制,這筆沒有說明次要色的原因是,找到主要色之後通常次要色就是相近色或是互補色,所以這部分就看大家的選擇。

在這裡也建議大家配色的比例可以使用60-30-10顏色規則,這不只對於室內設計的顏色配比有用,對於其他的設計也很有用。

Step.3#找到輔助色

接下來就是輔助色,通常是點綴,凸顯某些元素的顏色,這些元素可能會是按鈕、側邊欄、標題等等的顏色。

Step.4#不要忘記中性色

中性性在網站中很適合用來當作背景色,如果你在網站裡面用了很豐富的色彩,中性色也可以讓你的網站的訪客可以休息一下,不用一直接受不同顏色的洗禮。

常見的中性色通常是黑、灰、白,這些也比較常用在網站內容的地方,這裡建議背景白色用#FFFFFFF,文字不要使用正黑色,要使用深灰色#333333到#666666,這樣閱讀起來更舒服。

Step.5#各種顏色的位置

接下來就是要配置這些顏色要放在哪裡了。

  • 主要色:這個顏色是你網站也是你品牌的主要顏色,通常會用在網站的LOGO、頁眉、重要的資訊或是網站的按鈕、標題。
  • 次要色:這個顏色可能就是用來凸顯沒有那麼重要的訊息,可能是副標題、選單的選項、FAQ等等的
  • 輔助色:輔助色常常會用在凸顯某些重要的資訊,如果你的輔助色是使用鮮豔的顏色的話,就會非常適合使用在網站的CTA上。

Step.6#多嘗試幾個方案

最後你可能會在嘗試過第一次之後覺得沒有那麼的滿意,所以會在重複上面的過程來多嘗試幾個方案,這是很正常的,每件事情都會需要多多嘗試才會找到最有效的方案啊!

8個好用的配色工具

最後推薦大家8個好用的配色工具,幫助大家在找到主要色之後可以順利的找到次要色跟輔助色。

PALETTABLE

PALETTABLE

PALETTABLE是一個隨機的選色工具,你可以選到你喜歡的顏色再換下一個,這樣隨機選色的方式也可以找到有趣有玩的配色。

Colorable

Colorable

Colorable是可以用來檢視背景與字體的關係的,假如你有一個特殊的頁面想要使用不同的背景跟文字的顏色,很適合用這個工具搭配。

Coolors

Coolors

Coolors也是一個隨機選色的工具,你只要按空白鍵,他就會一直變換新的顏色給你,假如有你喜歡的顏色,你可以把他鎖起來或是對他進行微調,之後再繼續選其他顏色。

Paletton

Paletton

Paletton可以讓你選擇你想要的配色方式,之後再來選擇你要的顏色,他會自動幫你找到次要色跟輔助色。

Adobe Color

Adobe Color

Adobe Color跟Paletton一樣可以讓你選擇你想要的配色方式,不過他可以讓你透過RGB跟明暗度讓你有更細微的調整。

Colourco

Colourco

Colourco也是一個隨機的選色工具,不過他的好處是你可以選好你要的配色方法,再去最隨機選色的動作。

Color Scheme Designer

Color Scheme Designer

Color Scheme Designerg是Adobe Color跟Paletton結合出來的工具,甚至他可以展示你選擇的配色方案的網站樣式。

Color Supply

Color Supply

Color Supply是一個非常有趣的配色工具,他有很多種配色方案,你可以再選好配色方案後,隨意轉動,然後你旁邊的配色表也會跟著變換,可以透過這個方式找到很多不同的方案,同時你也可以看到不同配色會產生什麼樣的圖像效果。

結語

再行銷上,配色已經是非常非常重要的一個要素,許多知名的大公司他們都會請專業的色彩心理學家來幫助他們找到適合的配色,所以也希望大家能夠找到自己理想的網站配色。

如果有任何問題歡迎下方留言喔!!

This Post Has 4 Comments

發佈留言