如何为数据可视化选择更漂亮的颜色

为你的图表选择好的颜色是很困难的。这篇文章试图让它变得更容易。

我想让您在颜色选择上更有信心。如果你对颜色一点感觉都没有，我还是试着帮你找到好的颜色。我们将讨论我在野外看到的常见颜色错误，以及如何避免它们。

如果你想找到好的渐变或阴影，这篇文章不适合你。但是，如果您需要为您的折线图、饼图、堆叠条形图等找到不同类别(例如，大陆、行业、鸟类)的美丽、独特的颜色，请继续阅读。

我会多次提到饱和度、亮度和色调。HSB(色调、饱和度、亮度)或HSV(色调、饱和度、值)颜色空间可以很好地检查它们：

色调范围从0°到360°…。这就是典型的色轮：⬤⬤⬤。

要将您的颜色从十六进制(例如#CC0000)或RGB(例如RGB(207,176，58))转换为HSB/HSV，请使用诸如Colorizer.org之类的工具。

与HSB/HSV相关的是HCL颜色空间。它使用相同的参数(色调、色度=饱和度、亮度)，但更接近“我们真正看到颜色的方式”。Datawrapper将HCL颜色空间用于其拾色器：

但是由于您在Adobe Photoshop或Colorizer.org中找不到HCL，所以每次我提到度(如0°)或百分比时，我都会谈论HSB/HSV颜色空间。

你可能会这样想：“我的图表需要五种颜色。所以我用绿色和黄色，蓝色和红色。和…。UM…。要不要橙色的？还是紫色的！“。

如果你从小就没有想过太多关于颜色的事情，那么这个想法是有道理的。所以今天我要告诉你们的是：它们有更多的颜色。

请查看此图，并将它们与基本颜色⬤进行比较：

他们是不同的。Nadieh使用的红色⬤与典型的红色⬤不同。绿色的⬤是…。你能称它为绿色⬤吗？

因此，在我们强加限制我们的规则之前，让我稍微吓一跳：你可以使用的颜色有数千种。有黄红色的⬤和蓝红色的⬤，以及介于两者之间的一切。有灰色的⬤，但也有冷灰色的⬤，还有暖灰色的⬤。然后是蓝色。好蓝啊！像这个⬤，这个⬤和这个⬤。我们甚至还没有讨论过橙色和黄色。

你有很多选择。这意味着您可以停留在色轮的一小块区域内，并且仍然有很多选择。这意味着：

没有必要依赖像⬤这样的色轮周围的所有色调来进行可视化。当它只使用几个色调和他们的邻居时，它看起来会更专业，因此更值得信赖。

这是一个实际查看色轮的好主意。您可以使用Adobe颜色或颜色计算器来执行此操作。

很多这样的工具可以让你选择不同的和声。其中一个叫“正方形”或“四边形”。别用它。这会导致太多的色彩-我们的使命是避免这种情况。

在上面的视频中，我使用调色板工具从四次和声开始，然后减小距离。注意颜色组合变得多么漂亮。

如果距离变得足够小，基本上就是在使用补色。这是个很棒的选择！很多互补色搭配在一起效果很棒。如果有疑问，请使用补色和它们的邻色。

我们的颜色在色轮上是相对的，所以它们显然是互补的。耶！但它们也无法使用：这两个橙子太相似了。所有的东西看起来都是那么的…。聪明。

饱和度和亮度与色调一样重要。事实上，只要更改饱和度和亮度，就可以创建新的颜色。这里有两个色调相同的颜色对，只是饱和度和亮度不同：⬤⬤/⬤⬤。(如果您只需稍微更改一下色调，就会获得更好的效果：⬤⬤/⬤⬤。)。

让我们回到我们的颜色组合：⬤⬤⬤⬤。在玩弄了饱和度和黑暗之后，它变成了这样：

我对浅蓝色的⬤和浅橙色的⬤进行了去饱和度处理，除浅橙色外，其他颜色都变深了。见鬼是的，我们可以用它来工作！

因此，如果你的颜色组合看起来还不是很棒，不要立即添加另一个色调。先改变饱和度和亮度，看看是否更好。

这就是我对所有这些调色板所做的：⬤⬤⬤⬤、⬤和⬤⬤⬤⬤。它们都是大致互补的，它们都有不同的饱和度和亮度。这就是他们工作的原因。

有一种数据可视化设计者特别喜欢的补色组合：黄色/橙色/红色和蓝色。翻阅一下“南华早报”或“经济学人”(PDF)的图片集，你会注意到他们使用这些颜色的频率远远超过紫色或绿色等颜色的使用频率，这两种颜色分别来自“南华早报”(South China Morning Post)和“经济学人”(The Economist)。

这是因为这些暖色和蓝色对于分类来说是超级多才多艺的。黄色、橙色和红色在一起看起来非常令人愉悦，但人们仍然会认为它们是不同的颜色：⬤⬤⬤-这正是我们想要的绝对颜色。而且蓝色比任何其他色调都更灵活：许多蓝色，无论是深色⬤还是浅色⬤或饱和⬤或不饱和⬤，看起来都令人愉悦、平静和专业。

而且它们是容易接近的：色盲人士可以很容易地将蓝色和橙色/红色区分开来。

森林绿色覆盖了色轮上的整整六分之一，从大约90°⬤到150°⬤，其中120°是其峰值⬤。但是，您会发现使用它的设计良好的可视化效果很少。为什么会这样呢？

首先，森林绿色是非常暗的。而点亮森林绿色意味着进入一个尴尬的霓虹灯⬤。因此，你需要大大减轻和降低绿色的饱和度-比其他颜色更多-才能得到一个好的颜色。这正是“华盛顿邮报”在这里用他们的绿色⬤做的事情：

它是142°果岭，但只有14%饱和。下面是同样的色调，同样的亮度，看起来是100%饱和的：⬤。哎呀。

记住我们的色盲朋友：纯绿色与红色、橙色或棕色的组合对他们来说是很难区分的。

“但我以前见过如此疯狂的颜色，它们看起来很不错，”你可能会说，指的是像这样的项目：

如果你将这些例子中的颜色与⬤⬤⬤⬤这样的颜色进行比较，你会发现以前的颜色都不那么饱和或更暗。一个100%饱和、100%亮绿色的⬤在“纽约时报”的⬤上会变得不那么饱和，在彭博社的文章⬤和布丁文章⬤中也会变得不那么饱和和更暗。

它们具有和霓虹灯颜色一样的乐趣和吸引眼球的效果，同时对眼睛更容易。

这或多或少奏效了，因为布丁、纽约时报和彭博社的员工都是伟大的设计师。如果有疑问，避免100%饱和度和100%亮度相结合。

我有时会看到图表-特别是面积图-在这些图表中，相邻的元素具有相同的亮度。您可以很容易地检查这一点：只需将您的颜色转换为黑白(例如，使用外部色盲模拟器或我们的Datawrapper色盲检查)。如果它们都有相同的灰色，那么它们的亮度也是相同的。

例如，最左边图表中的⬤⬤⬤看起来像灰度级的⬤⬤⬤。

“黑白相间”：改变每个区域的暗度，使一些更亮，一些更暗，比如：⬤⬤⬤。它们在灰度中看起来是这样的：⬤⬤⬤。

我强烈推荐第一种选择(如果你喜欢款式，你仍然可以在它周围加一个白色边框)：颜色会看起来更有活力，色盲的人会感谢你的。事实上，每个人都会感谢你，不管他们的识色能力如何。

事实上，为分类数据选取颜色的有效方法是从渐变中选取颜色，如下所示：

所有这些渐变都可以从浅到暗平滑移动，因此您从中选取的颜色都将具有不同的亮度：⬤或⬤。如果您是此方法的粉丝，请尝试此调色板生成器。

在您的可视化中，您通常希望颜色突出。有不同的方法可以实现这一点。颜色很突出：

但你通常只需要一两种颜色就行了。你的大多数颜色都应该或多或少地吸引眼球。

如果你使用的是不同亮度的颜色(“黑白相间”)，你需要平衡它们。试着降低鲜艳颜色的饱和度。在深色中加入更多的饱和度。

或者选择不太纯净的色调：在上图中，绿色的⬤和蓝色的⬤非常纯净，所以我把它们调暗了(这就是它们在100%亮度下的样子：⬤⬤)。

然后我想带一辆红色的…。但亮红色作为纯色调(0°)⬤⬤⬤会太强烈。所以我有两个选择：

将色调(仅色调)移动到30°，使其更呈橙色⬤⬤⬤。

我选择了第二个选项，让它看起来更友好一些。但这两种选择都有效。

在明亮的背景上，有数量惊人的图表使用非常柔和的颜色。它们通常不是很饱和，而且非常轻。

这就带来了问题：如果你使用线条和圆点等小区域，读者可能很难区分浅色和不饱和的颜色。但是，即使易读性不是问题-例如对于更大的区域-例如，你的可视化应该与背景有足够的视觉对比，以便自信地沟通：“嘿，我在这里，我有话要说。”

以下是当您的颜色太不饱和时该怎么做&；light⬤⬤⬤：

当然，这也是品味问题。但是如果你不确定你的颜色是不是太柔和了，只要试着让它们更饱和和更暗就行了。试试看感觉怎么样。如果感觉不错，就留着吧。

反之亦然：当你使用明亮的背景时，不要把你的颜色调得太暗和太饱和。如果有疑问，可以试一试。把你的颜色调得浅一些，从中拉出一些饱和度，看看感觉如何。

一旦你对颜色更有信心，五颜六色的背景看起来是个不错的主意。但它们有两大缺点：第一，它们很容易分散对数据的注意力。其次，它们极大地限制了您潜在的调色板，因此很难使用。事实上，你的背景越饱和，就越难-所以不饱和的颜色是你最好的选择。以下是HSB/HSV颜色空间的一些经验法则：

如果你想要浅色的背景，远离低于95%明度和高于7%饱和度的颜色。

如果你想要一个深色的背景，保持在20%的饱和度以下。此外，不要全黑-要保持你的亮度在10%到25%之间。

挑选好的颜色是很难的。用不好的颜色，一直用不好的颜色，只复制颜色是完全没问题的。说真的，偷东西没什么丢人的。我写了一整篇关于从哪里获得色彩灵感的文章：从电影、艺术家、别人创造的调色板等等。(请允许我补充一句：其他数据可视化是一个很好的来源。)。

如果你想更直观地了解哪些颜色适合搭配，试试这个：分析它们。实现这一目标的一些方法包括：

选择一张你认为漂亮的颜色的图片，比如一件艺术品或一张自然照片。然后使用吸管工具从中挑选颜色，例如使用Photoshop或image-Color.com。试着在你的下一个图表中使用它们。

安装Adobe Capture，这与Adobe Capture的想法相同，只是用于“实时图像”：它允许您从您的环境中捕获颜色。(看到我们周围有那么多不饱和的颜色，这真是令人着迷！)。

玩“手动拾色器”：查看您的屏幕。你看到了哪些颜色？那里有多暗，有多饱和？哪些色调靠近；哪种色调与色轮相对？

从漂亮的数据可视化中挑选颜色。换几种颜色。他们现在还能很好地合作吗？

另外，下次创建数据可视化时，如果您对自己的颜色不满意，可以在HSV/HSB颜色空间中分析它们，例如使用Colorizer.org：

它们的饱和度有多高？如果你增加或减少几个(或很多)百分点的饱和度，它们看起来会更好吗？

它们的色调值是多少？如果你只把色调改变几度，会发生什么？

随着时间的推移，你的理解会从“那很美，但我不知道为什么”变成“那很美，因为…”。你会发现，你可以打破我在这里解释的越来越多的这些规则-仍然可以创造出很棒的颜色组合。

我希望这篇文章能对你有所帮助！如果你想继续阅读：这个博客上有相当多关于颜色的文章，例如关于性别的颜色，关于政党的颜色，色盲(第1，2，3部分)，以及在可视化中使用颜色时一般要考虑的问题。如果本文遗漏了什么绝妙的技巧，请通过[email protected]或在下面的评论中告诉我。

如果您想获得关于我们博客上除周线图以外的所有新内容的通知，请注册。我们平均每两周发出一次这份时事通讯。