图表配色应先看数据关系：没有大小顺序的类别用定性色板；从低到高的数值用顺序色板；围绕零或目标值比较两侧差异时用发散色板。从这些类型与图例出发，再把它们放到同一张门店经营看板中。用Pixso 的颜色样式与界面设计功能保存角色，可以让同一类别在多个图表里保持一致。
1. 数据可视化调色板类型
在数据可视化中选择调色板类型主要取决于映射到颜色的数据性质。这里先讨论定性、顺序和发散三种常用调色板：
1.1 定性调色板
当变量本质上是分类时，使用定性调色板。分类变量是指带有不同标签而没有固有顺序的变量，如国家、种族和性别。变量的每个可能值都分配有定性调色板中的一种颜色。
定性色板要让需要比较的类别容易区分。类别过多时，先考虑标签、分组或分面图，不要只不断增加相近颜色；是否合并为“其他”，取决于小类别是否仍有业务意义。重复循环颜色会让不同类别看起来像同一组，使用前应对照图例检查。
如下图所示：左侧最小的切片不仅重复了调色板中的颜色，而且彼此之间也很难区分。
数据可视化组件集
定性配色可通过色相与适当的明度差异区分类别，但也要检查背景和线条交叉处。下方折线图用灰色和绿色表示苹果与香蕉，应配合清楚的图例；在线条接近或转换为灰度后，还可加入不同线型或直接标签，不能仅凭“浅色、深色”判断一定容易区分。
数据可视化组件集
1.2 顺序调色板
下方样本是累计收入热力图，不是商品价格表。蓝色色阶用于呈现数值变化，而深灰格表示选中高亮：高亮属于交互状态，不能与数值大小混成一种颜色含义。检查这类图时，要同时核对数值图例与选中状态。
当变量是数字或具有固有的有序值时，则可以使用顺序调色板。有顺序的颜色通常基于亮度和色调产生变化。具有单一色调的顺序调色板示例：
信息图表 UI kits
顺序色板需要让颜色的视觉顺序与数值顺序一致。亮度常用于表达大小，但深色背景并不意味着把原色板机械反转；应把最小值、最大值和中间值放到实际背景上，看相邻等级能否区分，并保持图例方向清楚。
顺序色板也可以改变色相，但应维持可理解的渐进关系。下图的彩虹与红绿热力图可用来检查问题：读者能否仅从图例判断数值顺序，红绿差异是否还能由标签或其他方式区分？颜色种类更多，并不代表数值层级更清楚。
数据可视化组件集
1.3 发散调色板
如果数值变量有特殊的中心值，比如零，那么可以选择发散的调色板。发散调色板可以看作两组顺序色板的组合，其共享端点位于中心值。大于中心的值分配给中心一侧的颜色，而较小的值分配给另一侧的颜色。
发散色板使用两侧可区分的颜色表达相对于中心值的方向。中心可以是零，也可以是明确的业务目标；两端颜色表示偏离的方向与程度。中心是否用浅色，要结合背景和图例判断，不把白色同时用作“零”和“没有数据”。
1.4 离散与连续调色板
顺序和发散色板都可以连续变化，也可以分成若干档。连续变化适合观察渐进趋势；离散档位适合判断区间或业务阈值。若需要比较精确数值，应同时提供可读标签或数据表，不能只靠细微色差。
数据有极端值时，多数数据可能挤在色阶的一小段。可以调整范围、标注极端值，或使用明确的分档；分档宽度不等时，必须在图例中写清每档边界，不能让等宽色块暗示数值区间也相等。
2. 数据可视化配色技巧
2.1 避免过度使用颜色
颜色只在帮助理解时增加。比较单个指标的条形图，可以保持同色，并用位置和长度表达差异；需要突出某个门店时，再给它一个强调色。是否增加颜色并不由“第几个变量”机械决定，而由图表需要表达的关系决定。
下图中，给每根条形随意换色并未增加新的数据含义。把无关条形降为中性色、只突出需要比较的两项，读者更容易注意到讨论的对象。
完整的图标组件
2.2 与图表颜色保持一致
如果仪表板包含了多个图表，则当图表引用同一组变量时，最好在图表之间保持同样的数据可视化配色。如果颜色在图表之间改变了含义，这会使读者难以理解。
完整的图标组件
2.3 利用色彩的意义
可以利用颜色的感知方式来增强可视化效果。一般来说，要避免过高的色彩饱和度和亮度，以减少眼睛疲劳。这也为突出重要的数据留出了空间，与其他数据可视化配色相比，高饱和度和高亮度更吸睛。此外，不同的文化赋予色调不同的含义。例如，红色在某些西方文化中可能与激情或危险有关，但在某些东方文化中可能与繁荣和好运有关。
2.4 关注色盲
不同色觉条件下，部分色相组合可能难以区分。下方红绿图还需要检查标签、线型或形状能否补充方向和类别；不能只靠“红色代表异常、绿色代表正常”。灰度查看有助于发现问题，也应进一步测试实际读图任务。
数据可视化组件集
同一张门店看板，为什么需要三种色板
用一张假设的门店看板同时展示区域、订单量和相对目标差值。差值按“（实际值－目标值）÷目标值”计算；目标为正数时，负值表示未达目标，正值表示超过目标。
| 数据关系 | 示例值 | 颜色怎样分配 |
|---|---|---|
| 区域类别，没有大小顺序 | 华东、华南、华北 | 各区域固定一种可区分颜色，换到另一张图仍保持相同含义 |
| 订单量，数值有高低 | 120、240、360单 | 沿同一方向变化的顺序色板；图例标清低值和高值 |
| 相对目标差值，有明确中心 | -15%、0、+15% | 以0为中心的发散色板，两侧分别表达低于和高于目标 |
| 暂无数据，不是零 | 数据源尚未返回 | 独立标识“暂无数据”，不混入数值色阶 |
筛选后少了一个区域，其他颜色不要换位
若华南在当前日期范围没有结果，华东和华北仍应沿用原来的颜色。不要按当前排序重新分配色板，否则用户切换日期后，同一种颜色会表示不同区域。图例可以说明当前没有数据的类别，或者按页面任务隐藏该项，但不能悄悄改变已有映射。
对顺序色板也应说明范围。如果两张热力图要直接比较，使用共同范围通常更容易理解；若每张图各自缩放范围，就把最小值和最大值分别标明，避免同样深的颜色被误读为同样大的数值。
在设计文件里，将区域颜色、差值正负色和空数据颜色分别命名，避免用“蓝色1、蓝色2”混合不同角色。需要让图表支持更多阅读方式时，可以继续参考图表标签、纹理与数据表的设计方法。
3. 数据可视化配色插件
社区图表资源可以作为结构和样式参考，使用前查看作者的使用说明。下载或可复制不等于开源授权；把示例换成自己的数据后，还要重新检查颜色是否表达了正确关系。
3.1 图片取色
Pixso 的图片取色插件可从图片中提取主色，适合在准备视觉方案时收集配色参考。
图片提取出的颜色适合提供视觉方向，但没有自动建立数据顺序或对比关系。将它用于图表前，仍应把低值、中间值、高值或不同类别实际放进去，检查是否会混淆。
3.2 色板
色板资源包含 HarmonyOS、TDesign、Arco Design、Ant Design、Material Design 等设计系统的颜色参考。选择后仍要检查它们在当前背景上的区分度，以及是否适合表达本图的数据关系；界面主色不能直接替代数值色阶。
