数据可视化｜如何为您的数据可视化选择更漂亮的颜色（上）

数艺学苑 2020-11-28

1178

在数据可视化设计中，颜色是吸引用户阅读的重要武器之一，千篇一律的系统配色往往不容易吸引用户，也很难给用户带来视觉体验。

虽然如今好的配色方案已经唾手可得，但想为数据可视化找到合适的配色方案，难度仍然不小。因信息图的独特属性，在保证色彩具有清晰辨识度的同时，还必须满足丰富而不凌乱的配色要求。不过即使你对色彩不太敏感，用了今天这篇干货提到的技巧，也能轻松制作出好看的信息图。本文篇幅过长，因此分为上下两篇。

◐

开始之前...

在接下来的内容里，我会经常提到HSB色彩模式的概念，即Hue(色相）、Saturation（饱和度）和Brightness（亮度）。

色相（ H ），在一个 0-360° 的标准色轮上，色相是按照角度确定的，通俗的讲就是色彩的相貌或者图像的颜色，比如红、蓝、绿、黄等，而黑白灰没有色相。

饱和度（ S ），是一个0%到100%之间的百分值，通俗的讲就是色彩的鲜艳程度。原色饱和度最高，随着饱和度降低，色彩变得暗淡直至成为无彩色，即失去色相的色彩。

明度（ B ），是一个从 0% （黑色）到 100%（白色）的一个百分值，通俗的讲就是表示颜色的强度，明度高色彩明亮，明度低色彩暗淡，明度最高得到纯白，最低得到纯黑。

◐

拓展您对颜色的理解

你可能会这样想:“我的图表需要五种颜色。所以我用绿色、黄色、蓝色和红色。再加上……也许橙色?或紫色的!”

如果你从孩提时代起就没怎么想过要涂什么颜色，这个想法是有道理的。所以今天我在这里告诉你:你有更丰富的选择。

例如，观察下面的这张数据可视化图表，并将它和基本颜色进行比较⬤⬤⬤⬤⬤⬤:

它们显然是不同的，这张图使用的红色⬤与典型的红色⬤明显不同，这里的绿色⬤你甚至不能将它称为绿色⬤?

所以，我们无需强加限制我们的规则，您可以使用成千上万的颜色。就红色来说，有偏黄的红色⬤和偏蓝的红色⬤还有介于它们之间的每一种颜色. 而对于灰色⬤, 也有冷灰色⬤和暖灰色⬤的区别。而对于蓝色，世界上有那么多的蓝色！像这个蓝⬤, 这个蓝⬤, 这个蓝⬤, 这个蓝⬤还有这个蓝⬤。

你有太多的选择了，这意味着即使你停留在色轮的一个小区域，仍然有丰富的选择。

◐

不要把色轮上的颜色用尽

在给可视化绘图时，不需要用尽色轮上的所有颜色。事实上，如果只用几种更邻近的颜色，图表看起来会更专业，可信度也会更高。

由此看来，利用色轮给我们的视图选择配色是一个不错的选择。你可以在Adobe Color和Color Calculator等工具上打开操作。

许多色彩工具都会提供各种色彩调和方案，其中有一种“矩形配色”（tetradic)。千万别用！这会导致我们的视图有过多的色调——这是我们应该避免的。

可是，如果我们实在要用矩形配色该怎么办呢？

上图中，用调色工具Paletton做一个矩形配色然后慢慢减小色相间的距离，注意颜色组合开始慢慢变得漂亮起来。

当色相间的距离变得足够近的时候，我们基本上得到了互补色，这是个不错的选择！大量的互补色搭配在一起效果非常好。所以如果我们在配色上有疑问的话，使用互补色和邻接色会比较好。

让我们在Adobe Color上试试：

很明显，这两组颜色在色轮上是相对的，因此，它们是一组互补色。但它们似乎并不好用——两种橘色太相近了，而且每种颜色都太亮了。这时候，我们就需要改变饱和度和明度了。

◐

使用饱和度和明度使你的色相更好用

不管是明度还是饱和度，它们对配色的重要性和色相不相上下。这里有两组色相相同的双色调,只是饱和度和明度不同：⬤⬤ / ⬤⬤。由此看来，只要改变饱和度和亮度，就可以创建出新的颜色。

让我们回到上面的颜色组合：⬤⬤⬤⬤，在调整了饱和度和明度之后，它变成了这样：

在这里，我们提高了亮蓝⬤和亮橙⬤的饱和度使得除了亮橙以外的颜色都变深。现在，这组颜色就能用了！

所以，如果你的颜色搭配还不好看，不要马上添加另一种颜色。先试试改变饱和度和亮度，看看效果是否更好。

◐

使用暖色和蓝色

有一种互补的颜色组合特别受到数据可视化设计师的喜爱:黄色/橙色/红色和蓝色。

当你去浏览像《南华早报》和《经济学人》这样的数据新闻媒体的作品，你会注意到他们使用这些颜色的频率远远超过使用紫色或绿色的频率。

这是因为暖色和蓝色是非常通用的。黄色和橙色放在一起让人赏心悦目，同时人们也能将它们轻松地区分开来：⬤⬤⬤——这正是我们想要的效果。而蓝色比其他色调都要灵活：大量的蓝色，无论是深的或是浅的，饱和的或是不饱和的，看起来都非常舒服、平和且专业。

同时，它们更容易被人接受，对于色盲来说，蓝色和红/橙色更容易区分。

所以，当我们在配色上没有思路时，可以用橙色/红色和蓝色的组合。许多经典的动画作品也是这么做的：

◐

使用绿色时，掺成偏黄或者偏蓝的绿色

森林绿覆盖了一个色轮的 1/6 ：以色轮的120°⬤为顶峰，从 90°⬤到 150 ° ⬤的范围。然而，你很少会见到以绿色为主色调的优秀的数据可视化作品。为什么会这样呢？

首先，森林绿颜色太深了，而如果把森林绿颜色调亮的的话，会变成尴尬而廉价的绿色⬤。因此，选用森林绿时，需要更大幅度地调节饱和度和亮度，才能得到得体的颜色。《华盛顿邮报》就是这样使用他们的绿色⬤的：

这个绿色是142°的绿色，但只有14%的饱和。这与上面调亮了森林绿⬤（100%饱和度）具有相同的色相和明度。

另外，别忘了我们的色盲朋友们:纯绿色与红色、橙色或棕色结合在一起，会让他们很难区分。所以当使用绿色时，把它调成有点黄色或有点蓝色的绿。您可以通过本文封面的示例中看到这一点：

除了第一幅图有一个森林绿⬤之外，其他都是超过了 160° 色相的绿色（更蓝）⬤⬤⬤，或者比 60° 还要低的绿色（更黄）⬤⬤。而在第二幅图中，绿色的选择兼用了黄绿与蓝绿：

其实你也可以像上图操作的那样，把几种不同的绿色应用到你的可视化图表中。

◐

避免使用纯色

“纯”色是指恰好位于色轮中60度、120度、180度、240度、300度或360度/0度的色调:

举例来说：在HSB中，亮蓝色⬤的色调值是180°,饱和值是67%,明度值是91%。它在RGB中的表示为rgb(77, 232, 232)
。

为了让你的颜色看起来更自然，让你的读者看起来更舒适，你可以调低纯色的饱和度或者让它们更暗。如果你想拥有明亮、饱和的颜色，要依靠混合色，至少要远离纯色5-10度。

在上面的图片中，红色和橙色，蓝色和绿色有相同的饱和度和亮度。唯一的区别是色相:红色⬤(0°),蓝色⬤(240°)和绿色 ⬤(120°)看起来比橙色⬤(40°),中等蓝色⬤(211°),蓝绿色⬤(170°)更丰富。

优秀的可视化配色给用户良好的视觉体验，也更利于用户对可视化图表的识别和理解。除了上面的配色技巧之外，还有许多需要注意的技巧，我们会在下次介绍。

本文作者：

指导教师：

长按二维码关注我们喔~

长按二维码关注沈浩老师喔~

原文链接：https://blog.datawrapper.de/beautifulcolors

文章转载自数艺学苑，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

评论