蘿絲叮 設計系列 | 給新手的網站配色指南:網站風格、配色怎麼選?

設計系列 | 給新手的網站配色指南:網站風格、配色怎麼選?

網站配色教學

文章最後更新於 2021 年 11 月 3 日

在設計這門學問中,最基本、也是最關鍵的一堂課就是:如何選色、配色? 顏色在一個畫面中可以帶給觀眾各種不同的視覺衝擊,打造一個吸睛的版面,讓使用者願意停下來看看,就是我們學設計的目的~
這篇文章將會教你如何選擇網站的配色,建立自己的品牌風格!

顏色情緒

先來談談顏色情緒,我們從小就被灌輸對色彩感受的觀念,說到這個顏色你會想到什麼?這個顏色會帶給你什麼樣的感受?每種顏色在不同時空背景下也都有不同象徵的意義
紅色象徵的是熱情、澎湃,也可能是憤怒、張狂
黃色象徵的是活潑、財富,也可能是驕傲、警示
藍色象徵的是平靜、自由,也可能是憂鬱、悲傷
每種顏色的組合都能帶來全然不同的感受,不同的時空地點下可能是正面、也可能是負面意義,學會善用各種顏色的搭配組合,能夠為它創造出不同的意義,你可以思考自己想帶給其他人什麼樣的感受,進而選擇適合的代表色!
舉例來說,藍色有給人理性、沉穩、專業的感覺,所以很多科技類、專業知識類的產業喜歡使用藍色,還有像Facebook、Twitter、LinkedIn等社群交流網站也都是使用藍色,可見藍色也被視作穩定與可靠的標誌。

色環的6種配色法

色環(Color Wheel)是色彩學中一定會碰到的工具,依照可見光的三原色-紅、黃、藍作為第一次色,可以相加調配出總共12色的色環。

網站配色教學-色環

1. 三等分配色法(Triadic colors)

網站配色教學-三等分配色法

顧名思義就是在色環上呈正三角形的三等分配色,如圖片上的紅、黃、藍三原色,這樣的配色會讓畫面鮮明豐富,但要注意畫面用色的平衡性、建立層次感,選擇其中一色為主色調,另外兩色則作為襯托搭配,才不會顯得畫面雜亂沒有重點。

2. 互補色配色法(Complementary colors)

網站配色教學-互補色配色法

互補色也稱為對比色,它在色環上呈180度對角,像黃色配紫色、藍色配橘色、紅色配綠色,這樣的搭配會有強烈的對比效果,通常用來強調畫面視覺主體,會有強烈奪目、活潑的效果,比較不適合大面積使用,會給人強烈的衝突、不安定感。

3. 補色分割配色法(Split-complementary colors)

網站配色教學-補色分割配色法

補色分割在色環上呈等腰三角形,它是互補色的一種延伸,避免使用對角的強烈對比色,而選用對角兩邊的相似色作為代替,少了互補色的強烈對比,使對比的感覺更柔和。

4. 矩形配色法(Tetradic colors)

網站配色教學-矩形配色法

矩形配色又稱雙重互補色,使用兩組互補色組合讓互補效果加倍,因為選用顏色上豐富要特別注意畫面的協調性,建議選擇一個顏色作為主色調,其餘顏色作為襯托可以降低使用比例或色彩強度,來維持畫面的層次感。

5. 近似色配色法(Analogous colors)

網站配色教學-近似色配色法

近似色是色環上相鄰的三色組合,我覺得是最容易搭配的配色法,能夠營造出和諧、舒適的感覺,通常會選擇一色作為主色調,一近似色為輔助,另外再搭配中性(黑、白、灰)的顏色。像本站就使用了粉色、咖啡色及白色、灰色所組成~

6. 單色配色法(Monochromatic color)

網站配色教學-Youtube顏色

這是最簡單的一種,選擇單一顏色並與中性色(黑、白、灰)做搭配,很多大型社群網站都是用這種配色法,呈現簡潔清楚的畫面,像Facebook是使用大面積灰底、白色畫面呈現、及藍色強調色這三個顏色為主,而Youtube是白色大面積、灰黑強調字體、紅色為強調色,另外兩者在深色模式則是黑白相反。

配色工具

談完以上幾種配色法,接著來介紹幾個好用的配色小工具,可以讓你更快速找到自己喜歡又符合品牌風格的色彩
1. Adobe Color : 由Adobe所提供的色環配色工具,可以選擇色彩調和規則,拉動色環中的主色調就可以自動生成對應規則的輔色,當然你也可以上傳自己喜歡的配色概念圖,它可以自動擷取圖片概念色,得到你想要的精準配色

網站配色教學-Adobe Color

2. Coolors : coolors的使用方法相對簡單,只要按下空白鍵就能自動隨機生成5個顏色,你可以選定喜歡的配色並且微調它

網站配色教學-Coolors

3. ColorSpace : 這個配色網站很適合新手使用,只要選定一個喜歡的顏色,它就可以幫你生成20幾種以你的主色調做搭配的色板,可以從中選擇你中意的作為你的品牌色系!

網站配色教學-ColorSpace

配色黃金比例

選定自己喜歡的顏色後,該怎麼運用比較好看?或者讓整體畫面比較協調呢?
這時候就要用到配色的黃金比例 6 : 3 : 1 的配色技巧,這個配色技巧在設計上非常實用!在顏色整體的呈現可以很協調,所以不管在網站、服裝、室內設計等等的顏色搭配都可以運用這個黃金比例。

網站配色教學-配色黃金比例

主要色(占60%): 用於大面積背景,適合使用中性的黑、白、灰作為底色,在配色上呈現較為簡潔,如果用於網頁或是APP等數位媒體,也讓使用者比較容易閱讀,視覺上比較舒適
輔助色(占30%): 適合當作品牌的主要顏色,作為重點顏色
強調色(占10%): 顧名思義在三色中有強烈的對比,適合當作按鈕、行動呼籲的強調顏色

總結

看了這麼多配色的方法,眼花撩亂對吧!先試著以自己喜歡的顏色搭配看看~再不然你也可以多看看其他網站是怎麼搭配顏色的,相信你也可以找到屬於自己的品牌色彩~
這裡我也建議你,可以選擇簡單的幾個顏色和中性色(白色、淺灰色)作為搭配,簡單又清楚的個人風格網站就很容易做出來囉!!

Instagram圖片尺寸 懶人包 | IG頭貼、貼文、限時動態最佳尺
3C開箱 | 2021 Macbook Air 使用心得,到底要不要買Macbook?

發表留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *