飞雪团队

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 10761|回复: 0

普通人的网页配色方案

[复制链接]

4137

主题

4225

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
14711
发表于 2021-1-24 10:53:19 | 显示全部楼层 |阅读模式
网页需要配色。一种好看、易用、符合心意的配色,是很不容易的,尤其在没有设计师时。
                                                                                                                一、Flat UI 色表

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

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

二、香港地铁色表

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

金钟是蓝色,北角是橙色。
4ddafce74894c37f9a58743ffea7c293.jpg

1951f78149b14f0634419eac19c3d91d.jpg

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

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

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

除了使用色表,有人还提出一种配色的经验法则,也很值得参考。
(1)网页的主题色
深颜色使用c、f、6、9这四个字符,组合生成 RGB 色值,比如紫罗兰色是9966ff,靛蓝是6666ff,红色是ff6666。
ed6544298cbba867e45fa01f377e64f9.jpg

50bc3e8389846ce45d8aee17d571c570.jpg

淡颜色使用a、b、c、d、e、f这六个字符,组合生成 RGB 色值。
5345cb6a2b149262f82601ddc65ebe63.jpg

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

(3)背景色、阴影色、边框色
背景色、阴影色、边框色都属于衬托,建议使用灰色,可以从aaaaa、bbbbbb、cccccc、dddddd这四个色值挑选。
c63c2aba52376a7a1a79b0c0faec90a4.jpg

(完)
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|飞雪团队

GMT+8, 2024-5-5 09:04 , Processed in 0.068626 second(s), 24 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表