普通人的网页配色方案

作者: 阮一峰

日期: 2019年3月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这四个色值挑选。

(完)

留言(25条)

收藏了,哈哈哈

base16也是一种蛮不错的配色方案,提供16种基础的颜色可选。在一些不需要太多颜色的场合用起来很方便。最主要的是提供了设计时的参考文档,不用自己选,按照推荐来就好,适合懒人。

https://github.com/chriskempson/base16

我的个人网站就用的这个方案。

收藏了

图片压缩有点狠了

收藏了

选颜色很难,搭配颜色也很不容易

实用啊!!

这样好工具收藏起来

我以前也喜欢去 flat ui 找颜色

推荐一下 Adobe Color CC,选一个颜色,推荐对应的配色:https://color.adobe.com/create/color-wheel/

我觉得这个网站的浅黄配色蛮舒服的

收藏了,很实用哈哈

这个是真的有用哦 吼吼

收藏,配色真的很重要

选择困难症表示配色很困难!

你的这个网页颜色就没几个呀~~

之前一直因为从小的审美能力就没有培养好,其实我缺少总结

选择困难,还是不知道怎么配色,今天觉得好看的颜色,明天又觉得不好看了。

請問為何不建議全黑?

根据文中提到的方法做了一个工具, 点击复制颜色,我等懒人实在不愿手动配色
https://ziox.xyz/color-generator/

作为一个程序员,我感觉我的配色真是灾难级别的。。。。。

cf69的概念还蛮有意思的,回头试试

你们见过我纯钢铁直男的配色吗?

感谢感谢,爱死了

人类在几百万年进化中,自然环境下是几乎没有高饱和度的颜色的,因此人眼看到高纯度色彩很感觉“刺眼”.
降低饱和度后就显得自然很多。

一如既往的干货!

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接