Matrix 首页推荐
Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。
文章代表作者个人观点，少数派仅对标题和排版略作修改。
你是否也在作图时也遇到过以下情况：
于是心想，与其自己挣扎，不如找点参考。平面设计的配色网站那么多，从中找几个好看的颜色还不是分分钟的事？然而事情似乎也没这么简单。
从网站上找来一组颜色，试了试第一眼还不错。可网站上的颜色都是四个一组，数据多了不够用，东拼西凑起来图还是不好看。而且网站给的颜色经常比较接近，混在一起图的辨识度有所降低，看起来乱糟糟的，什么信息也没有。
这是因为平面设计中的一些颜色方案，虽然和数据可视化有共通之处，但是可视化的颜色还有些特殊的要求。为此，我总结了一些进行可视化绘图时选择颜色的注意事项，整理了一些工具和色彩合集，以供参考选择。
TL;DR：本文包含以下部分，可以按需阅读：
这部分介绍了人感知色彩的原理，同时介绍了两种色彩模型，及我们为什么会用到不同色彩模型。如果觉得这部分过于枯燥，可以直接跳到下一部分，看看如何根据数据类型选择合适的颜色。
我们能看到五彩斑斓的颜色，主要与人眼的生理特性有关：视杆细胞和视锥细胞在其中各司其职。视杆细胞主要负责感受光的明暗，视锥细胞负责感受不同波长的光。大多数人有三种不同类型的视锥细胞，它们对不同波长的光敏感度不同，按敏感度的峰值分为红色、绿色和蓝色。当某些视锥细胞缺失或敏感度发生变化，将导致色觉异常。
RGB 模型绝对称得上是数字时代最为常见的色彩模型，它将红色（R）、绿色（G）、蓝色（B）三种颜色的光，按照不同比例混合，得到各种不同的颜色。RGB 模型如此流行，一方面是因为它符合人眼对色彩的感知过程（对应三种视锥细胞），另一方面，屏幕上的每个像素也都是由红绿蓝三个次级像素组成，直接以此方式编码， 极大地方便了在屏幕上进行显示。
虽然 RGB 模型符合人感知的生理过程，但它并不符合人对颜色的直观感受。我们看到某个颜色时，不会把它拆分成红绿蓝三个组分，而是直接感知三种视锥细胞叠加后的效果。因此，后来又出现了称为 HSV 的色彩模型（也称 HSB）。
在软件中使用色轮选择颜色时，你也许遇到过这个模型，它将所有颜色置入了一个倒置的圆锥形空间中，采用三个维度的数值描述颜色：
HSV 相比 RGB 直观在哪里？举个例子，下图中的两个颜色，是不是第一感觉右边比左边的更暗。在基于 HSV 模型调整颜色时，只需要将左边的颜色降低亮度，就可以得到右边的颜色。但要是通过 RGB 来调整，需要同时调整红绿蓝三种颜色各自的含量，一不注意颜色就跑偏了。
要理解不同颜色与色彩模型的关系，一个很好的例子是不同地图投影下的航班路径图。我们将色彩模型视为地图投影方式，把两个颜色当做航班的出发点和终点。根据选择地图类型（色彩空间）的不同，同样的飞行路径（颜色变化过程）可能看起来大不一样。
因此，不同的色彩模型有助于我们以不同的方式理解颜色，选择恰当的色彩模型也能让得到理想颜色的过程变得更为简单直观。
橘子、葡萄、山楂，就像这些水果没有好坏的分别，类别型的数据没有直接的顺序关系。因此，在展示类别型数据时，需要使用没有顺序关系的颜色进行区分。诸如不同实验材料，或是不同的国家，这样的数据都属于类别数据，要用类别色阶（Categorical color scales）。
何为类别色阶？红色、黄色、蓝色、绿色，没有顺序的颜色对应没有顺序的类别，这些颜色中，某种颜色并不比另一种颜色更为重要。
如果用颜色表示一组有顺序的数值，情况会稍微复杂一些。一些情况下，数值单向地发生变化，比如从 0 增加到 100，这样的数值应当采用单向色阶（Sequential color scales）进行表示。
单向顺序色阶是从暗到亮 （从亮到暗）的颜色渐变，它们适合展示从低到高变化的数值数据，比如温度、质量或浓度。通常这样一组颜色中，亮度、饱和度与色相同步发生变化，给人一种更直观的顺序关系。
应注意：
上面说到单向递增（递减）的数据用单向色阶，可数据只能单向变化，为什么会有双向的色阶？这取决于你的数据有没有明确且有意义的中间值。
双向色阶通常用于：
双向色阶（Diverging / bipolar / double-ended color scales）与单向色阶类似，但是它不再是亮度或饱和度的从低到高变化，它通常中间亮度更高，从中间向两侧饱和度与亮度同时变化。
最初，每当我要选择颜色时，都直接从调色板中随便点一个，可调来调去总感觉缺乏美观。于是我找来了不少平面设计的配色网站，但这些网站给出的配色通常只有四个颜色，且与我的数据也好像总也合不来。我继续找，发现还有些配色是专门适用于数据可视化的。这里介绍以下几个工具。
The Data Viz Color Picker 可以根据你输入的起始颜色，生成一组渐变色。并且有单向与双向色阶的不同选项可供使用。
Adobe 出品的开源工具，可基于对比度创建设计用的颜色系统。其中有一个部分，Color scales，专门为数据可视化生成配色集。Leonardo 同样可以选择不同的色阶类型，并提供了多种分析工具，可以查看颜色间的对比度，并确认是否适合色觉异常人士。
CARTOColors - CARTO 按照数据的类型，给出了三类不同的配色，点击颜色可以查看效果，遇到满意的颜色也可以直接复制对应的颜色值。
相比于前面提到的三个网站，Colorpicker for data 很直接，把调色板怼在脸上，拖动线段的起点和终点，就可以生成均匀的渐变色。它有更高的自由度，更灵活的同时也更难以驾驭。如果厌倦了前面网站给出的颜色，也可以从这个网站开始，调出一套属于你自己的配色方案。
在上面的工具之外，还有 chroma.js palette helper，可以在你拿到一组颜色后，分析它们的色相、饱和度与亮度的变化趋势，借此判断这组颜色是否合适，同时它也提供了不同色觉异常人群看到颜色后的实际效果。
除了根据数据的类型选择颜色，还有以下方面，也是在选择颜色的时候需要考虑的。
开头提到，由于三种视锥细胞的存在，我们可以感知红绿蓝三种颜色的组合。如果其中某种视锥细胞的灵敏度不足，将会导致色弱；如果某种细胞完全不起作用，就会引起色盲。因为有三种类型的视锥细胞，因此有三种类型的色弱，和三种类型的色盲。
在人群中，色弱相比色盲更加常见，约 6-7% 的男性有某种色弱，而大约 2–3% 的男性是色盲。
因此，应当尽量避免某些颜色的组合，比如红色-绿色-棕色的组合，在红绿色盲的眼中，它们长得都差不多。
此外，在选择颜色时，不仅选择不同的色相（Hue），让饱和度和亮度同时变化，有助于增加色彩的区分度，这也能让一般人对颜色的辨别更加高效。有些工具可以给出相同配色在不同色觉异常人士眼中的效果：
另一方面，采用颜色和模式同时进行区分，比如加上不同的线段或阴影，也能增加颜色的辨别度。
如非必要，勿增实体，这在选择颜色时也成立。某些情况下，不需要使用太多的颜色，就足以达到想要的效果。这些情况下，就该考虑是否有必要选择那么多颜色了。
能不用，就不用。有时候，并不需要使用颜色，就可以区分不同的样本：
能少用，不多用，避免同时使用过多颜色。颜色本身是帮助区分类别的，但是颜色越多，就越难快速阅读和理解，在读图时将不得不反复在图例和图形间来回查阅，使图片直观性有所下降。如果图中使用了超过七种颜色，可能要考虑其他的图表类型，或是将类别进行组合；
在文章中多次对相同类别进行作图时，对同样的类别使用相同颜色，可以帮助读者简化理解过程，也能让整体更加清晰直观。
上面我简单总结了一些在可视化过程中，选择颜色时的一些注意事项，还有很多遗漏之处。对此如果感兴趣，这里提供一些比较好的资料和文章：
可视化工具 Datawrapper blog 中关于选择颜色的建议：
Adobe Spectrum 给出的可视化颜色选择建议：
参考资料
> 下载 少数派 2.0 客户端、关注 少数派公众号，解锁全新阅读体验 📰
> 实用、好用的 正版软件，少数派为你呈现 🚀
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。