如何为图表设计颜色？阅读此书后，您将了解

对颜色的研究通常要么太随意，缺乏逻辑，要么太理论化而无法理解. 本文使用一种非常简单易懂的方法来描述由专门从事数据可视化的团队研究图标颜色匹配的过程. 给出强有力的论据并得出令人敬畏的结论，这很值得阅读.

尽管现在不难获得色彩匹配，但仍然很难找到图表（可视数据）的色彩匹配.

在Graphiq（一家以可视形式提供各种全球数据并在其中工作的公司）中，设计图表的颜色更加困难，因为我们的图表需要传达数千种不同形式的图表形式. 数据.

在一开始，我们没有直接开始设计，而是研究了Internet上当前可用的颜色组合. 令人惊讶的是，我们发现其中一些确实是为复杂的图表和可视数据而设计的. 当时，我们发现了一些问题，使我们无法直接使用这些现有的配色方案.

问题1: 色盲和色弱不够友好

许多这样的配色方案不够直观，不仅亮度差异不大，而且设计这些方案的人也没有考虑清晰度问题. “平面UI颜色”是最常用的色板之一，您可以轻松找到: 这些颜色看起来很棒，但顾名思义，它们是为UI设计的. 对于色盲和色弱的用户，可能很难在图表上区分这些颜色.

平板UI颜色的调色板:

红色盲眼中的色板是什么样的:

在全色盲眼中色板的外观:

问题2: 不够清楚

另一个问题是这些颜色没有足够的颜色. 设计Graphiq的视觉样式时，我们需要一种颜色方案，该颜色方案至少提供6种颜色，或者多于8到12种颜色色盲矫正图表，以涵盖所有使用场景.

以下是“寻色”的一些示例:

尽管这些颜色很好，但不能用于显示复杂数据.

问题3: 难以区分

等等，还有一些渐变颜色的组合. 从理论上讲，这种组合可以得到许多颜色，对吧？

不幸的是，这些渐变颜色的亮度变化通常是不够的. 例如，以下内容也来自Color Hunt:

让我们对第一个进行测试，看看如果我们使用它来显示10维数据会发生什么:

对于普通用户而言，似乎几乎不可能在图表中区分这些颜色，尤其是最左边的四个绿色过于相似.

在Graphiq，我们以各种方式理解和感知数据，并且我们花费大量时间来寻找许多适合我们图表的配色方案. 在此过程中我们学到了很多东西，我们愿意与您分享我们发现的以下三个原则:

原则1: 色调和亮度必须足够大

为了确保易于识别颜色匹配，并且对于色弱和色盲足够友好，在颜色之间必须存在足够的亮度差异. 因为亮度的识别是最容易的，所以无论是红色盲，绿色盲还是完全色盲.

浅蓝色为Google材料颜色:

红盲人看到的是什么

色盲是什么样的:

但是，如果颜色匹配的亮度仅存在差异，则可能还不够. 颜色之间的变化尺寸越大，用户越容易比较图表上的数据. 如果您可以使用色相差异，那么对于视力正常的人来说绝对是更好的选择.

如上所示，亮度和色相的跨度越大，色彩匹配就可以支持更多尺寸的图表.

设计人员都知道一个秘密，这对于拥有强大逻辑*的人来说可能并不容易理解: 颜色不相等.

从纯粹的数学角度来看，从亮到深紫色的渐变应该类似于从亮紫色到深的渐变. 但是当我们实际看到下面的图片时，我们会觉得前者比后者自然得多.

这是因为我们习惯了自然界中的渐变. 我们可以在日落的余辉中看到从亮到深紫色的渐变，但是在地球上没有地方可以看到从亮紫色到深的渐变.

△凯尔·皮尔斯

类似地，从鲜绿色到蓝紫色，从鲜到深绿色，从橙棕色到冷灰色...所有这些:

△Kbh3rd

△伊恩·布里顿

△乔恩·沙利文

因为我们已经能够看到这些自然渐变很长一段时间了，所以当我们在色彩匹配中看到它们时，我们也会感到熟悉和高兴.

原理3: 使用渐变色代替分散的颜色

渐变颜色匹配是最好的，无论您需要2种颜色还是10种颜色，都可以从渐变中获得. 这样色盲矫正图表，不仅可以感觉到自然的色彩，而且还可以感受到色相和亮度的差异.

从色板模式更改为渐变模式并不容易. 您可以尝试在Photoshop中为渐变绘制一些分隔线，然后测试并微调分割点. 这是一个截图，向您展示我们如何校正梯度:

如您所见，我们将渐变色板放置在顶部，与灰色渐变相邻，并从分界线上取颜色来测试这些实际用例.

我们对结果非常满意. 下面显示了我们正在使用的一些色板. 它们都以纯白色开始，以纯黑色结束，以最大程度地提高亮度差异.

冷色:

暖色:

霓虹色:

使用我们的色板

配色方案越来越多，但它们并不总是具有图标和视觉数据. 我们研究的方法是使色相和亮度的色差范围尽可能宽. 这样，我们的颜色适用于色盲和色弱，特别是对于具有正常强度的人，并且可以应用于尺寸从1到12的图标.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-271818-1.html