网站配色如何设计

Question

非设计师，进行一个个人网站的时候怎么进行配色设计?

网上有好多color scheme可以参考，但是具体怎么用呢，比如http://www.peise.net/tools/web/

我选择了红色作为主色调：

针对右边的配色，改如何设置呢？比如什么样的颜色做背景、文字、副背景等等。

怎么破？

Answer 1

也非设计师，只是前端做久了，耳濡目染下的一些理解。

黑白灰大多数情况下都是可以使用的，文字、背景、边框，可以根据场景调整颜色的色调、饱和度、亮度。
常用于文字的 #333、#666、#999，这都是你可以在 segmentfault 上看到的文字颜色。
用于区块、整页背景色一般从 #fff 到 #e1e1e1 之间。
灰色边框比灰色背景色再深点，也就是 #ccc、#ddd 浮动。

然后就是选择一到两种你的站点主色，一种可作为大区块着重背景，比如导航栏、页面底部；另外一种作为点缀，如文字链接、按钮等等。

推荐几个选择配色的站点：
http://flatuicolors.com/
https://www.materialui.co/
http://www.materialpalette.com/

Answer 2

颜色搭配网站给你的只是一个参考而已。你需要的其实不只是一个颜色搭配的参考。

从网站的布局，色彩，字体选择等再到你这个个人网站的交互性等各个方面，网页设计包含的东西不只是一个颜色搭配就可以解决的。

一般是先有个网页原型图，然后做出设计图，然后再进行编写代码实现的工作。

其实，你如果暂时不知道怎么做的话，我建议你多多参考设计网站上的那些案例。

推荐一些可以参考网页设计的网站：

http://www.templatemonster.com

http://www.zcool.com.cn/works/607!0!!0!0!200!1!1!!!/

http://www.uisdc.com/designer-website-gallery

http://www.uisdc.com/20-fabulous-personal-websites

http://www.site.uplabs.com

https://www.behance.net/search?field=102&content=projects&sort=appreciations&time=week

http://themeforest.net

要做一个好的个人网站，真的建议多看看。

Answer 3

你问了好几本书。