数据可视化配色指南：三大配色方法，做出咨询报告一样的图表丨附在线工具资源

作者 Michael Yi
伊瓢 编译
量子位 出品 | 公众号 QbitAI

做数据图表的时候，只会用Excel里的系统默认颜色？

别别别，大家都用默认配色，千篇一律，毫无特点。

可是学习色彩设计，又是十分费工夫的一件事，不仅要搞明白RGB、CMYK等各种颜色体系，搞懂各种配色方法，重点是还要看大量的案例，培养良好的审美观，防止自己做出来的东西辣眼睛……

不如我们来“一文学会”系列吧，这篇Michael Yi发在Medium上的文章，就简单清晰的介绍了三种数据可视化中的配色方法，让你的图表看起来清晰、翔实、用户体验友好，就像咨询公司的报告一样专业。

另外，还有不少实用技巧和工具~

三种配色方法

根据数据的不同类型，有三种不同的调色方法。

定性调色板

定性调色板主要用在分类展示的数据图中，比如不同国家、不同企业、不同个体分类展示，每个类目没有固定的顺序。

当然，你必须得给每个类目一种专属的颜色，不然重复了或者颜色太接近就分不清了。

实在不行可以给同一种颜色调整明度和饱和度，比如红色有暗红色、大红色、粉红色，不过，最好是同一种色系之间有某种联系，比如浅色是以日为单位，深色是以周围单位。

或者，用最简单粗暴的方式，把数目太小的那些类目打包起来，命名为“其它”。

顺序调色板

如果你的类目是按照一定顺序排列的，或者就是数字，那么可用顺序调色板，用颜色的深浅表示数据。

比如可以用比较浅的颜色表示比较小的数字，用比较深的颜色表示比较大的数字。

分散调色板

分散调色板更像是两个顺序调色板拼起来一样，只不过区别是颜色较暗淡的放在中间部分，两边各选择明亮的颜色。

这样做的意义在于，中间暗淡的部分可以用作中心值或者参考值，比如用蓝色表示正数，用橙色表示负数，中间的灰色则是0；或者用蓝色表示正面，用橙色表示负面，用灰色表示中立。

重点避坑指南

掌握了方法，还要注意规避一些问题。

不要乱用颜色

如果你需要在许多个类目中强调个别几个，那就在颜色上加以区分。

比如在这张图里，如果你只想强调Cobras和Bulls两个类目，那就不要把所有类目都加上颜色，可以选择把其他设计成灰色，给这两个类目加上颜色。

系列配色保持一致

如果你的整份文件里包含很多图表，那么在不同的图表中，同一个类目最好用同一种颜色。

这样当你的读者从头到尾往下看的时候，不会因为颜色所指代的目标变了而感到懵逼。

颜色，是有意义的

另外，在不同情况下，颜色是有不同意义的，比如我们做一个阿里和腾讯对比的图，那么用橙色指代阿里，蓝色指代腾讯就非常合适了，因为他们本身的logo就是这两个颜色。再比如，公司内部的文件，可以用自己公司的品牌色来作图。

而在不同国家不同文化中，同一个颜色的意义也是不同的，比如大红色，在我国往往给人一种过年的感觉，但在一些西方国家则可能意味着热情，也可能意味着危险。所以，配色的时候考虑一下你的受众。

另外非常重要的一点是：

不要用荧光色！
不要用荧光色！
不要用荧光色！

这些高亮度高饱和度的颜色，只会让你的读者感到亮瞎了。

甚至，在必要的时候用灰色展示非重点数据，也可以将重点数据展示的更清晰。

对色盲友好一点

另外，你总会遇到色盲人群，其中红绿色盲最多，所以，在设置颜色的时候，除了调整色相之外，可以稍微调整一下明度和饱和度，这样他们也可以分得清不同颜色代指的类目。

或者，你可以干脆用色盲模拟器，来看看你的配色能否被色盲人群分辨出来：

https://www.color-blindness.com/coblis-color-blindness-simulator/

配色工具

最后，这里有一些在线配色工具可供选用。

ColorBrewer

这个工具的配色非常经典，几乎就是office里的默认配色。

http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3

Data Color Picker

用于生成两种颜色的渐变，可以自由选择需要多少种颜色过渡。

https://learnui.design/tools/data-color-picker.html

Chroma.js Color Palette Helper

可以制作顺序调色板或者发散调色板，根据不同需要调整调色板的渐变过程。

https://vis4.net/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1

Color Thief

我们知道许多自然情景中的颜色都是让人感到舒服的配色，这款工具就可以帮你把照片中的颜色提取出来。

https://lokeshdhakar.com/projects/color-thief/

Viz Palette

对色盲非常友好的调色工具。

https://projects.susielu.com/viz-palette

传送门

How to Choose Colors for Your Data Visualizations
作者：Michael Yi
https://medium.com/nightingale/how-to-choose-the-colors-for-your-data-visualizations-50b2557fa335

— 完 —

限时报名，0元学习少儿编程

面向7-12岁少儿，最好的数理逻辑思维训练方式，有趣又有用。

量子位 QbitAI · 头条号签约作者

վ'ᴗ' ի 追踪AI技术和产品新动态

喜欢就点「在看」吧 !