颜色系(color palette)是什么？一文带你掌握全部用法！

颜色的选择是创建有效图表的主要因素。一组好的颜色将突出您希望数据讲述的故事，糟糕的颜色会隐藏或分散可视化数据的目的。

在本文中，我们将描述数据可视化中使用的调色板(color palette) 类型，提供一些使用颜色时的提示和最佳实践，并重点介绍一些用于图表创建生成和测试调色板的工具。

调色板类型

在可视化颜色选择中，主要存在以下三种调色板：

• 多色系调色板(Qualitative palettes)
• 单色系调色板(Sequential palettes)
• 双色渐变系调色板(Diverging palettes)

在可视化中使用的调色板类型取决于映射到颜色的数据的性质。

多色系调色板(Qualitative palettes)

line-chart-example

当变量本质上是分类变量时，使用多色系调色板。分类变量是那些具有不同标签而没有固有顺序的变量。比如国家或州、种族和性别。变量的每个可能值都从定性调色板中分配一种颜色。

qualitative-palette-example

在多色系调色板中，分配给每个组的颜色需不同。根据经验，可尝试将最大调色板大小限制为十种或更少的颜色。使用比这更多的颜色，可能会遇到区分组的麻烦。如果有比颜色更多的可能值，应该尝试将值捆绑在一起，例如将最小的类别设置为单个其他类别。多次循环颜色是一个坏主意，因为这会导致混淆。

左侧最小的切片不仅会重复调色板中的颜色，而且彼此之间也很难区分

在颜色之间产生独特性的主要方法是通过它们的色调。可以通过调整亮度和饱和度来获得颜色之间的额外变化，但最好不要使差异太大。太大的差异可能表明某些颜色比其他颜色更重要。避免使用具有相同色调但亮度和饱和度不同的两种颜色，除非与这些颜色相关的值是相关的。例如： 您可能有一个折线图，其中浅色线条显示每日读数，深色线条显示每周滚动平均值。

line-plot-rolling-average

单色系调色板(Sequential palettes)

heatmap-example

当分配为着色的变量是数字或具有固定有序值时，则可以使用单色系调色板来描绘它。颜色被分配给连续体中的数据值，通常基于亮度、色调。

sequential-palette-example

单色系调色板最突出的颜色维度是它的亮度(lightness)。通常，较低的值与较亮的颜色相关，较高的值与较深的颜色相关联。这是因为绘图往往是在白色或类似的浅色背景上。在深色背景上，通常会出现相反的情况，即更高的值用更亮、更亮的颜色表示。

单色系调色板*的次要维度是其 色调(hue)。通常,较暖的颜色(朝向红色或黄色)会出现在较亮的一端，而较冷的颜色(朝向绿色、蓝色或紫色)会出现在较暗的一端。

双色渐变系调色板(Diverging palettes)

stacked-bar-example

如果我们的数值变量有一个有意义的中心值，比如零，那么可以应用双色渐变系调色板。双色渐变系调色板本质上是两个连续调色板的组合，其中共享端点位于中心值。大于中心的值分配给中心一侧的颜色，而较小的值分配给另一侧的颜色。

diverging-palette-example

通常，每个组件顺序调色板都使用独特的色调，以便更容易区分相对于中心的正值和负值。与单色系调色板一样，中心值通常被指定为浅色，因此颜色越深表示离中心的距离越大。

离散与连续调色板(Discrete vs. continuous palette)

单色系调色板和双色渐变系调色板可以通过两种不同的方式与数据值相关联：作为一组离散的颜色，每个颜色都与一个数字范围相关联，或者作为数值和颜色之间的连续函数。

discrete-vs-continuous-palette

创建调色板的工具通常遵循第一种类型，而创建可视化的工具通常具有建立连续关联的能力。虽然在值和颜色之间具有连续函数似乎自动更好，但离散化调色板仍然有优点。

数值的离散化可以通过显示数据中的广泛模式来减少认知负荷。此外，我们可以以更好地表示数据的方式为离散调色板设置值范围。如果数据包含离群值，则连续调色板可能会将大部分数据强制转换为更窄的值范围。使用离散调色板意味着我们可以创建大小不等的范围，以更好地表示数据中的差异。

continuous-vs-discrete-choropleth

颜色使用的其他技巧

避免不必要的颜色使用

尽管颜色是数据可视化的重要组成部分，但明智的做法是克制并仅在适当的地方使用颜色。并非创建的每个图表都需要多种颜色。如果只有两个变量要绘制，它们很可能由垂直和水平位置或长度编码。颜色通常只在需要将第三个变量编码到图表中时才会出现，或者它是像饼图这样的专业图表的组成部分。

左边的彩虹条颜色没有意义，应该避免。在右侧，大多数条形为中性灰色，以突出显示两个彩色条形的比较

与图表的颜色保持一致

color-bestpractices-2

如果有一个包含多个图表的仪表板或报表，最好在引用同一组或实体的图表之间匹配颜色。如果颜色在图表之间改变了它们的含义，这会使读者更难理解图表。

利用颜色的意义

有时，可以利用颜色的感知方式来增强可视化效果。如果绘制的组具有固有的颜色约定，例如运动队和政党，分配适当的颜色可以使读者更容易理解可视化。甚至可能想尝试围绕您的品牌颜色创建自定义调色板作为基础。

一般的经验法则是避免过高的色彩饱和度和亮度，以减少眼睛疲劳。与其他元素相比，这也为突出重要元素提供了空间，让它们看起来更大胆。同样不能低估灰色的重要性，将不重要的数据放在背景中，以及其他目的。

考虑色盲人群

大约百分之四的人口有某种色盲，其中大多数是男性。最常见的色盲形式会导致某些红色和绿色色调之间的混淆，但也有一些色盲形式会导致蓝色和黄色色调看起来相同。由于这些原因，最好尝试改变一个维度而不是单独的色调来指示与颜色相关的值，如亮度和饱和度。

colorblindness-sim

颜色使用工具

有许多在线工具可帮助您为数据可视化选择和测试颜色。在这里，我们将重点介绍一些最简单的工具，以帮助您快速了解颜色选择。

• 「ColorBrewer」

ColorBrewer

• 「Data Color Picker」

Data Color Picker 是一种快速且易于使用的工具，用于生成顺序和发散的调色板。默认的“调色板”选项卡最适合用于生成多色调顺序调色板而不是定性调色板，因为端点之间的插值必然会遗漏色轮中的某些色调段。更多信息，可参考：Data Color Picker[1]

• 「Chroma.js Color Palette Helper」

chromajs-color-palette-helper

chroma.js Color Palette Helper 比 Data Color Picker 更复杂一点，它提供了校正亮度的选项、使用贝塞尔插值和稍微困难的颜色值输入。但是，它还允许在为算法设置多个停止点以尝试和适合调色板时提供一些额外的自由。更多信息，可参考：Chroma.js Color Palette Helper[2]

• 「Color Thief」

color-thief

用于生成定性调色板的快速简便的工具并不像顺序调色板和发散调色板那样多。我希望 Hue 和 Colorgorical 都能快速生成随机调色板，但是当您想要自定义值时，使用起来会有些困难。更多信息，可参考：Color Thief[3]

• 「Viz Palette」

viz-palette

Viz Palette是一种更广泛的调色板工具，可用于在组合可视化之前检查调色板。除了能够在示例图的上下文中和在模拟颜色感知缺陷下查看颜色集之外，您还可以立即修改和更改调色板的颜色。更多信息，可参考：viz-palette[4]

总结

本文简要概述了颜色可用于有效数据可视化的方式。应根据映射到颜色的数据类型使用不同类型的调色板：

• 多色系调色板(Qualitative palettes)
• 单色系调色板(Sequential palettes)
• 双色渐变系调色板(Diverging palettes)

确保在使用颜色时有意义且一致。尝试注意色盲以提高情节的可访问性。在向他人展示发现时，请务必仔细考虑您的颜色选择，因为一套好的颜色将使您更容易向观众传达您想要的信息。

原文链接：https://chartio.com/learn/charts/how-to-choose-colors-data-visualization/

翻译：宁俊骐

再小的技能，也应该被认真对待。

参考资料

[1]

Data Color Picker: https://learnui.design/tools/data-color-picker.html。

[2]

Chroma.js Color Palette Helper: https://vis4.net/palettes/。

[3]

Color Thief: https://lokeshdhakar.com/projects/color-thief/。

[4]

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