42

普通人的网页配色方案

 5 years ago
source link: http://www.ruanyifeng.com/blog/2019/03/coloring-scheme.html?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

网页需要配色。一种好看、易用、符合心意的配色,是很不容易的,尤其在没有设计师时。

一、Flat UI 色表

最简单的方法是,从一个给定的色表选择颜色。我以前就是这样,主要根据 Flat UI 的色表配色。

uU3mYv7.jpg!web

这个色表提供20种颜色(其实是10种,每种颜色有深和浅两个色调),对于简单的网页,基本够用了。实际效果可以参考 Flat UI 官网

vUzqM3E.jpg!web

二、香港地铁色表

后来,我听说香港地铁的每个车站,颜色都不一样。比如,中环是红色。

VZjqimR.jpg!web

金钟是蓝色,北角是橙色。

NvQbi2N.jpg!web

UZRbim2.jpg!web

这就是有名的香港地铁配色,目前一共有87种颜色。

7RZV73B.jpg!web

有人将这87种颜色,做成了 色表 ,方便使用( 源码 )。

YBNji2e.jpg!web

我觉得,这个色表非常漂亮,符合大多数人的审美,87种颜色也足够用了。

三、配色的经验法则

除了使用色表,有人还提出一种 配色的经验法则 ,也很值得参考。

(1)网页的主题色

深颜色使用 cf69 这四个字符,组合生成 RGB 色值,比如紫罗兰色是 9966ff ,靛蓝是 6666ff ,红色是 ff6666

BFVrymv.jpg!web

vEneIjb.jpg!web

淡颜色使用 abcdef 这六个字符,组合生成 RGB 色值。

Y3U3iqF.jpg!web

(2)文字的颜色

文字最好不要使用全黑,而是使用深蓝色,可以从下面几种颜色挑。 1a2a3a 最深, 2a3a4a 次之, 7a8a9a 最浅。

EVJBr2F.jpg!web

(3)背景色、阴影色、边框色

背景色、阴影色、边框色都属于衬托,建议使用灰色,可以从 aaaaabbbbbbccccccdddddd 这四个色值挑选。

vqUZ7j3.jpg!web

(完)


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK