网页需要配色。一种好看、易用、符合心意的配色,是很不容易的,尤其在没有设计师时。
一、Flat UI 色表
最简单的方法是,从一个给定的色表选择颜色。我以前就是这样,主要根据 Flat UI 的色表配色。
这个色表提供20种颜色(其实是10种,每种颜色有深和浅两个色调),对于简单的网页,基本够用了。实际效果可以参考 Flat UI 官网。
二、香港地铁色表
后来,我听说香港地铁的每个车站,颜色都不一样。比如,中环是红色。
金钟是蓝色,北角是橙色。
这就是有名的香港地铁配色,目前一共有87种颜色。
我觉得,这个色表非常漂亮,符合大多数人的审美,87种颜色也足够用了。
三、配色的经验法则
除了使用色表,有人还提出一种配色的经验法则,也很值得参考。
(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
这四个色值挑选。
(完)
9y43 说:
收藏了,哈哈哈
2019年3月16日 21:09 | # | 引用
王不对 说:
base16也是一种蛮不错的配色方案,提供16种基础的颜色可选。在一些不需要太多颜色的场合用起来很方便。最主要的是提供了设计时的参考文档,不用自己选,按照推荐来就好,适合懒人。
https://github.com/chriskempson/base16
我的个人网站就用的这个方案。
2019年3月16日 22:17 | # | 引用
naeco 说:
收藏了
2019年3月16日 23:25 | # | 引用
CXD 说:
图片压缩有点狠了
2019年3月17日 00:08 | # | 引用
王业坤 说:
收藏了
2019年3月17日 09:39 | # | 引用
lmyan 说:
选颜色很难,搭配颜色也很不容易
2019年3月17日 11:36 | # | 引用
kathous 说:
实用啊!!
2019年3月18日 09:58 | # | 引用
披星戴月 说:
这样好工具收藏起来
2019年3月18日 11:10 | # | 引用
小麻雀 说:
我以前也喜欢去 flat ui 找颜色
2019年3月18日 11:17 | # | 引用
fengchang 说:
推荐一下 Adobe Color CC,选一个颜色,推荐对应的配色:https://color.adobe.com/create/color-wheel/
2019年3月18日 11:22 | # | 引用
大洋 说:
我觉得这个网站的浅黄配色蛮舒服的
2019年3月18日 15:19 | # | 引用
推车 说:
收藏了,很实用哈哈
2019年3月18日 16:53 | # | 引用
飞天熊猫 说:
这个是真的有用哦 吼吼
2019年3月20日 15:57 | # | 引用
Sliny 说:
收藏,配色真的很重要
2019年3月21日 19:45 | # | 引用
斌桑 说:
选择困难症表示配色很困难!
2019年3月27日 11:38 | # | 引用
Can 说:
你的这个网页颜色就没几个呀~~
2019年3月28日 05:04 | # | 引用
Gavin 说:
之前一直因为从小的审美能力就没有培养好,其实我缺少总结
2019年3月29日 14:20 | # | 引用
pdbn's blog 说:
选择困难,还是不知道怎么配色,今天觉得好看的颜色,明天又觉得不好看了。
2019年4月 9日 09:48 | # | 引用
Red 说:
請問為何不建議全黑?
2019年4月14日 22:47 | # | 引用
ziox 说:
根据文中提到的方法做了一个工具, 点击复制颜色,我等懒人实在不愿手动配色
https://ziox.xyz/color-generator/
2019年4月27日 21:03 | # | 引用
Bill 说:
作为一个程序员,我感觉我的配色真是灾难级别的。。。。。
cf69的概念还蛮有意思的,回头试试
2019年12月 4日 10:31 | # | 引用
JybCn. 说:
你们见过我纯钢铁直男的配色吗?
2020年1月 3日 11:33 | # | 引用
ZZY2357 说:
感谢感谢,爱死了
2020年3月28日 22:09 | # | 引用
晓风残月 说:
人类在几百万年进化中,自然环境下是几乎没有高饱和度的颜色的,因此人眼看到高纯度色彩很感觉“刺眼”.
降低饱和度后就显得自然很多。
2020年9月 1日 11:51 | # | 引用
jackson 说:
一如既往的干货!
2022年6月17日 10:22 | # | 引用