做者: 阮一峰html
http://www.ruanyifeng.com/blog/2019/03/coloring-scheme.htmlgit
网页须要配色。一种好看、易用、符合心意的配色,是很不容易的,尤为在没有设计师时。github
最简单的方法是,从一个给定的色表选择颜色。我之前就是这样,主要根据 Flat UI 的色表配色。dom
这个色表提供20种颜色(实际上是10种,每种颜色有深和浅两个色调),对于简单的网页,基本够用了。实际效果能够参考 Flat UI 官网。ide
后来,我据说香港地铁的每一个车站,颜色都不同。好比,中环是红色。ui
金钟是蓝色,北角是橙色。url
这就是有名的香港地铁配色,目前一共有87种颜色。设计
我以为,这个色表很是漂亮,符合大多数人的审美,87种颜色也足够用了。code
除了使用色表,有人还提出一种配色的经验法则,也很值得参考。
(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