一、背景

1.现有产品BI看板采用的Echarts图表库自带的组件，颜色和细节与公司产品的整体调性不符。

其中Echerts图表库提供了9种基础色，使用规律是：9种基础色循环使用，可拓展性不足，当分类超过9个时，9种色相的明度和饱和度差异性不够导致辨识度不够。

2.缺乏秩序和逻辑性

前端在可视化组件配色过程中取色主要靠主观判断，没有色彩规范支撑，页面用色较为混乱没有秩序性。

比如按钮normal、hover、pressed、disable等多个状态的应用。

3.没有完整的色彩体系，当遇到新的业务场景时，之前的颜色难以复用，需要重新配色重复造轮子。

二、设计目标

1.和谐统一：让可视化色板延续品牌色的基因，整体和谐统一

2.辅助决策：输出色彩规范，帮助设计师在色彩应用中快速做出决策

3.快速复用：沉淀出一套标准的色彩体系，方便在各个场景复用，避免重复造轮子

三、色彩定义过程

1.常用数据类型分析

在可视化色彩体系搭建过程中，如何通过色彩更精准的表达出数据所传递出的含义？这就需要我们对数据类型有一定的了解，在《数据之美》一书中提到，数据类型可以划分成分类数据、时序数据和空间数据三种类型，其中分类数据一般是定性数据，时序数据和空间数据一般为定量数据。

1.1分类数据

分类数据是指只能归于某一类别的文字型数据。它是对事物进行分类的结果，数据表现为类别。例如，人口按照性别分为男、女两类；企业按照所有制性质分为私有企业、国有企业、外商投资企业；人口按照民族分为汉族、壮族、回族等。这些都属于分类数据。

（图片来源：《数据之美》）

1.2.时序数据

时间是一个非常重要的维度，各种数据所反映的客观现象和事件总是发生在一定的时空中。任何随时间而变化的数据被称为时序数据，将时序数据按时间轴排列便形成了时间序列。

（图片来源：《数据之美》）

1.3.空间数据

（图片来源：《数据之美》）

空间数据（Spatial Data）通常指用来表示空间及其分布特征等多方面信息的数据，这里更多的是指带有物理空间坐标的数据，一般包含具体数字观测值的数据。如：武汉15个行政区与功能区人口、面积与密度统计图，是属于包含具体数字观测值的数据，但数据间不存在有序类别，因此属于定量数据。

2.可视化色板类型

根据上述的数据类型和使用场景可以拓展出三种主要的可视化色板类型

2.1分类色板

分类色板用于描述分类数据，常用一个颜色代表一个值以区分不同类型，取色时色相分布均衡，相邻颜色之间明暗需考虑差异性，常用于饼图的不同分类、填充地图中的不同国家、关系图中的不同角色等。例如下图公司人数统计图中，用不同颜色代表不同部门。

2.2顺序色板

顺序色板，一般使用同一或邻近色相，通过明度或饱和度的渐变，常用来表示同一事物中的数值大小或梯度变化，如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等。例如下面全国疫情地图，通过同一种红色的深浅变化表示感染人数的多少。

2.3发散色板

一般是两种互补色（也可以是对比色）去展现数据从一个负向值到 0 点再到正向值的连续变化区间，显示相对立的两个值的大小关系，常用于气温的冷热、海拔高低、股票涨跌等。例如下面的全国平均气温距分布图

3.色板定义方法

这里我们重点就分类色板的定义过程进行探讨，因为其他色板均是在分类色板的色相基础上进行延伸。

3.1竞品分析

首先我们通过竞品分析，看看行业内的产品是如何定义分类色板呢？

这里选取了两家公司的产品分别是QingCloud和蚂蚁金服的AntV。

通过对这两家公司的可视化系统搭建规则，发现了一些通用的设计原则和方法，值得我们借鉴。

3.1.1设计原则：准确、清晰、有效、美

在数据可视化设计中，色彩的运用原则上应首先考虑准确性，先保证达到了信息传递、操作指引、交互反馈，或是强化、凸显某一个信息的目的，其次再去考虑品牌识别性。

3.1.2基础色相取色方法：

在基础色相的选取上两个产品的选取方法各有不同：

1）QingCloud的基础色板通过正色取色法，以正红为基准，在24色相环上选取间隔15度的颜色作为基础色，然后根据品牌色和产品调性矫正颜色。

2）AntV 色板则是基于 Ant Design 色彩体系，结合数据可视化的特性进行调整得到的。

3.1.3色彩空间的选择：

在后期色彩校正的环节，二者都采用了CIELab（HCL）同一类色彩模型进行调整，它是人眼感知最为均衡的一个色彩模型，符合人眼感知系统。

两类色彩模型的差异：

HSB/HSL:描述色彩自然直观，色彩量化操作性强

LAB/HCL:客观描述人眼对不同波长光感感受

（该文章对模型差异有详细描述：https://www.uisdc.com/color-system）

3.1.4色彩校正：

根据已知的理论研究可知人眼最容易识别且符合人类认知的 8 个基准色为：红、橙、黄、绿、青、蓝、紫、粉。

大部分可视化系统在实际应用当中都选取了10种左右的颜色作为基础色板，所以10种左右的基础色板是合理的。

3.1.5色彩数量选择：

根据已知的理论研究可知人眼最容易识别且符合人类认知的 8 个基准色为：红、橙、黄、绿、青、蓝、紫、粉。

大部分可视化系统在实际应用当中都选取了10种左右的颜色作为基础色板，所以10种左右的基础色板是合理的。

四、实战应用：可视化色彩体系搭建

1.设计原则：准确 清晰 有效 统一

视觉的美是相对而言的，B端产品的色彩体系应该是以统一为基础，让色彩产生一定的秩序性，能够延续品牌基因，从而与产品的页面能够和谐相处。

2.取色方法

这里呢我们采用主色取色法，先定义两种色相，根据品牌色的主色通过调整饱和度和明度降低色彩刺激，使其更适合图表展示与阅读。

色相调整，相邻色彩选取色相环上大于30度的颜色，加入一种深灰色作为调和色，确定10种基础色

微调刺眼的黄绿色和柠檬黄

颜色模式转换成HCT

根据品牌主色的亮度将所有颜色的感知亮度调整一致

3.生成完整色阶

色阶的制作方法

1.透明叠色法

透明叠色法是在原来颜色的基础上叠加不同透明梯度的白色/黑色遮罩，由此得到不同梯度的衍生色，该方法实现成本低，无需其他工具配合即可实现，但是操作相对繁琐，当叠加层级较多时可能会导致颜色偏差，首尾丢色严重，有时需要基于实际情况再做微调。

确定最小起点，以95%为例，以主色为中心，前后拓展色阶，以9阶为例，步辐N=4，得出每阶叠加的纯色透明度为95%/N=24.叠加颜色后直接取色器吸色，得到完整色阶

2.tint/shade 色彩系统算法（等序差值）

antDesign发明的tint/shade 色彩系统算法，将这10种颜色依靠公式修改基准色 S 值与 B 值，演算延展出完整的深浅色板。

缺点：需要公式计算，实现相对麻烦

3.工具生成

1）在PhotoShop 的拾色器中使用 Lab 模式下固定色相不变，调节 L 值进行等距取色。

缺点：色相偏移严重，过渡不自然

2）Ant Design 色彩生成算法2.x版本

3）Ant Design 色彩生成算法3.x版本

综合来看 3.x 色板生成算法的实现可以看到，主色的选取很重要，一般主色选取饱和度较高、明度较高的颜色才能更好地匹配这个色板生成算法。

但是这个算法也有一些弊端：

如果主色的饱和度过低，则渐变色板减淡的部分饱和度迅速递减，亮色相差无几，而加深部分饱和度增长缓慢显得色板不够饱和

如果主色的明度过低，则渐变色板加深的部分明度迅速递减，深色部分相差无几，而减淡部分由于明度增长缓慢显得颜色过深。

4）Chroma.js（https://gka.github.io/palettes）可以基于CIELab生成连续色板。建议在使用时关掉「亮度矫正」功能，以保证输入的主题色包含在最终的结果中。

这个工具也有一个缺点，和photoshop拾色器的问题相似，部分色彩在亮度高时，会过饱和以及偏色过多。这时候我们可以人工对其调优，保证亮度的情况下，调整a、b值。

5）定义好了整个色阶中的“中间”阶梯，我们按等差数列向上向下分别取不同数量的阶梯即可，之后借助Chroma.js算法工具帮助我们去做矫正工作。（https://gka.github.io/chroma.js）

在校正过程中我们发现品牌色绿色在生成完整色阶后整体偏灰，这里我们以校正开始前生成的主题色绿色为基准色冲洗能生成色阶。

4.色差验证

在感知均匀的色彩空间内，验证任意两个基准色之间的色差，其目的是为了保障视力正常的用户能够顺利分辨出两个颜色的不同。根据调研7.8 是一个最小可辨识的色差均值，一种说法是Delta E ≥18即可满足要求，另一种是说当两种颜色的空间距离：Delta E ≥30时 能够满足上面的需求，这里我们利用i want hue工具进行色差验证，大部分颜色对的差值都在

30以上最小的也大于18，所以整个色阶是基本符合要求的。

很明显经过重新调配的可视化色板过度均匀柔和。

5.分类色板制作

在分类色板制作前我们首先确定一下色板使用顺序，色板的顺序由我们的品牌调性所决定，使用顺序和面积决定了整体的色板调性，根据品牌调性，现将黄绿色和紫色去掉（和其他色相太过相近）我们将主色蓝色和绿色放在第一位，保证大部分图表能够应用到，为整体的可视化场景奠定一个基调，然后们根据冷暖对比的节奏加入黄色红色两种暖色，在绿色和黄色中间加入灰色进行调和，降低刺激感，接着选取蓝色紫色过渡，随后是橙色，将色彩倾向比较明显的粉色放在最后，为了避免整体色板过暖和整体的产品调性还是偏冷我们再加入中性的冷色绿色调和。

分类色板颜色主要考辨识度的问题，在色差验证环节我们已经验证过任意两个色相之间的区分度，在色相差异的基础上我们通过选取色阶上不同亮度的颜色进一步增加每种颜色之间的差异，形成完整分类色板。我们以主题色所在的相对亮度阶梯为基准，通过明暗交替的方式取色。在进行明暗交替取色时，取更暗还是更明，主要取决于色彩美观度及颜色之间协调性。

五、总结

设计体系的建设不是一蹴而就的，需要不断的迭代和完善，数据可视化色板的推导过程改变了原本感性的配色方式，通过这种方式能够帮助我们判断色彩应用的合理性，减少配色的主观性，对设计工作具有一定的指导意义。