Leonardo 如何为数据可视化创建色阶?
Leonardo 为数据可视化提供的是感知均匀的连续色阶与发散色阶,并且允许你在生成时控制色差、对比度和色盲安全性。它适合需要为图表、热力图、地图等场景制作配色、又希望颜色在感知上过渡均匀而不是在数值上均匀的设计师和工程师。需要说明的是,Leonardo 是 Adobe 的开源项目,页面未提及价格或登录限制,因此本文只描述其功能,不对收费或注册要求做推断。
Leonardo 在数据可视化配色上提供什么
根据网站首页的描述,Leonardo 的核心能力包括:
- 数据可视化色阶:对感知均匀的连续(sequential)和发散(diverging)色阶提供高级控制。
- 色盲安全配色:可自动循环你的颜色来生成色盲安全调色板。
- 高级控制选项:允许显示色差更大的颜色,或只保留满足 3:1 对比度最低要求的颜色。
- 对比度与色差评估:可比较两种颜色的对比度(支持 alpha 透明度),并针对每种色觉缺陷类型评估两色之间可测量的色差。
- 导出与交付:可将主题或色阶下载为 SVG 文件,直接粘贴进设计工具;也能输出给工程师使用的主题参数、CSS 自定义属性和符合 W3C 工作规范的 Design Tokens。
这些能力组合起来,正好覆盖了数据可视化配色最常遇到的三个问题:色阶是否感知均匀、色盲用户能否分辨、颜色之间是否有足够对比。
创建数据可视化色阶的一般流程
网站没有逐步列出操作菜单,但根据其功能描述,可以按以下思路使用:
- 进入数据可视化色阶工具:首页的 “Create datavis colors” 入口对应数据可视化配色功能。
- 选择色阶类型:连续色阶用于表示单向递增的数值(如密度、温度),发散色阶用于有中间基准的数据(如正负偏差)。
- 设定颜色与目标:Leonardo 的颜色生成基于目标对比度,色块由目标对比度生成,因此你不再需要手动逐个检查对比度;控制项同时配有明度输入,也可以按目标明度来定义色块。
- 调整感知均匀性:可从多种色彩空间中选择,用来创建感知上平衡的色阶。
- 检查色盲安全性:利用色差评估功能,查看每种色觉缺陷类型下颜色之间的可测量差异。
- 导出:将色阶下载为 SVG,或复制粘贴到设计工具;需要交付给工程时,输出主题参数、CSS 自定义属性或 Design Tokens。
预期结果:得到一组在感知上过渡均匀、对比度可控、并经过色盲安全性评估的数据可视化色阶,可直接用于设计稿或代码。
关键控制点与选择条件
| 控制维度 | 作用 | 什么时候用 |
|---|---|---|
| 目标对比度 | 按对比度生成色块,省去手动检查 | 需要保证色块与背景或相邻色块可区分时 |
| 目标明度 | 按明度定义色块 | 希望色阶在明暗上均匀递进时 |
| 色彩空间 | 创建感知平衡的色阶 | 避免色阶在视觉上“挤在一端”时 |
| 色差更大 | 显示颜色差异更大的颜色 | 类别较多、需要更强区分度时 |
| 3:1 对比度最低要求 | 只保留满足最低对比度的颜色 | 需要满足无障碍对比要求时 |
| 自动循环 | 生成色盲安全调色板 | 分类数据需要色盲用户也能区分时 |
选择时的一个实用判断:连续数据优先看感知均匀性和明度递进,分类数据优先看色差和色盲安全性。Leonardo 把这两类需求分别放在了色阶控制和色盲安全功能里。
常见卡点
- 把感知均匀当成数值均匀:色阶在 RGB 数值上等距,视觉上并不等距。Leonardo 提供多种色彩空间正是为了解决这一点,选错色彩空间会让色阶看起来不均匀。
- 忽略色盲安全:默认配色对红绿色觉缺陷用户可能不可分辨。应使用色差评估功能逐类型检查,而不是凭感觉判断。
- 对比度与色差混为一谈:对比度衡量的是明暗差异,色差衡量的是颜色差异。数据可视化中两者都重要,Leonardo 分别提供了对应工具。
- 导出格式选错:设计阶段用 SVG 或直接粘贴,工程交付用主题参数、CSS 自定义属性或 Design Tokens,按下游需求选择。
想进一步了解
网站建议访问 Getting started 部分,或前往 GitHub 查看更详细的使用方法;Articles 部分还收录了介绍 Leonardo 及其核心概念的出版物。Leonardo 是 Adobe 开源项目,可以参与改进。