https://www.uisdc.com/derived-visual-color

本文分享个人搭建青云 QingCloud 可视化色彩体系过程中的一些经验。（阅读此文需要一定的色彩空间知识作为基础，否则有些难啃）

基础科普：

https://www.uisdc.com/color-system

一、前言

1. 背景

目前平台上使用了三套组件库 A、B、C，A 是最原始的组件库，基于此扩展了 B 组件库，并对颜色进行了改进，C 是全新的组件库，引用了 Token 及其他新的前端技术栈。三套组件库独立存在，应用在庞大的云平台各个业务产品中，发展趋势为使用 C 组件库开发日后新的业务，并逐步替换老的业务。

关于颜色，B 组件库采用 HSB 色彩空间调色并进行人工调整，C 组件库沿用 B 组件库的色板并对部分颜色进行了优化。

关于可视化组件，平台使用第三方开源图表库 Echarts 进行简单定制化。

目前的需求是基于 Echarts 系统化定制出一套图表类型较全面、交互较统一、使用规范较明确的可视化组件库。因此，确定一套可视化颜色系统成为当务之急，经过简单的调研得出两套解决方案：

1. 方案一：沿用组件库 C 的颜色；
2. 方案二：基于适用于可视化场景的色彩空间确定一套全新的颜色。

不难判断的是，采用方案一，要面临的问题就是：

1. 色彩空间落后，不适用于可视化场景；
2. 大量人工调整，无法满足日后自动化交付场景所需；
3. 相关算法及推导过程丢失，设计侧无法进行科学化、可持续化迭代。

且在调研过程中我们发现，可视化色彩与设计系统色彩并无必要的理由进行捆绑：

1. 一方面，可视化场景对色彩的要求要远高于设计系统组件库，因其主要通过颜色来识别数据差异，所以，对颜色的亮度、对比度、色差、和谐度等要求非常高；
2. 另一方面，可视化组件库的适用产品类型通常是多种多样的，夸张点讲就是任何类型的产品中都可能会用到可视化。这一点就需要可视化组件库拥有很强的风格兼容性，这就导致了其颜色必须兼容性强，并非随便拿一套设计系统色彩过来就能满足的；