Leonardo 是什么网站?
Leonardo 是 Adobe 旗下的一个开源在线工具,用来创建、管理和分享面向用户界面与数据可视化的无障碍颜色系统。它的核心特点是以目标对比度为起点生成颜色,而不是先选颜色再手动检查对比度。如果你在做设计系统、需要同时维护亮色/暗色主题,或者要为图表生成感知均匀的色阶,它比较对口;如果只是偶尔挑一两个颜色,用它的价值不大。
它解决的核心问题
传统配色流程是先定色值,再逐个验证对比度是否达标,改一处往往要连带调整多处。Leonardo 把顺序反过来:你给定目标对比度,工具直接生成满足该对比度的色板。官方描述里提到,色板由目标对比度生成,控件同时配有明度输入,所以你也可以改用目标明度来定义色板。这样就省去了手工核对对比度的环节。
主要能力
- 基于对比度的颜色生成:按目标对比度产出色板,无需手动检查。
- 自适应主题:官方称可在极短时间内改变亮度、对比度和饱和度,用于快速生成暗色模式等变体。
- 多种色彩空间:可选择不同色彩空间来构建感知上更均衡的色阶。
- 数据可视化色阶:对感知均匀的连续型和发散型色阶提供进阶控制。
- 色盲安全调色板:自动轮换颜色生成色盲安全配色,进阶选项可加大颜色差异,或只保留达到 3:1 最低对比度的颜色。
- 颜色对比与差异评估:支持带 alpha 透明度的两色对比检查,并针对每种色觉缺陷类型评估两色之间可测量的颜色差异。
- 颜色分析:提供图表和 3D 模型来评估主题。
输出与交付
Leonardo 面向设计和工程两端都提供了出口:
| 输出形式 | 用途 |
|---|---|
| SVG 文件 | 下载主题或色阶,直接粘贴进设计工具 |
| CSS 自定义属性 | 前端直接使用 |
| Design Tokens(遵循 W3C 工作规范) | 接入设计令牌体系 |
@adobe/leonardo-contrast-colors 主题参数 |
供工程侧集成 |
| npm 模块 | 让终端用户自行调整整体对比度、亮度和饱和度 |
最后一项值得单独说明:Leonardo 的 npm 模块可以把自适应主题能力交给最终用户,让用户自己改变体验的对比度、亮度和饱和度,这对无障碍和个性化场景比较有用。
适合谁用
- 维护设计系统的团队,需要一套可分享、可复用的无障碍颜色方案。
- 需要快速产出暗色模式或高对比度变体的产品。
- 需要为图表生成感知均匀色阶的数据可视化场景。
- 希望把主题调节权交给终端用户的开发者。
使用前需要知道
Leonardo 是 Adobe 的开源项目,可以参与改进。官方建议从 Getting started 部分入手,想了解更详细用法可访问 GitHub,另外 Articles 部分收录了介绍其核心概念的相关文章。当前资料未提及价格或登录要求,因此无法判断是否需要付费或注册,使用前建议以官网实际页面为准。