網頁色彩知識匯集/學習

張凱喬
7 min readSep 29, 2017

--

在開始學網頁/CSS的過程中,常常會覺得配色很難
練習的時候亂配一通,總覺得應該要好好學一下

在這邊分享我所蒐集,從無到有的色彩觀念
包含如何應用到網頁上,及一些設計實例

概念篇/集大成

推薦使用K-I-S-S原理 (Keep it Simple,stupid 盡可能的簡單)。首先,盡可能的讓顏色較少,考慮以下幾點:

背景顏色
主要色
輔助色
警告色
成功色

通常在設計網頁的時候,會建一個簡單的色票
是網頁設計用來規範這個網站所使用的顏色
如此一來可以讓這個網站的頁面具有一致性
也能幫助瀏覽者的閱讀體驗更好一些

色票的內容包含上述這些概念
"背景顏色、主要色、輔助色、警告色、成功色"
大概分成三類
第一類 背景色: 你的網頁底色、跟主要區塊的顏色 應相近 不宜衝突
(我覺得一開始練習網頁配色時,淺灰滿百搭的)

第二類 主色跟輔色: 這會是你網站顏色搭配的成敗關鍵
主色使用在頁面上包含重要區塊、按鈕、文字的顏色

輔色使用在頁面上包含 反白、副標題 等等

第三類則是一些功能顏色
至少會包含正向顏色(成功、正確等)、負向顏色(失敗、警告等)

參考
https://www.websitebuilderexpert.com/how-to-choose-color-for-your-website/
http://www.zcool.com.cn/article/ZMTQwNTY0.html

連結裡也大致說明了如何挑選主色、副色喔

再來就是如何挑選顏色了

最基本的,就是顏色會帶給你甚麼感覺

不同的顏色會為你的網站帶給瀏覽者不同的感覺
這也是一些色彩心理學 理論相關的研究,可以參考

但我認為,一開始接觸網頁設計時
還不需要花太多時間研究色彩學
只要參考幾個主流的配色、流行的網頁配色
做出來的網頁應該就滿有質感

(上面這篇的原文請參考下面連結,可以直接擷取顏色代碼)

接下來,發現網路上所建議的顏色參考不符合自己期待
就可以開始自己動手建一個色票,但是對沒有顏色概念的人而言
如何快速的建立對比色、鄰近色等多種 配色的原則呢?

上列連結中,說明了一些配色常用的方式
包含Triadic Color Scheme、Analogous等

簡單說明請參考

基本上,都是運用色盤 選取多種角度的顏色
不同的方式、角度也都會產生不同效果

例如三色式(也就是在色盤取三角形)
正三角形的話 色彩整體會比較平均
頂角30%的等腰三角形,顏色對比效果比較強烈一些

--

--