【轉】普通人的網頁配色方案

做者： 阮一峯

http://www.ruanyifeng.com/blog/2019/03/coloring-scheme.html

 

網頁須要配色。一種好看、易用、符合心意的配色，是很不容易的，尤爲在沒有設計師時。

1、Flat UI 色表

最簡單的方法是，從一個給定的色表選擇顏色。我之前就是這樣，主要根據 Flat UI 的色表配色。

這個色表提供20種顏色（實際上是10種，每種顏色有深和淺兩個色調），對於簡單的網頁，基本夠用了。實際效果能夠參考 Flat UI 官網。

2、香港地鐵色表

後來，我據說香港地鐵的每一個車站，顏色都不同。好比，中環是紅色。

金鐘是藍色，北角是橙色。

這就是有名的香港地鐵配色，目前一共有87種顏色。

有人將這87種顏色，作成了色表，方便使用（源碼）。

我以爲，這個色表很是漂亮，符合大多數人的審美，87種顏色也足夠用了。

3、配色的經驗法則

除了使用色表，有人還提出一種配色的經驗法則，也很值得參考。

（1）網頁的主題色

深顏色使用c、f、6、9這四個字符，組合生成 RGB 色值，好比紫羅蘭色是9966ff，靛藍是6666ff，紅色是ff6666。

淡顏色使用a、b、c、d、e、f這六個字符，組合生成 RGB 色值。

（2）文字的顏色

文字最好不要使用全黑，而是使用深藍色，能夠從下面幾種顏色挑。1a2a3a最深，2a3a4a次之，7a8a9a最淺。

（3）背景色、陰影色、邊框色

背景色、陰影色、邊框色都屬於陪襯，建議使用灰色，能夠從aaaaa、bbbbbb、cccccc、dddddd這四個色值挑選。

 

References

[1] Flat UI: https://flatuicolors.com/palette/defo
[2] Flat UI 官網: http://designmodo.github.io/Flat-UI/
[3] 色表: http://metrocolor.live/index.html
[4] 源碼: https://gist.github.com/ruanyf/e6c896df1c24d0236eb93d65144f2907
[5] 配色的經驗法則: https://sendwithses.gitbook.io/helpdocs/random-stuff/easy-to-remember-color-guide-for-non-designers