图表配色技巧

1.1 应用场景 

俗话说万事开头难，但我想说的是万事不光开头难，中间也难，而且怎么收也是最难的。就像我们图表开发，往往开头图表的构思很重要，但当构思完，准备一蹴而就时，你会发现你收尾用的时间比你想象多的多。这根本原因也是人的天性所致，人们总想把事情做的漂亮点，就会在完成的基础上将图表细节改改，颜色调调，不知不觉占据了很多时间。 

一般时间的投入往往会换来效益的提升，但有时却难以见效。就像我最开始做报表时，也经常被老板说花里胡哨，还没什么美感，虽然现在也这样。为了方便配色，所以在这列举一些图表常用配色和一些配色误区，希望给大家带来一些帮助。

更多详情可参见 可视化指南 中「可视化设计流程>视觉设计>配色」目录下相关文档。

1.2 常见配色误区 

a、颜色色值相差太大，比较刺眼

b、图表颜色搭配充斥着非主流

c、文体颜色偏淡，看起来累人

注：好看的图表应该以自然，不刺眼为主，给人以舒适的感觉， 过多闪亮的颜色会给领导晃眼的感觉，特别是给上级的图表，更要做到这点。

2.1 表格常见搭配 

在此列举四个常用的表格搭配 

a、方案1（科技感1）：

页面背景：34405A（52,64,90）
字体样式：微软雅黑
标题背景：36507E（54,80,126）
标题字体：FFFFFF（255,255,255）
背景1：222C44（34,44,68）
字体1：FFFFFF（255,255,255）
背景2：222C44（34,44,68）
字体2：FFFFFF（255,255,255）
背景3：263856（245,245,245）
字体3：FFFFFF（255,255,255）
边框：无

b、方案2（科技感2）：

页面背景：364662（54,70,98）
字体样式：微软雅黑
背景1：587AB3（88,122,179）
字体1：FFFFFF（255,255,255）
背景2：587AB3（88,122,179）
字体2：FFFFFF（255,255,255）
背景3：445E89（68,94,137）
字体3：9DB5DB（157,181,219）
背景4：3C5276（60,82,118）
字体4：9DB5DB（157,181,219）
边框：无

c、方案3（淡蓝+淡绿）：
页面背景：F7FAFD（247,250,253）
字体样式：微软雅黑
标题背景：无
标题字体：026392（2,99,146）
背景1：C6DAF2（198,218,242）
字体1：3E4A5B（62,74,91）
背景2：EAF6F6（234,246,246）
字体2：3E4A5B（62,74,91）
背景3：F5F8FD（245,248,253）
字体3：3E4A5B（62,74,91）
边框：FFFFFF（255,255,255）

d、方案4（淡蓝+淡紫）：
页面背景：F7FAFD（247,250,253）
字体样式：微软雅黑
标题背景：无
标题字体：026392（2,99,146）
背景1：ABB4FF（171,180,255）
字体1：FFFFFF（255,255,255）
背景2：B7CEF9（183,206,249）
字体2：3E4A5B（62,74,91）
背景3：F5F5F5（245,245,245）
字体4：3E4A5B（62,74,91）
边框：FFFFFF（255,255,255）

2.2 表格搭配注意点

• 标题应该显眼，以让读者了解到表格表达的是啥。 可以选择色度深点的颜色 如深蓝，深绿，白色等，字体也可以较正文大一号，以进一步突出。

• 字体选择一般 我搭配微软雅黑或者黑体，适当加粗效果也不错。
  

• 数据对齐，一般正文居中对齐较多，金额可以适用右对齐。整体看起来比较美观。

• 如想增加美观效果和可读性，可以在文字中添加小图标，如 TOP1-3 的皇冠等等。

3.1 图表常见搭配 

3.1.1 图表常规配色科普

标准色: 通过整体颜色规范提取和增加，提炼出 6 个标准色，颜色使用较少时，首选标准色。

分别为：#60acfc 100% 、#32d3eb 100% 、#5bc49f 100% 、#feb64d 100% 、#ff7c7c 100% 、#9287e7 100%

基准色: 通过标准色扩展出 24个基准色，相互链接组成基准色环，如果图表用色数量较多，标准色无法满足颜色要求，可以从基准色中进行拓展与标准色近似的色值。

扩展色: 基础色相可以通过叠加 20% 白或者 10% 黑来扩展出不同明度的颜色，应用于颜色更加丰富的使用场景。

3.1.2 配色方案

• 颜色对比型：推荐图表颜色之间对比较为明显的场景下使用；

• 冷色：推荐图表偏冷色系的情况使用；

• 暖色：推荐图表偏暖色系的情况使用。

配色示例：

3.1.3 透明度使用

在线性面积图表中，也要重视透明度这个因素。通常使用透明度时，图表会有很多堆叠层次，我们需要做到使每一个前景层都能够在背景层之上良好地显示，并且不产生相互干扰。此时建议数据之间选择不同色相，面积区域使用 10% 不透明的标准色，建议数据叠加数量不超过4个，超过 4 个不建议使用线下面积图表；

3.1.4 渐变色使用

有些情况下图表可以使用渐变色填充图表来表现特定场景，此时注意颜色选取为同一色系，渐变层级不宜过大，整体颜色需要与平台保持协调一致。

3.1.5 背景色使用

图表背景颜色必须要很好的衬托图表主体，又不产生喧宾夺主的效果。目前常见的背景色有深色系和浅色系两种。

深色系

• 优点：更好的凸显主体，建立良好的视觉层次，反应图表内容，视觉吸引力强；

• 缺点：可读性低、对配色水平要求较高；

浅色系

• 优点：适用性广，可读性高；

• 缺点：图表内容不易聚焦；

背景色建议：#ffffff #f7f7f7 #333333

3.1.6 按模板主题的配色推荐

一般根据制作的模板主题可以定下大致的图表配色，不同的主题给人的感觉是不一样的，这里提供几个常见行业的配色推荐。

【银行金融】
金融听起来就给人一种很高端，商务的感觉，需要选用一些低饱和度的图表配色。

【保险】
保险行业数据图表一般浅色为主，给人一种舒适安心的感觉，选用高亮度的图表颜色可以产生安全放心的感觉。

【互联网/制造业】
互联网数据大多想表达一种科技感、未来感，常使用深色背景，图表则常用蓝紫色或青绿色为主色调。

更多配色方案可参见：如何选择配色方案，浅色还是深色？

3.1.7 按图表类型的配色推荐

• 饼图配色：
  

饼图由于其表达的信息有限，通常采用单色系配色，通过同一颜色的深浅明暗来表达数据的大小，示例如下：

• 柱形图配色：
  

柱形图配色可以基于主题，并在其基础上做区分，每个分类推荐用鲜明点的颜色，用以做为区分，示例如下：

• 折线图配色：

  折线图绝非一个线条这么简单，华丽的、沉稳的、活泼的、动态的等等，线条的美化其实大有学问。折线图在分类不多的情况下可以参照淡色系配色，分类多的情况下则采用鲜明点的配色，但不易选取太刺眼的颜色，避免晃眼。示例如下：
  

• 散点图配色：
  

散点图的存在是为了做类和类的区分，这边不推荐单系列色，因为散点图点数众多，单系列色区分不是很明显，所以这边推荐一些对比度大的颜色进行填充。当然撞色方案是不推荐的。示例如下：

• 发散框架图配色：

发散框架图又称传播图，他可以用来表示信息的传递和发散关系，因此层和层之间色值需要比较明显，一般选择一些比较鲜明的颜色，示例如下：

• 地图配色：

地图配色和主题比较有关，像深色主题则地图配色和旋深蓝色系和黑色系比较偏商务，至于浅色主题则可以选择素雅的地图搭配。而且地图板块的色系可以选的比较相近，如华北区一个大色系，华南区一个大色系。示例如下：

3.2 图表颜色搭配注意点

• 注意点1：颜色撞色 不推荐 黄+白，蓝+黑，红+蓝，黄+紫

• 注意点2：色系时间轴：浅色系偏向未来，深色系偏向过去，彩度强弱可以作为颜色能量大小，彩度高（如增强彩度同色系颜色）的颜色能力强，彩度低（如增加灰度）的颜色能力弱。可以根据表达主题进行颜色选取和调整。

• 注意点3：背景色，每个图表都应首先决定基调色（背景色），其影响整个作品的行销，当背景选取比较亮的颜色时，会抑制中间图形的形象，当背景降低明度和彩度时，会增加图形的冲击力，如你想让老板着重看的图形。

• 注意点4：着重色，这注重于印象颜色，比如一想起可口可乐，我们就会想到红色，重点色在于同一色系颜色的堆砌，你想让图表着重为暖色调，给人一种温暖的感觉时则可以用一系列暖色调进行堆叠，以增强图形在读者脑海中的印象。

注1：地图的配色是由图例的颜色决定，而非系列的颜色。

注2：系列的颜色会按照图例顺序依次取，比如配色方案为蓝，绿，浅绿，亮绿，橙，黄 那么对应图表显示颜色就会按照图例依次选取配色方案的颜色进行图表颜色填充。

• 技巧1：避免高彩度的颜色作为基调色，因为太强烈的色彩对比会让老板陷入视觉疲劳（如亮红色，黑色）。不妨降低背景彩度可以让图表显得更生动

• 技巧2：图表标题色系搭配时以清晰舒适为主，让背景和文字适当保留明度差和彩度差，可以让标题更具可读性，一般色味离的远的配色，文字形象较为清晰，到那时离的太远也不好，会让人看起来吃力，故色味远近需要自己把握。

• 技巧3：配一本配色手册，偶尔翻翻，学习下一些图表的经典配色，可作为参考。

• Material Palette：https://www.materialpalette.com

• Flat UI Colors：    http://flatuicolors.com/

• Coolors：             http://coolors.co/

• Brand Colors：     http://brandcolors.net/

• 中国风配色：         http://zhongguose.com

• uiGradients：       http://uigradients.com