如何生成你的分类色板

编辑此页

可视化色板是数据驱动的，色彩背后还承载着数据信息，不能单纯依靠美丑评判好坏，一套优秀的可视化色板应该让用户信任数据，轻松阅读数据，并能启发用户发掘数据背后的意义。基于新的设计价值观和考虑帮助设计师上手一套色板设计，我们将色板设计流程化的同时，提炼设计规则量化为色彩算法，实现用户输入品牌色即可轻松得到一整套可视化色板，实现人人都可以是专业的可视化设计师。

AntV 可视化色彩体系

了解了可视化色板的业务特点后，接下来让我们深入了解 antv 的可视化色彩体系，根据不同的业务场景，antv 总共有 6 套不同的色板，其中最关键的是分类色板，其他色板都是分类色板根据一定的映射关系衍生而来，因此本次升级会以分类色板作为抓手进行升级。

升级的原因是什么？

本次色板升级主要有两个原因：首先是 antv5.0 从人的视角重新提出了三个价值观，新的价值观对可视化色板提出了更多要求。其次是 5.0 开放了系统灵活度，支持用户自定义主题色来生成专属的可视化色板，需要一套可被算法实现的取色逻辑。

现状分析

明确了升级的原因后，让我们带着新的价值观来看看当前色板有哪些问题。信任感要求色彩应该避免让用户产生歧义，4.0 色板中的灰色会红色分别会让用户误以为是对比数据和警告数据，从而造成用户疑惑。

轻松感要求色板应该清晰容易识别，3.0 色板整体与白色的对比较小，色彩运用到图形上不够清晰，图形上的文字不易阅读。

意义感要求色彩帮助用户更好的理解数据，对于这一点，antv5.0 会在官网消费侧通过色板使用指南帮助设计师正确的使用可视化色板。

设计流程

明确了升级原因和当前的问题后，我们主要会从下面三个步骤进行优化：第一步是确定取色逻辑：通过参考经典的配色理论来确定取色规律并得到色板初稿；第二步是基线检测：通过量化和测试的方式去检验色板是否满足价值观的要求；第三步是感性调整：在理性的推导之上加上感性的调整让色彩和谐舒；

Step1:确定取色逻辑

首先进入到第一步，我们先来看一下 4.0 色板的取色逻辑是什么，如图所示，4.0 色板在色彩的选取上有一定的逻辑，包括相邻色彩之间的明暗间隔，色彩之间的距离等，5.0 会在 4.0 的基础上继续优化，同时对取色逻辑进行量化用于后期的拓展和算法实现。

为了得到一套可被量化同时又具有色彩搭配美感的取色方式，我们参考了经典的配色理论，包括「邻近取色」「对比取色」「分裂互补取色」从支付宝的品牌色出发依次使用三种配色方式得到三组色板。其中邻近取色沿着一个方向，按照相同的夹角取色，其优点是色彩具有很强的规律感和和谐度，缺点是整体区分度比较低。对比取色是相邻两个色彩是一组成 180 度的对比色，其优点是色板具有很强的区分度，缺点是相邻两色会误以为是一组对比数据，分裂互补取色是三个一组取色，前两个颜色是一组邻近色，第三个颜色是前两个颜色共同的对比色，这种取色方式兼顾了邻近色的和谐同时又有较高的区分度，没有明显的劣势。因此 5.0 确定以分裂互补取色方式作为取色逻辑。