由于我总能看到这些自然的渐变,所以当我们在可视化图表中看到对应的配色时,会感觉熟悉和愉快。
第3条:使用渐变,不要选择一系列固定颜色
渐变配色结合不同色调,对两者都最好。无论你需要2种颜色还是10种,渐变中都能提取出这些颜色,让可视化图表感觉自然,同时保有足够的色调与明度差异。
改用渐变的思维并不容易,不过有个好方法,可以在Photoshop中拉辅助线到断点位置,与数据的数量对应上,然后持续对渐变进行测试与调整。以下是我们在修正渐变时产生的屏幕截图。
可以看到,我们将配色表紧挨着顶部的灰度渐变,调整渐变叠加(之后就能得到精确的渐变色值),然后从那些断点处选取颜色,测试配色在实际运用中的效果。
我们的配色方案
我们对最终成果感到兴奋。下面是我们使用的部分配色,它们都有从纯白到纯黑的渐变,以达到最大限度的明度差异。
冷色、暖色和霓虹色。
配色的实际运用
长话短说
尽管优秀的配色方案越来越多,但并非所有都适用于图表和数据可视化。我们的配色方法就是创建色调与明度变化都足够大的自然渐变。这么做能使我们的配色便于色盲辨识,对其他人则更明显,并且可以满足1到12种数据。
这个过程中,我们发现了一些很棒的资源和文章,与我们得出的结论类似,但他们采用了更精确的方法,甚至钻研了色彩理论。我们觉得应该分享出来,供大家深度阅读:
阅读
-
如何避免等差的HSV颜色,作者Gregor Aisch通过chroma.js控制多色调的色彩比例,作者Gregor Aisch微妙的颜色,作者Robert Simmon翠绿配色方案,作者Bob Rudis、Noam Ross和Simon GarnierMATLAB色彩地图,作者Steve Eddins
工具
-
数据颜色采集工具——一件很趁手的工具,让你保持浓度不变的同时轻松选择配色Chroma.js——一个处理色彩的JavaScript库Colorbrewer2——热点图与数据可视化颜色工具,自带了多色调与单色调的方案
其他资源
我们还找到一些其他爱不释手的配色资源。虽然它们并非专为数据可视化而设计,不过我们觉得或许对你有帮助。
-
ColorHunt——高质量配色方案,能够快速预览,如果你只需要4种颜色,这是绝佳的资源COLOURlovers——很棒的颜色社区,其中有许多工具可以创建配色方案,还有设计模式ColorSchemer Studio——强大的桌面取色应用Coolors——轻量级随机配色生成器,你可以锁定你想要的颜色,然后替换其他的Flat UI Colors——很棒的UI配色,这是最流行的配色之一Material Design Colors——另一套优秀的UI配色。它不仅提供了跨度巨大的颜色,也为每种颜色提供了不同的“色深”,或者说明度Palettab——一个Chrome插件,在每个标签页里呈现一套新的配色方案和字体灵感Swiss Style Color Picker——另一个优秀的配色方案集
希望本文对你有所帮助!
精彩评论