图表配色

配色指南

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

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

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

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

配色方案

为了方便特定场景下的图表样式,我们归纳了一下几个配色方案建议以供参考。

  • 颜色对比型:推荐图表颜色之间对比较为明显的场景下使用;
  • 冷色:推荐图表偏冷色系的情况使用;
  • 暖色:推荐图表偏暖色系的情况使用。

配色示例

多色使用

柱状图示例:

线性图示例:

透明度使用

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

渐变色使用

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

背景色使用

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

深色系

  • 优点:更好的凸显主体,建立良好的视觉层次,反应图表内容,视觉吸引力强;
  • 缺点:可读性低、对配色水平要求较高;

浅色系

  • 优点:适用性广,可读性高;
  • 缺点:图表内容不易聚焦;

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