创建图表最困难的部分之一是选择颜色。 错误的颜色会使图表没有吸引力、无效，最糟糕的是，难以阅读。 本节将为您提供选择颜色的良好框架、有关人类感知的重要事实以及简单的提示。

在选择颜色比例时，您首先要确定其用途。回到我们对数据类型的了解，有三个基本的用例：

我们讨论的前两种数据类型（二进制和标定）最好用分类配色方案表示。 由于我们的度量值没有自然的顺序，所以我们不想使用具有自然顺序的配色方案（比如白色到黑色）。 d3在其d3-scale-chromatic库中有内置的配色方案。

这些分类配色方案经过精心设计，可以在颜色之间形成足够的对比度。 这些方案中的每一个都是一个颜色数组——例如，要使用此列表中的第一个比例，我们将在 d3.schemeCategory10 中的索引处访问每种颜色。

对于分类的配色方案，这对每种颜色都有一个不同的描述性名称是很有帮助的。例如，可能有两种颜色可以被描述为“蓝色”，这可能会令人困惑。

对于连续的指标，我们将需要一种方法来在颜色值之间进行插值。例如，我们可以用从白色到深蓝色的颜色范围来表示湿度值。 d3-scale-chromium的内置连续比例尺在在顺序部分如下。

这些是颜色比例，而不是配色方案——d3.interpolateBlues()是一个函数，而不是一个颜色数组。为了得到一个颜色，我们可以给d3.interpolateBlues()一个在0和1之间的十进制-0将返回最左边的颜色（浅灰色），1将给我们右边的深蓝色。用熟悉的术语来说，d3.interpolateBlues()是一个具有[0,1]域和[浅灰色，深蓝色]的范围。 这些单色调比例非常适合基本图表和具有多种颜色比例的图表。但是，有时颜色值之间的步长太小，很难区分值。 在这种情况下，d3-scale-chrom 有许多连续的色阶，它们在另一个色调中循环，增加了值之间的差异。

我们可以看到通过单色调比例（左）与多色调比例（右）区分 50% 和 60% 的颜色之间的差异是多么容易

我们的连续色阶在接近色阶末端时在视觉上更加清晰。 这非常适合突出显示高端值（例如，最高湿度值将是最明显的）。 但是，有时我们希望同时突出显示最低和最高指标值。 例如，如果我们正在查看温度，我们可能希望将最冷的日子突出显示为亮蓝色，将最热的日子突出显示为鲜红色。 发散的比例尺以非常饱和/深色的颜色开始和结束，并贯穿浅色的中间位置。

我们可以看到我们有单色调（每边）和多色调发散尺度。 同样，在更多色调之间循环是有帮助的，这样用户就可以发现指标之间的较小差异，但是当我们已经在两种色调之间循环时，它可能会让人不知所措。 在感受色阶时，请尝试一些不同的选项，以了解在您的特定场景中可以使用的方法。 这不是一个一刀切的决定。

有时内置的色阶不会切割出你想要的颜色。 也许您有想要使用的特定颜色，或者您希望图表具有特定的色调。 不用担心！ 我们可以使用 d3-interpolate 轻松制作自己的比例尺。 假设我们想用一种颜色来表示温度值，范围从“青色”到“红色”。我们可以用几种方法来插值这两种颜色，包括d3.interpolateRgb()和d3.interpolateHsl()。 让我们制作我们自己的比例，从“青色”到“番茄”——我们需要做的就是将我们的开始和结束颜色作为单独的参数传递给 d3.interpolateHcl()。

我们将在下一节讨论不同颜色空间（rgb、hsl、hcl）之间的区别。

这将给我们一个这个比例尺：

我们的代码已经开始使用一些不同的自定义比例尺。

我们还有一个实用函数 addCustomScale()，它接受两个参数:

将创建以下配色方案。

我们可以通过传递一个唯一的id和我们的比例来addCustomScale()来查看配色方案。

如果我们想创建具有多种颜色的离散配色方案，我们可以使用 d3-scale-chrom 的循环颜色刻度尺。

我们可以使用我们的interpolateWithSteps()函数来将这个连续的颜色刻度尺分割成一个配色方案。

自己联系下，制作一些颜色刻度尺来熟练掌握这些函数：

颜色可以用不同的格式表示，每种格式都具有不同的长处。但是创建我们自己的颜色需要小心，我们使用的颜色空间会影响我们的图表的解释程度。 三种颜色空间：

你在从事开发时最有可能遇到的颜色空间是rgb。Rgb颜色由三个值组成：

r: 红色

g: 绿色

b: 蓝色 对于这些值中的每一个，更高的数字使用更深的指定颜色。 把这些值组合在一起以创建一种颜色。 这就是 LCD 屏幕的基本工作原理：每个像素由红色、绿色、和蓝光组成。 这些值以加法方式组合，从黑色开始并朝着具有更高值的白色移动。 这可能与直觉相反任何在纸上使用颜料的人，其中更多的颜料 = 颜色更深。 例如， rgb(0,0,0) 代表黑色，rgb(255,255,255) 代表白色。 我们将讨论的所有颜色空间还有另一个可选的值： a: alpha 透明度 alpha值设置颜色的不透明度—alpha值为0的颜色将为透明。如果没有指定alpha值，则颜色将是完全不透明。 rgb可以用两种格式表示。第一个是函数表示法，以rgb开始，并在括号内按顺序列出每个颜色值。每个值都将在从0到255的范围内。如果我们想指定一个alpha值，我们将将该前缀切换为rgba。 例如，我们将把一种青色表示为绿色和蓝色的组合\

rgb颜色也可以用十六进制表示表示，它以#开头，用从00到FF范围内的两个字符列出每个值。

rgb可能是一个不直观的颜色空间——如果我有一个蓝色，并且想要一个相同亮度的橙色，那么所有的值都必须改变。

接下来，让我们来看看一个更接近我们的心理颜色模型的颜色空间。

在hsl颜色空间中，这些值并不代表特定的颜色，而是代表颜色属性：

hcl 颜色空间与 hsl 相似，具有相同的值（c 表示色度，这是色彩的另一种度量方式）。\

这些值不是在空间上均匀的，而是在感知上是均匀的，因此亮度为 50% 的红色和蓝色看起来具有相同的亮度。 让我们看一下下图 hsl（顶部）和 hcl（底部） 在 100% 饱和度和 50% 亮度下的色调光谱。

我们可以看到 hsl 色调中的色带看起来比其他色调更亮（即使它们在数学是相等的）。 那些色带在 hcl 光谱中不可见。 如果我们创建一个 hsl 颜色空间的 3d 圆柱体，我们就会有一个完美的圆柱体。 但是当我们以这种方式可视化 hcl 色彩空间时，我们可以看到它并不是一个完美的圆筒。 这是因为人类无法检测到所有颜色的饱和度变化。

这使得 hcl 成为创建色标的理想选择——如果我们使用颜色来表示不同类别的降雨量，这些颜色应该具有相同的可见度。 这将有助于防止一种颜色支配和扭曲我们对数据的读取。

深入阅读

虽然浏览器会识别 rgb 和 hsl 格式的颜色，但没有太多用于操作颜色的原生功能。 d3-color 模块具有用于识别 hcl 格式中的颜色、在格式之间转换以及沿颜色空间维度操作颜色的方法。 我们不会讨论d3-color的细节，但是了解库也是有必要的，如果你发现自己需要手动操作颜色，请查看github.com/d3/d3-color上的文档。

在选择颜色刻度尺时，请牢记以下几点提示。

确保您的颜色在所有情况下都与周围环境有足够的对比度。如果您使用 Chrome，有一个很棒的工具可以在您的开发工具中检查您的颜色是否有足够的对比度。 在附录中了解如何使用它。

不要假设你的用户可以尽可能清楚地看到你的图表,中国科学院遗传研究所的调查说，我国男性色盲占5.4%，女性约占0.73%。为了确保大多数人都能从你的颜色尺度中编码信息，远离用户必须区分红色和绿色的比例。 这是上图对红绿色盲患者的模拟。

如果我们在第 6 章创建的地图上使用左侧的红色/绿色作为色标，就不可能看到哪些国家有负增长，哪些国家有正增长。

在一些站点中，您可以模拟不同类型的色盲来测试数据可视化，比如color-blindness.com。

颜色区域越小比较越困难。 使用颜色作为指标时，确保颜色元素足够大。

尽可能地选择语义上有意义的颜色。例如，蓝色表示低温，红色表示高温。

灰色可能是最重要的颜色。当您想要突出显示图表的部分时，保持其他元素的灰色有助于查看者关注该元素。

通过这一章完成伟大的工作。基础知识学习起来可能很乏味，但了解基本知识将为您制作自己的数据可视化打下良好的基础。 以下就是我们这一章的汇总图