这个教程看完就会！如何为一个图表设计色彩？

Z Yuhan：色彩研究通常要么太随意，要么太理论化，难以理解。本文以一种非常简单易懂的方式讲述了一个专门研究数据可视化的团队探索图标色彩搭配的过程，给出了强有力的论证，得出了很好的结论，非常值得一读。

虽然现在要获得的配色并不难，但还是很难找到图表(可视化数据)的配色。

在 Graphiq （一家以可视化的形式提供全球各种数据的公司也是作者工作的地方），因为我们的图表需要以各种形式传达成千上万的数据。

现在的问题

一开始，我们没有直接开始设计，而是调查了互联网上现有的颜色搭配。令人惊讶的是，我们发现其中一些确实是为复杂的图表和可视化数据而设计的。当时，我们发现了几个问题，所以我们不能直接使用这些现有的颜色匹配。

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

这些配色不够可视化，不但明度差别不大，而且设计它们的人也没有考虑清楚的问题。 Flat UI Colors 最常用的色板之一，你很容易发现这些配色看起来很棒，但颜色就像它们的名字一样，它们是为了 UI 设计。对于色盲和色弱用户来说，很难在图表上区分这些颜色。

Flat UI Colors 一个色板：

红色盲目中的颜色板：

色板在全色盲眼中的样子：

问题二:不够清楚

另一个问题是这些配色没有足够的颜色。在设计中 Graphiq 在视觉风格中，我们需要一个配色方案，至少提供6种颜色，甚至8到12种，以覆盖所有的使用场景。

这里有一些 Color Hunt 的例子：

虽然这些颜色很好，但它们不能用来显示复杂的数据。

问题3：难以区分

等等，也有一些搭配是渐变色，理论上这种搭配可以衍生出多种颜色，不是吗？

不幸的是，这些渐变色的亮度变化通常是不够的，例如，以下也是从 Color Hunt 来的：

让我们用第一个测试一下，看看如果用它来显示10个维度的数据会发生什么：

这样一来，普通用户几乎不可能在图表中区分这些颜色，尤其是最左边的四种绿色。

我们的方法

在 Graphiq ，我们以各种方式理解和感受数据，我们花了很多时间寻找许多适合我们图表的配色方案。在这个过程中，我们学到了很多，我们愿意与您分享以下三个原则：

原则一:色相和亮度要有足够大的范围

为了确保颜色匹配容易识别，对弱色和色盲足够友好，颜色之间应该有足够的亮度差异。因为最容易识别亮度，无论是红色盲、绿色盲还是完全色盲。

谷歌 Material Colors 中的 Light Blue：

红盲的样子：

色盲看到的样子：

然而，如果颜色匹配中只有明度差异，恐怕还不够。颜色之间的维度变化越大，用户就越容易在图表上进行数据比较。如果你能利用色调的差异，对于视力正常的人来说肯定会更好。

如上图所示，明度和色相的跨越范围越大，颜色匹配可以支持图表的维度越多。

原则二:借鉴自然色彩:借鉴自然色彩

设计师们都知道一个秘密，这对逻辑性很强的人来说可能不容易理解：颜色之间不平等。

从纯数学的角度来看，从亮黄色到暗紫色的渐变应该与从亮紫色到暗黄色的渐变相似。但当我们真正看到下面的图片时，我们会觉得前者比后者自然得多。

这是因为我们已经习惯了自然界的渐变。在日落的余晖中，我们可以看到从亮黄色到暗紫色的渐变，但从亮紫色到暗黄色的渐变在地球上无处可见。

△   Kyle Pearce

同样，从亮绿色到蓝紫色，从亮黄色到深绿色，从橙棕色到冷灰色。

△   Kbh3rd

△   Ian Britton

△   Jon Sullivan

因为我们可以看到这些自然渐变很长一段时间，当我们在颜色匹配中看到它们时，我们也感到熟悉和快乐。

原则三：使用渐变而不是分散的颜色

渐变颜色匹配是最好的，无论你需要2或10种颜色，你都可以从渐变中获得。这不仅可以确保颜色的自然感觉，而且还可以有足够的色调和亮度差异。

从色板模式到渐变模式并不容易，你可以尝试 Photoshop 在渐变中画几条分隔线，然后测试并微调分割点。这里有一个截图来展示我们如何纠正我们的渐变：

您可以看到，我们将渐变色板放在顶部，与灰度渐变相邻，并从分割线上取色，以测试这些真实用途。

我们的色板

我们对结果非常满意。以下是我们正在使用的一些色板，它们从纯白色开始，以纯黑色结束，以最大限度地利用亮度的差异。

冷色：

暖色：

霓虹色：

使用我们的色板

总结

现在有越来越多的颜色匹配，但它们并不总是图标和可视化数据。我们的研究方法是使颜色渐变在色相和亮度范围内。这样，我们的颜色就适合色盲和色弱，尤其是对于实力正常的人，可以用于维度数从1到12的图标。

相关文章、工具和资源

在研究过程中，我们发现了一些伟大的资源和文章。他们得出类似于我们的结论，但使用的方法更加数据化，甚至延伸到色彩理论。我们认为我们应该与您分享作为扩展阅读。

文章

How To Avoid Equidistant HSV ColorsMastering Multi-hued Color Scales with Chroma.jsSubtleties of Color (Part 1 of 6)The viridis color palettes by Bob Rudis, Noam Ross and Simon GarnierA New Colormap for MATLAB – Part 1 – Introduction

工具

Colorpicker for data ：可以在 Chrome chroma工具上获取渐变色，并立即在图表上查看效果.js：JavaScript库Colorbrewer2处理颜色：用于为图表选择颜色的工具支持多种色相和单色相gradStopp.js：生成单色方案和等距渐变点 JavaScript 库Color Oracle：免费色盲测试工具， Windows 、 Mac 和 Linux 都能使用。

其它资源

这里还有一些很好的配色资源，虽然不一定适合可视化数据，但你可能会觉得有用。

Color Hunt ：如果你只需要四种颜色，高质量的色板很容易快速查看。

COLOURlovers ：很棒的色彩交流社区，还有各种工具可以用来做配色设计。

ColorSchemer Studio ：功能强大的PC采色工具

Coolors ：轻量色板生成工具

Flat UI Colors ：界面色板是最受欢迎的界面色板之一

Material Design Colors ：它也是一种色板，不仅提供广泛的颜色，还提供每种颜色的“重量”和亮度。

Palettab ：提供颜色和字体方案 Chrome 扩展工具

Swiss Style Color Picker ：同时也是一种很好的色板

标注：

对色盲色弱不够友好*：原文中问题一的标题是“Low Accessibility“通常，产品对残疾人的友好性是不够的，这通常是欧洲和美国国家需要注意的产品硬指标（也因为它们的色盲色弱发病率远高于亚洲）。因为中文中没有简短而准确的说法，我写的是“对色盲色弱不够友好”。

逻辑性强的人*：原文写法是“原文写法是”left-brained folks”，直译是左脑型的人。通常左脑型的人被认为逻辑严谨，右脑型的人被认为有艺术天赋。因为这种说法在中文里不是很通用，所以我写的是“逻辑性强的人”。

「如何从零开始学习配色？」

“色彩搭配速成！三种实用的方法可以帮助你全面完成配色”和“配色新技巧！如何巧用大师的作品来帮助你完成配色？”

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================优秀设置网=============“优秀设置网uisdc”.com“它是中国最受欢迎的网页设计师学习平台，专注于分享网页设计、无线终端设计和PS教程。【特色推荐】设计师需要阅读的100本书：历史上最完整的设计师书籍导航：http://hao.uisdc.com/book/.设计微博:拥有200万粉丝的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源，下载顶级设计材料。设计导航：推荐世界顶级设计网站，设计师必须导航：http://hao.uisdc.com