Leonardo 如何导出颜色并交付给工程师?

Leonardo 把颜色系统拆成两条交付路径：面向设计师的 SVG 下载与复制粘贴，面向工程师的代码参数与 Design Tokens。如果你需要把一套无障碍配色从设计稿落到代码里，可以直接用它的导出功能，不必手工换算对比度。Leonardo 是 Adobe 的开源项目，更多使用细节可在 GitHub 和 Getting started 部分找到。

交付给设计师：SVG 与复制粘贴

Leonardo 支持把主题或色阶下载为 SVG 文件，也可以直接复制粘贴进你常用的设计工具。这条路径适合把已经调好的色板搬进 Figma、Sketch 等工具继续排版，不需要重新在工具里逐个取色。

适用条件是：你已经在 Leonardo 里确定了主题或色阶，且只需要静态色值。如果后续还要改对比度或亮度，回到 Leonardo 重新导出比在设计工具里手动调更可靠。

交付给工程师：参数、CSS 变量与 Design Tokens

Leonardo 为工程师提供三类输出：

• 主题参数：面向 @adobe/leonardo-contrast-colors 的主题参数，便于在代码里按同一套规则生成颜色。
• CSS 自定义属性：可直接用于前端样式。
• Design Tokens：遵循 W3C 工作规范的 Design Tokens 格式。

这三类输出的共同点是保留了“按目标对比度生成”的逻辑，而不是只给一堆死色值。工程师拿到后可以在构建流程里复用，减少设计和实现之间的偏差。

让最终用户自己调：npm 模块

Leonardo 的 npm 模块可以用于给最终用户提供包容性、自适应的主题。用户能够调整整体对比度、亮度和饱和度。

这条路径适合产品需要“个性化可访问性”的场景：与其为每种偏好预先做一套主题，不如让用户在自己的设备上调整。前提是你的项目愿意引入该 npm 模块并接入主题切换逻辑。

开源与获取更多细节

Leonardo 是 Adobe 的开源项目，你可以参与改进。想深入了解使用方法，可以访问 Getting started 部分，或到 GitHub 查看更详细的说明；Articles 部分还收录了关于 Leonardo 及其核心概念的公开文章。

如果你的目标只是导出一次色板，SVG 下载就够了；如果要把无障碍配色变成可持续维护的系统，优先看主题参数、CSS 自定义属性和 Design Tokens 这三类输出。