在第15期的美数课堂，课代表曾带来了数据可视化工具 Datawrapper 的主创 Lisa Charlotte Rost 的一篇配色避坑指南🔗，帮你躲开那些辣眼睛的颜色。
其实 Lisa 还曾分享过一篇可视化取色工具大合集，分门别类介绍了二十多种配色工具。今天，课代表就编译成中文分享大家。
文中提到的工具链接很多，想进一步了解可以在公众号后台回复“36”一键获得。
✦✧✧✧✧
干嘛说颜色？
颜色可以奠定情绪基调
颜色可以吸引读者注意
数据可视化非常倚重这两点的。例如下面这张动图来自 “Out of Sigh Out of Mind”，讲述的是被无人机袭击的巴基斯坦公民。作者通过颜色来把控情感，红点几乎让你觉得就是溅出的血。颜色在此就起到了强调的作用——一个常用的引导读者视线的工具。⌂ 图片来自“Out of Sigh Out of Mind”
那在实际项目中，你该如何选择颜色？其实，数据可视化作品的颜色取决于数据。通常有两种选择：对连续数据，要使用渐变色
对分类数据，另选独立颜色
这里展开说一下：如果数据是从小到大，如失业率等，那选渐变色。渐变色代表的数据说明其比周围颜色（数据）要么高一些、要么低一些；如果数据是有类别的，如共和党、民主党，那你可以考虑独立的颜色。独立的颜色表示它与周围颜色（数据）没有明显关联。但是这两种选择各有难点，在平面设计圈里是个常见的难题。这方面的工具也有很多，我下面就来介绍。✧✦✧✧✧
渐变色怎么搭配
ColorBrewer 2.0 这款经典工具要第一个提。这是每个数据可视化设计师的王牌，因为它的作用不是只停留在工具层面，在你选配色时，ColorBrewer 也在指导你选择最佳的配色方案。点开页面中的“ ？”，你会从引申阅读中受益匪浅的。⌂ 图片来自 ColorBrewer 2.0
如果 ColorBrewer 提供的渐变色方案还不够你用，可以试试 CartoColor 。与前者一样，你可以在地图上试验你的渐变色，并且复制出方案。另外， CartoColor 的颜色搭配也是可圈可点的。如果你会用 R语言，推荐看看这篇《R的调色板综合列表》教程。⌂ 图片来自《R的调色板综合列表》
我个人最常用的工具，是由我们 DataWrapper 的技术总监 Gregor Aisch 写的 Chroma.js Color Palette Helper。通过它，可以很容易分辨不同颜色的具体色差。我相信越是高阶的数据可视化设计师，越能欣赏这个工具。使用者甚至可以改变文档中的代码案例来掌握 Chroma.js 的更多功能。⌂ 图片来自 Chroma.js
还有一个工具就不仅仅是拿来用了，它更是加深了我对颜色的领会。Tristen Brown 的 Colorpicker for data，你可以在里面设计你想要的任何渐变色。Colorpicker里还有一个“Visualized”选项，一点击，就可以根据你所设计的颜色自动生成分级统计地图。⌂ 图片来自 Colorpicker for data
如果以上两个工具对你多没有帮助，那不妨试试 Erik Kennedy 的 Data Color Picker。只要设定开头和结尾的颜色，它会自动生成一套渐变色。⌂ 图片来自 Data Color Picker
还有很多更加高阶的工具，但让我用它们来找渐变色，的确有点杀鸡用牛刀了。不过，这些工具挺受欢迎的，所以也提一句。例如 Connor Gramazio 的 Colorgorical，HCL 大神的 Palette Creator，还有 I want hue （超复杂，不推荐）。⌂ 图片来自 I want hue
✧✧✦✧✧
向大师学习
当我问大家“在无数的颜色里，怎样挑出最合适的色彩？”这个问题后，有三个人给我推荐的都是绘画大师，所以我觉得这里有必要提到他们。我很欣赏这些大家，作为包豪斯大学的校友，我可以体会到约瑟夫·亚伯斯(德裔美国画家)，约翰·伊登(瑞士表现艺术家)的独到之处。但你一定要注意，这些大师在几个世纪前调配的颜色和我们如今在电脑屏幕上享受的视觉饕餮有着质与量的差距。约瑟夫·亚伯斯的《Interaction of Color》中说：“视觉感知中，颜色从来都不是它本身的模样--尤其在物理方面。”
另外一位包豪斯之星，约翰·伊顿（亚伯斯之师，《The Art of Color》的作者）是以他的色球理论闻名，他是这么展示颜色的：
美国颜色大师马克·罗斯科也说过：“如果你只是被色彩关系打动到，那么你就错过了重点。我感兴趣的是表达大的情感，悲剧、狂喜、厄运。”
谷歌还开发过这样一个实验项目：观众自选五个颜色，然后网站会推送仅仅使用选定颜色创作的艺术作品。另外，你还可以上传任意图片，并提取指定图片中的颜色。
✧✧✧✦✧
向电影、自然、他人学习
除了美术作品，电影，这种叙事专家打磨多年的艺术媒介，也完全掌握了颜色的秘诀。它能够娴熟地用颜色渲染场景，制造亮点，甚至影响你的情绪。你可以在@cinemapalettes 的推特上或者 Movies in Color 里找到电影的配色。The Colors of Motion 更是提取出了每一部电影的每一帧中的“平均色调”，并艺术加工，创作了这样条形码般的可视化作品。虽然帮助性还不是很明显，但绝对是有趣的作品。
《布达佩斯大酒店》的导演魏斯·安德森更是运用颜色的高手。那篇讲他的电影色调的 Wes Anderson Palettes 更是经典。甚至有人为此开发了一个 R 语言的包。
⌂ 图片来自电影《布达佩斯大酒店》宣传海报
如果你想从自己所喜爱的电影或图片中提取配色，Steven DeGraeve 的 Color Palette Generator 就是为此创作的：上传图片则会自动生成配色方案。不少艺术和平面设计工作都会用到 DeGraeve 的色彩生成器。当然，这个工具有个缺点，就是自动生成的配色会比我们眼见的更加不饱和。
因此，还是手动提取颜色最为保险。很多配色生成器都差强人意，你会经常收到比实际颜色要偏灰的结果。 Bill Hart-Davidson 建议使用热带鱼为底色来创建配色方案。乍一听是天方夜谭，但用了之后就会知道是真香。在选择颜色时，大自然也是很好的灵感来源：因为你从根本上保证了选取的颜色是“自然”的。
试试用 image-color.com 之类的工具。其中一个选择“色彩半径”的功能可以让你自由选择多少像素之内的平均颜色，哪怕单纯的选择一个像素中的颜色也可以。要是在寻找更饱和的颜色的话，不如试试热带鱼的照片。另外，还可以向别人学习。要知道，网上有太多太多已经整理好的配色方案。ColorHunt、ColorDrop、Coolors、LOLcolors、Pigment、Adobe Color CC这些都不过沧海一粟。如果你专门在找有数字感、秩序感的颜色，可以试试谷歌的 Material Design by Google。
说了这么配色方案，那么问题来了：这些都该怎么用啊？其实还是要学的。看 Designspiration 或 Dribbble 里作品对色彩的应用是个好的开始。我经常从这些设计达人的作品里，找到额外的颜色来扩充我手头的配色方案。⌂ 很多作品展示网站都支持颜色搜索
你也可以单纯的从寻找灵感的角度出发：出发去博物馆或者画廊。看看画，看看数据可视化，例如“凯度信息之美奖”的获奖作品，再读读其他人在颜色方面的文章，如Plenty of Colour，都会对你大有裨益。
Smashing Magazine 提供很适合新手的颜色教程，教你如何开始创作自己的第一个配色方案。其中“创造和谐的灰”的方法就让我很受启发：基本上就是从纯灰色开始，然后将你要选择的颜色放在灰色上来创造新色调。这个方法我都没想到过，不过真的可以让你的颜色方案更加和谐。
The Smashing Magazine 很多地方都使用了 Paletton 这个进阶版的 Adobe Color CC。如果你也是颜色行家的话，这个工具会很有帮助。
✧✧✧✧✦
确保颜色发挥了作用
在使用这么多的制作配色方案工具前，有一点我们必须要坚定：要知道使用这些颜色的目的。没错，连帮助你决定目的的工具都有：Elijah Meeks 和 Susie Lu 的 Viz Palette 。它会评测你对“线”或者“面积”等可视化元素的颜色选择，也会在你使用太过类似的颜色导致视觉疲劳的时候，发出提醒。
Viz Palette 还会帮你检测颜色是否对色盲人群足够友好。有类似功能的工具还有：Spectrum Coblis 、 Sim Daltonism。我们也给 DataWrapper 整合了一个色盲模拟选项。聊了这么多通常意义上的颜色选择，再推荐一款为字体选颜色的工具：Color Review。它会显示字体色和背景色的对比度，以告知图片中的文字是否容易辨认。
编译略有删改，原文链接：https://blog.datawrapper.de/colorguide/文中提到的工具链接可在公众号后台回复“36”一键获得。
◒◡◒
┊推 - 荐 - 阅 - 读┊