好的颜色方案容易获得，而在数据可视化设计中找寻合理的配色方案却是充满了挑战性。在Graphiq，信息内容通过成千上万独立的数据组和不同类型视觉样式向用户传达出去，而这让设计决策变得尤其困难。
“不是所有的颜色方案都适用于图表以及数据可视化设计。”
现在的问题
与其着急出方案，我们决定先在现有网站中做一些针对配色的调研工作。结果让我们惊讶的是，只有极少数的网站配色可实际用于复杂的图表及视觉可视化设计。以下是我们发现的一些问题：
问题1：低可访问性（Low accessibility）（注1）
许多色板并不是为视觉化呈现而创造的，这不仅是因为这些方案在明度上缺乏足够变化，还因为它们没有考虑到可访问性。Flat UI的配色被广泛使用，原因很简单：它们看上去实在棒极了。但就像它的名字一样，Flat UI是专为界面而设计。那些色盲用户会发现，使用Flat UI配色的数据图很难被理解。
Flat UI色板分别在全彩模式、色盲模式、灰度模式下的表现
问题2：色彩不够多
另外一个问题是：很多现有的方案缺乏足够多的颜色。在建立Graphiq可视化系统时，我们需要8到12个，或者最低标准6个以上颜色数目的方案来覆盖所有使用场景。而大多数方案无法提供足够多的选择。
下面是Color Hunt上的一些颜色方案
虽然都是不错的方案，但还不适用于当前复杂的数据系列。
问题3：难以辨别
但是请等一下...我们可以使用一些渐变色的色板，理论上应该可以创造出任意数目的颜色，难道不是吗？
但不幸的是，它们在明度上缺乏足够多的变化，导致很难被快速辨别，比如下面这些方案（依旧来自Color Hunt）：
让我们取第1个方案尝试扩展到10个数据系列，结果如下：
我们很好奇是否一般用户能从视觉上正确辨别这些颜色并对应到相应颜色名称，特别是左手边那4个绿色。
我们的方法
在Graphic，我们对数据相当熟悉，会花大量时间找寻不止一个可用于可视化的颜色方案。在这个过程中我们有了许多的发现，这里分享3条能灵活创造颜色方案的经验规则：
规则1：色相和明度上要有足够变化
为了能被很好的理解和识别，色板必须在明度上富于足够变化。明度的变化非常常见。任意取一个单颜色色板分别在红色盲、绿色盲以及灰度模式下做比对，你能很快发现这个色板是否可用。
只有在明度上有足够变化才能保证可访问性
Google Material中的亮蓝色分别在全彩模式，红色盲模式以及灰度模式下的呈现
但是，仅在明度上变化还不够。颜色的差异度越大，用户就越容易通过视觉定位数据。如果在此基础上再加上色相上的变化，即使是那些非色盲用户也会感到更愉悦。
所以在明度和色相上变化得越多，所能支持的数据系列也就越多。
规则2：遵从自然规律
不是每个颜色都被平等创造出来，这是设计师们都知道的秘密，但对于一些左脑型的人来说并不是马上能够察觉到。
从纯数学的角度看，从浅紫色过渡到深黄色应该跟从浅黄色过渡到深紫色的感觉差不多。但正如下面所看到的，前者看起来是自然协调的，而后者则不然。
这是因为我们已经习惯于看到一直存在于自然中的渐变色彩。我们可以在壮丽的日出中看到从亮黄色过渡到暗紫色的变化，但从没见过从浅紫色过渡到暗褐色的变化。
照片从左至右的作者分别是Kyle Pearce, Wesley Fryer和Jon Sullivan.
同样的，从浅绿色变化到蓝紫色，从浅黄色变化到暗绿色，从黄褐色变化到冷灰色，尽然如此。
照片来自于Kbh3rd, Ian Britton和Jon Sullivan
因为我们一直在看这些自然界中的色彩变化，所以当它们相对应的色板运用于可视化设计中的时候会给人熟悉而愉悦的感觉。
选择渐变色板
一个包含不同色相的渐变色板可以在任何情况下提供最好支持。不管你是需要两个颜色或是10个颜色，你都可以从这些渐变色板中有策略性地创造出既和谐自然又能在色相、明度上有足够变化的颜色方案。
切换到渐变色的思维并不简单，这里有个比较好的方式可以分享下：在Photoshop中，为各个数目的数据序列在每个数字建立网格线，并持续地调整优化渐变。如下是我们在完善渐变色板过程中的一张图片：
正如你所看到的，我们将色板置顶靠着灰度图，调整优化渐变叠加（方便之后精确代码还原），然后在各自网格线附近取色，并查看是否能实际使用。
我们的色板
最终用以上方法获得的色板令我们感到很兴奋。以下是一些正在使用的色板。他们都是从白色最终变到黑色，以保证在明度上达到最大变化量。
冷色，暖色以及霓虹色
应用案例
不知道如何嵌入
长话短说
虽然好的配色越来越多，但不是每种配色都适用于图表和数据可视化。我们所采用的方式是制作在色相和明度都有变化并符合自然规律的渐变色板。通过这种方式制作出来的色板能让色盲用户也觉得可以使用，同时在任何时候都可以匹配从1到12个的数据序列。
相关阅读、工具及资源
在研究中，我们也发现了一些好的资源以及跟我们有类似结论的文章，但它们会采用更为精准的方法，甚至会涉及一些深入的色彩理论。下面分享出来以供延伸阅读：
（以下直接搬运，请需要的同学使劲扒）
Readings
How to avoid equidistant HSV colors by Gregor Aisch
Mastering multi-hued color scales with chroma.js by Gregor Aisch
Subtleties of color by Robert Simmon
The viridis color palettes by Bob Rudis, Noam Ross, and Simon Garnier
A new colormap for MATLAB by Steve Eddins
Tools
Color Picker for Data: a handy color tool where you can hold chroma constant and pick your palette with ease
Chroma.js: a JavaScript library for dealing with colors
Colorbrewer2: a great tool for finding heat map and data visualization colors, with multi-hue and single-hue palettes built in
Other resources
And here are some other good color palette resources we found and loved. While they aren’t necessarily designed for data visualization, you might find them useful.
ColorHunt — high quality color palettes with quick preview feature, great resource if you only need four colors
COLOURlovers — great color community with various tools to create color palettes as well as pattern designs
ColorSchemer Studio — powerful desktop color pick app
Coolors — light weight random color palette generator where you can lock the colors you want and swap out the others
Flat UI Colors — great UI color set, one of the most popular ones
Material Design Colors — another great UI palette. Not only does it provide a wide range of colors, it also provides different “weights” or brightness of each color
Palettab — a Chrome extension that shows you a new color palette and font inspiration with every tab
Swiss Style Color Picker — another collection of good color palettes
（注1）译者注：可访问性则指的是访问一个产品或服务的便捷性和效率，我们每个人的生理和认知能力都不同，都有其生理和认知极限，比如有的人视力比较弱，有的人则容易疲劳，无法专注于一件任务，一个具有好的可访问性的产品可以让不同文化背景，不同认知能力，不同生理条件的人们都能够毫无障碍的使用。
原文地址：http://blog.invisionapp.com/finding-the-right-color-palettes-for-data-visualizations/
网友评论