普通人的網頁配色方案

阮一峰發表於2019-03-16

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

一、Flat UI 色表

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

這個色表提供20種顏色(其實是10種,每種顏色有深和淺兩個色調),對於簡單的網頁,基本夠用了。實際效果可以參考 Flat UI 官網

二、香港地鐵色表

後來,我聽說香港地鐵的每個車站,顏色都不一樣。比如,中環是紅色。

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

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

有人將這87種顏色,做成了色表,方便使用(原始碼)。

我覺得,這個色表非常漂亮,符合大多數人的審美,87種顏色也足夠用了。

三、配色的經驗法則

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

(1)網頁的主題色

深顏色使用cf69這四個字元,組合生成 RGB 色值,比如紫羅蘭色是9966ff,靛藍是6666ff,紅色是ff6666

淡顏色使用abcdef這六個字元,組合生成 RGB 色值。

(2)文字的顏色

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

(3)背景色、陰影色、邊框色

背景色、陰影色、邊框色都屬於襯托,建議使用灰色,可以從aaaaabbbbbbccccccdddddd這四個色值挑選。

(完)

相關文章