概念篇/集大成
推薦使用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%的等腰三角形,顏色對比效果比較強烈一些
最後,談一些工具
有些工具可以讓你很快找到自己的主副色
透過隨機的挑選及建議,幫助你快速找到喜歡的配色
也有完整的色票建議
再來,進階的話就是自己操控色輪
個人認為paletton 跟w3school的工具都滿實用
還能直接套用在範例網頁上,讓你看看布局配色的效果
以上,繼續努力