美文网首页
转载--普通人的网页配色方案-阮一峰

转载--普通人的网页配色方案-阮一峰

作者: 彩色帆 | 来源:发表于2020-06-02 15:53 被阅读0次

阮一峰 原文链接

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

一、Flat UI 色表

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

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

二、香港地铁色表

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

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

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

有人将这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这四个色值挑选。

(完)

相关文章

  • 转载--普通人的网页配色方案-阮一峰

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

  • CSS Grid 网格布局教程(转载)

    本文仍旧转载于阮一峰老师 一、概述 网格布局(Grid)是最强大的 CSS 布局方案。 它将网页划分成一个个网格,...

  • flex盒模型-语法

    转载:Flex 布局教程:语法篇 --- 阮一峰的网络日志 网页布局(layout)是 CSS 的一个重点应用。 ...

  • 谷歌的代码管理

    谷歌的代码管理 转载自:阮一峰的网络日志 作者:阮一峰

  • DNS原理入门

    转载自阮一峰的博客作者:阮一峰链接:http://www.ruanyifeng.com/blog/2016/06/...

  • Flex 布局教程:语法篇

    作者:阮一峰 日期:2015年7月10日 网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案...

  • 转载 | 阮一峰,加油!

    哎,就在今天,我关注了多年的博客 ruanyifeng.com 无法访问了。 本文讲述了阮一峰在过去 7 年对我的...

  • (转)Flex 布局教程:语法篇

    转载自阮一峰博客 网页布局(layout)是CSS的一个重点应用。 行内元素也可以使用Flex布局。.box{ d...

  • 转载 阮一峰的JWT

    http://www.ruanyifeng.com/blog/2018/07/json_web_token-tut...

  • 进程与线程的一个简单解释

    (一) 转载自 阮一峰 的网络日志 作者: 阮一峰 日期: 2013年4月24日 进程(process)和线程(t...

网友评论

      本文标题:转载--普通人的网页配色方案-阮一峰

      本文链接:https://www.haomeiwen.com/subject/sqguzhtx.html