Plan C. 網頁色彩學 - Elementor 色彩計畫

你是否對於網頁色彩、配色毫無頭緒呢?以下教學將帶你了解網站必備的六種顏色,並搭配線上配色網站 Adobe Color 實際操作,讓你快速學會配色的技巧!最後將上述教學所得之色碼設定於 Elementor 顏色選擇器,讓網頁選擇顏色更為容易,達成網站視覺的一致性。

網頁色彩

網頁色彩計畫

網頁色彩影響了訊息的傳遞,更影響了一個品牌的視覺形象,為了讓配色的使用更有效果,必須要擬定一個完整的色彩計畫。進行配色時,謹記 KISS 原則(Keep it Simple, Stupid),盡可能減少顏色,最多不超過三種顏色。

以下配色教學將透過 Adobe Color 實際操作,一起打造你的色彩計畫吧!
* 請先將此網頁開啟於分頁,方便以下教學操作
進行網頁設計時,我們需要思考以下六種顏色:

第一種、主色

可以延續 Logo 或企業形象的標準色,例如:可口可樂的主色是紅色、星巴克的主色是綠色,這都是讓人印象深刻的品牌顏色,不同的顏色有著不同的色彩意象,我們可以透過聯想來找出適合自己的主色,例如:象徵熱情的紅色、象徵自然的綠色等。

第二種、次要色

用於一般的按鈕、標題、超連結等,可以輔助主色的呈現,一般會選擇一至三種搭配主色。配色可以採用以下四種方案:

1. 單色配色:採用與主色相同的基色,單色配色很容易搭配,可使畫面產生和諧感。

Adobe Color 設定步驟

(1) 套用色彩調和規則 → 單色
(2) 填入 Logo 或代表企業形象的標準色之色碼
(3) 色彩模式 → HSV

Tips:我們可以藉由調整主色的明度與飽和度的方式來取得一個單色。

何謂 HSV?
HSV 即色相、飽和度、明度(Hue, Saturation, Value)
色相(H)色彩的基本屬性,即平常所說的顏色名稱,如紅色、綠色、藍色等,取值範圍為 0° ~ 360°。
飽和度(S)色彩的純度,越高色彩越純,低則逐漸變灰,取 0 ~ 100% 的數值。
明度(V)色彩明亮的程度,取 0%(黑)到 100%(白)。

2. 相近色配色:採用與主色相關、不相互衝突的色彩。

Adobe Color 設定步驟

(1) 套用色彩調和規則 → 類比
(2) 填入 Logo 或代表企業形象的標準色之色碼
(3) 色彩模式 → HSV

Tips:調整主色色相正負 30~50 即可取得一個相近色。

3. 對比色配色:採用與主色相對立的色彩,具有強烈對比,可以吸引使用者的注意力。

Adobe Color 設定步驟

(1) 套用色彩調和規則 → 補色
(2) 填入 Logo 或代表企業形象的標準色之色碼
(3) 色彩模式 → HSV

Tips:將主色色相調整正負180(約寬度的一半)可取得一個對比色。

4. 中性色配色:主色與中性色(黑、白、灰)搭配,可以引起視覺衝擊與聚焦。

第三種、按鈕顏色

1. 一般按鈕:使用最普遍,主要目的是讓使用者知道有連結等用途,一般採用主色或次要色呈現即可。
2. 呼籲行動按鈕 (Call to Action):引導使用者點擊,常用於宣傳頁、登入頁,同一個畫面不會出現太多次,一般採用與主色或次要色對比強烈的顏色。

第四種、文字顏色

1. 超連結:用以連結至其他網頁,一般採用主色或次要色呈現,並加上下底線。
2. 主要文字:呈現網頁主要資訊,以背景色全白 (#FFFFFFF ) 為例,較適合閱讀的文字顏色範圍為 #333333 到 #666666。
3. 次要文字:網頁次要資訊,如備註欄位等,採用比主要文字更淺的灰色,設定時需注意行動裝置的閱讀性是否良好。

網頁色彩

常用灰色色表

冷灰色與暖灰色的使用時機
針對網頁主色調搭配使用的灰色,若想呈現一致的暖色調可以搭配暖灰色(略帶紅色的灰色);呈現冷色調則可以搭配冷灰色(略帶藍色的灰色)

第五種、裝飾線顏色

主要用以分隔文字資訊、區域,如邊框、表單、分隔線。採用比次要文字更淺的灰色,設定時需注意行動裝置的辨識度。

第六種、其他

白色:用於深色底搭配的文字或圖示,提升其可讀性與辨識度。
背景色:用於段落與段落的區隔或是突顯內容資訊。

將以上顏色套用至 Elementor 顏色選擇器吧!

Elementor 顏色選擇器可以將 8 種顏色存取在編輯器的顏色選擇器中,讓網站選擇顏色更為容易,藉以達成視覺的一致性。

網頁色彩

顏色選擇器配置範例

Elementor 顏色選擇器 設定步驟

(1) 點擊左上角「Menu」進入面板
(2) 樣式 → 顏色選擇器
(3) 儲存的顏色將顯示於編輯器的顏色選擇器中

推薦配色苦手的參考網站

當你毫無頭緒的時候,不妨嘗試從其他的設計師的作品獲得靈感,在此推薦以下網站:
Dribbble:推廣平面設計、網頁設計、插畫、攝影等其他創造性領域的商業社交平台。
Behance:提供創意專業人員展示作品及觀摩他人創作的線上平台。

小結

配色技巧是可以經由不斷努力與累積而提升,好的配色可以連結使用者的記憶,提昇品牌形象,進而影響服務對象對你的信任度。期望透過以上教學,可以讓你更加了解色彩的搭配,並實際應用在網頁設計上。
歡迎分享你們的色彩計畫!我們下次見 ~

參考資料

滬江網(2019.04.25)。七條定律,讓配色更加美好【滬江網】。取自https://www.hujiang.com/fyuid_s/p889838/
3 年 2 班程遠(2019.04.25)。看過那麼多UI 配色指南,這篇可能是最全面的(附大量實例)【優設網】。取自 https://www.uisdc.com/ui-color-design-guideline
卡斯伯(2019.04.25)。鐵人賽:色彩運用(3) – 按鈕的配色【卡斯伯】。取自https://wcc723.github.io/design/2018/10/24/button-color/
UI大課堂(2019.04.25)。新手也能用好UI設計配色【每日頭條】。取自
https://kknews.cc/zh-tw/design/nv9ea88.html

Scroll to Top