技巧｜如何为数据可视化找到合适的配色？

本文翻译自Samantha Zhang-《Finding the Right Color Palettes for Data Visualizations》。来源：GRAPHIQ

虽然现在大家已经可以很容易的找到一些非常不错的配色，但是为数据可视化进行配色仍然是个很有挑战性的事情。

01

现存问题

在深入研究并创建自己的配色方案之前，我们不如对网络上现有的配色进行一些研究。令人惊讶的是，这些配色只有很少一部分是为图表和可视化而设计。

我们总结了几条不能使用现有配色的原因：

问题1：不够友好

我们看到的许多配色方案并不是为数据可视化而设计。它们不仅明度变化不够大，而且通常这些配色在设计时并没有考虑到色盲人群。

平面UI颜色是最被广泛使用的配色方案之一，原因显而易见：颜值高。但是，顾名思义，它是为用户界面而设计的。色盲患者可能会很难辨认使用平面UI配色的数据可视化报告。

（纯色，泛色和灰度模式下的平面UI颜色。）

问题2：颜色数量不够

另一个问题是，许多现有的配色方案没有提供足够的颜色。在构建Graphiq可视化时，我们需要一个至少提供六种颜色的配色方案，有时甚至需要八到十二种颜色，以涵盖我们所有的用例。 但是我们找到的大多数配色方案都没有提供足够的颜色。

以下是Color Hunt的一些示例：

尽管这些都是不错的配色方案，但它们的灵活性不足以显示复杂的数据。

问题3：难以区分

有人会提出这样的疑问：使用类似于渐变的配色-理论上可以从中选取任意数量的颜色，不是吗？

不幸的是，渐变配色的明度变化往往不够明显，其中许多颜色会像下图Color Hunt中的配色一样很容易就变得难以区分。

让我们试着把上图第一组配色扩展到10个颜色:

如果普通用户能正确区分可视化中的颜色并匹配图例中的标签，尤其是左侧的四个绿色，那我只能说：厉害了。

02

我们的方法

在Graphiq中，我们投入了大量时间去寻找适合我们视觉效果的多颜色配色方案。在这个过程中我们学到了很多，我们想分享我们发现的生成灵活配色方案的3条规则:

规则1:色调和明度的范围要广

为了确保配色方案用户友好且易于区分，它们的明度变化必须要大。明度差异普遍存在。选取任何单色系的配色，并测试其在红色盲，绿色盲和灰度模式下的表现。您很快就能知道此配色方案的辨识度如何。

（Google Material的浅蓝色具有全彩，红色盲模式和灰度模式）

然而，仅有明度变化的配色可能还不够。配色方案的变化越大，用户将数据系列映射到可视化效果就越容易。如果我们能为非色盲用户利用色调的变化，会让他们的用户体验更上一层楼。

对于明度和色调，你能找到的范围越广，你能支持的数据系列就越多。

规则2：遵循自然的色彩模式

设计师们知晓一个左脑思维者并不容易察觉到的秘密：并非所有颜色都能被平等的使用。

从纯粹的数学观点来看，从浅紫色到深黄色过渡的颜色渐变应大致类似于从浅黄色到深紫色的过渡。但是，正如我们在下图看到的那样，前者感觉很自然，而后者感觉并不那么自然。

这是因为我们受到自然界中经常出现的渐变现象的限制。在绚丽的日落中，我们看到了明亮的黄色转变为深紫色，但是在地球上确实没有地方可以看到浅紫色转变为深棕黄色。

（Kyle Pearce，Wesley Fryer和Jon Sullivan的摄影作品）

诸如此类的自然颜色渐变还有：浅绿色到紫蓝色，浅黄色到深绿色，橘黄色到冷灰色，等等。

（Kbh3rd，Ian Britton和Jon Sullivan的摄影作品）

因为我们在生活中已经习惯了这些自然渐变，所以当我们看到可视化中使用相应的配色方案时，会感到熟悉和愉悦。

规则3:使用渐变代替一些固定选用的颜色

融合了不同色调的渐变色配色方案可兼得两全。无论您需要2种颜色还是10种颜色，都可以从这些渐变中提取颜色，以产生自然的视觉效果，同时在色相和明度方面也要有足够的变化。

切换到渐变思维方式并不是一件容易的事，有这样一个办法：在Photoshop中为每个数据系列配色的断点设置辅助线，不断测试渐变的同时进行调整。下图是我们用来完善渐变效果的过程的截屏：

如您所见，我们将配色置于灰度渐变模式的下方，以便调整渐变叠加（以及获得确切的渐变色值），然后从这些断点中选择颜色，并测试配色在实际运用中的工作效果。

03

我们的配色方案

以下是一些使用中的配色方案，它们全部以纯白色开始，以纯黑色结束，以实现最大的明度变化。

（冷色，暖色和霓虹色）

配色方案在实际中的应用

虽然有越来越多好的配色方案，但并不是所有的配色都适用于图表和数据可视化。我们为可视化配色的方法是制作在色调和亮度上都不同的自然渐变。通过这样做，我们的配色对色盲人士友好，对其他人来说也很容易辨别，并且可以处理从1到12个数据系列的任何地方。