leonardocolor.io 暂未发现付费内容

Leonardo 是 Adobe 旗下的一个开源在线工具，用来创建、管理和分享面向用户界面与数据可视化的无障碍颜色系统。它的核心特点是以目标对比度为起点生成颜色，而不是先选颜色再手动检查对比度。如果你在做设计系统、需要同时维护亮色/暗色主题，或者要为图表生成感知均匀的色阶，它比较对口；如果只是偶尔挑一两个颜色，用它的价值不大。

它解决的核心问题

传统配色流程是先定色值，再逐个验证对比度是否达标，改一处往往要连带调整多处。Leonardo 把顺序反过来：你给定目标对比度，工具直接生成满足该对比度的色板。官方描述里提到，色板由目标对比度生成，控件同时配有明度输入，所以你也可以改用目标明度来定义色板。这样就省去了手工核对对比度的环节。

主要能力

• 基于对比度的颜色生成：按目标对比度产出色板，无需手动检查。
• 自适应主题：官方称可在极短时间内改变亮度、对比度和饱和度，用于快速生成暗色模式等变体。
• 多种色彩空间：可选择不同色彩空间来构建感知上更均衡的色阶。
• 数据可视化色阶：对感知均匀的连续型和发散型色阶提供进阶控制。
• 色盲安全调色板：自动轮换颜色生成色盲安全配色，进阶选项可加大颜色差异，或只保留达到 3:1 最低对比度的颜色。
• 颜色对比与差异评估：支持带 alpha 透明度的两色对比检查，并针对每种色觉缺陷类型评估两色之间可测量的颜色差异。
• 颜色分析：提供图表和 3D 模型来评估主题。

输出与交付

Leonardo 面向设计和工程两端都提供了出口：

最后一项值得单独说明：Leonardo 的 npm 模块可以把自适应主题能力交给最终用户，让用户自己改变体验的对比度、亮度和饱和度，这对无障碍和个性化场景比较有用。

适合谁用

• 维护设计系统的团队，需要一套可分享、可复用的无障碍颜色方案。
• 需要快速产出暗色模式或高对比度变体的产品。
• 需要为图表生成感知均匀色阶的数据可视化场景。
• 希望把主题调节权交给终端用户的开发者。

使用前需要知道

Leonardo 是 Adobe 的开源项目，可以参与改进。官方建议从 Getting started 部分入手，想了解更详细用法可访问 GitHub，另外 Articles 部分收录了介绍其核心概念的相关文章。当前资料未提及价格或登录要求，因此无法判断是否需要付费或注册，使用前建议以官网实际页面为准。

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 这三类输出。

Leonardo 通过两条路径帮助创建色盲安全的颜色：一是自动循环调色板中的颜色，生成对色觉缺陷更友好的配色；二是对任意两种颜色逐一计算各色觉缺陷类型下的可测量色差，让"安全"从主观判断变成可核对的数值。它同时支持带 alpha 透明度的对比度检查，并提供高级控制，让你选择显示更大色差的颜色，或只保留满足 3:1 对比度最低要求的颜色。适合正在搭建设计系统、需要同时兼顾无障碍与数据可视化的界面设计者和前端工程师。

核心机制：色差评估而不是"看起来差不多"

Leonardo 的色盲安全判断建立在可测量的色差之上，而不是靠设计者肉眼比对。

• 对每一组颜色，工具会针对每种色觉缺陷类型分别评估两者之间的色差。
• 色差越大，说明在该类色觉缺陷下两种颜色越容易被区分。
• 因此"色盲安全"在 Leonardo 里是一个可比较的数值结果，而不是一个开关式的结论。

这意味着你可以把配色方案放进工具里逐一验证，而不是凭经验猜测哪两个颜色会混淆。

自动循环生成色盲安全调色板

Leonardo 可以自动循环调色板中的颜色，生成对色觉缺陷更友好的配色组合。它的价值在于：当你已经有一组品牌色或主题色，但不确定它们在色盲视角下是否互相冲突时，循环机制会重新排列或调整这些颜色的使用方式，减少相邻颜色难以区分的情况。

配合高级控制，你可以进一步约束结果：

3:1 是这里明确给出的对比度下限，适用于需要颜色本身承担区分职责的元素（例如图表系列、状态标识）。正文文字的可读性要求通常更高，需要另行核对。

对比度检查与 alpha 透明度支持

Leonardo 提供对比度检查工具，用于核对两种颜色之间的对比度，并且支持 alpha 透明度。这一点在实际项目中很关键：

• 半透明遮罩、悬浮层、渐变叠加后的颜色，实际呈现的对比度与原始色值不同。
• 支持 alpha 后，你可以按真实叠加结果来判断是否达标，而不是只看不透明的色值。

具体操作路径是进入 Leonardo 的 Color toolbox（工具箱）中的对比度检查工具，输入两种颜色后读取结果。工具会同时给出色觉缺陷类型下的色差评估，把"对比度是否够"和"色盲是否分得清"两件事放在一起看。

与整体工作流的衔接

色盲安全不是孤立环节，Leonardo 的其他能力可以让它落在实际交付物上：

• 基于对比度生成颜色：色板按目标对比度生成，不需要事后手动逐个检查对比度。
• 自适应主题：可快速调整亮度、对比度和饱和度，便于同时产出浅色与深色模式。
• 导出与交付：主题或色阶可下载为 SVG，直接粘贴进设计工具；面向工程侧可输出 @adobe/leonardo-contrast-colors 的主题参数、CSS 自定义属性，以及遵循 W3C 工作规范的 Design Tokens。
• 数据可视化色阶：对感知均匀的连续型与发散型色阶提供更细的控制，适合图表配色。

Leonardo 是 Adobe 的开源项目，想深入了解可查阅站内的 Getting started 部分或 GitHub 仓库，Articles 部分也收录了关于其核心概念的公开文章。

使用时的几个注意点

• 色差评估给出的是可测量结果，但"多大色差才算安全"取决于你的使用场景，需要结合 3:1 这类下限自行设定标准。
• 自动循环生成的是候选方案，仍需用对比度与色差工具复核，尤其是颜色同时承担文字与图形职责时。
• 导出为 SVG 或 Design Tokens 后，实际渲染环境（字体、背景、透明度叠加）可能改变最终对比度，交付前建议在真实界面里再验证一次。

Leonardo 的核心做法是：你不再先挑一个颜色、再去检查它和背景的对比度是否达标，而是反过来，先设定目标对比度，由工具反推出满足该比值的色板。它由 Adobe 开源，面向界面设计和数据可视化的可访问配色系统。如果你需要让一组颜色在浅色、深色、不同亮度下都稳定满足对比度要求，这种生成方式会比手动调色更省事；如果你只是想要一个好看的渐变色，它并不是为此设计的。

生成机制：对比度是输入，不是检查项

传统取色流程是「选色 → 测对比度 → 不达标 → 再调」，Leonardo 把顺序倒过来：

• 你给定一个基准色（例如品牌主色）和目标对比度比值。
• 工具按该比值生成对应色阶，色板天然落在目标对比度上。
• 因此不需要生成后再逐个手动核对对比度。

页面明确说明「色板由目标对比度生成，因此你不再需要手动检查对比度」。同时，每个控制项都配有亮度输入，也就是说你也可以改用目标亮度来定义色板，而不是对比度。这两条路径对应不同的设计习惯：做无障碍界面时用对比度更直接，做视觉层次时用亮度更顺手。

感知均衡的色阶靠色彩空间实现

同样是「从浅到深排 10 个色」，在不同色彩空间里算出来的中间色并不一样。Leonardo 允许你从多种色彩空间中选择，用来创建感知均衡的色阶——也就是相邻色之间的视觉跨度看起来均匀，而不是某些区间挤在一起、某些区间跳得很大。

这对可访问性有实际影响：感知均衡的色阶在切换明暗主题时，颜色之间的关系更可预测，不容易出现「某个色阶在深色模式下突然变得难以辨认」的情况。

自适应主题：一次定义，快速切换明暗

Leonardo 的 adaptive themes（自适应主题）让你在比以往更短的时间内改变亮度、对比度和饱和度。页面用「Dark mode in seconds」来描述这一点。

它的价值在于：你不需要为深色模式重新配一套色，而是在同一套主题参数上调整这三个维度，色板会随之重新生成。对于需要同时维护浅色/深色、甚至多套对比度档位的设计系统，这能显著减少重复劳动。

输出与落地方式

Leonardo 不只是给你看颜色，还提供可直接进入工程和设计流程的产物：

此外，它的 npm 模块可以用于给终端用户提供自适应主题——让用户自己调整整体对比度、亮度和饱和度。这对有低视力需求或偏好高对比度界面的用户是有意义的包容性设计手段。

数据可视化与色盲安全

除了界面配色，Leonardo 也覆盖数据可视化场景：

• 对感知均匀的顺序色阶和发散色阶提供高级控制。
• 自动轮换颜色以生成色盲安全的调色板。
• 高级控制可以显示色差更大的颜色，或只保留满足 3:1 最低对比度的颜色。
• 提供两色对比度检查，支持 alpha 透明度。
• 针对每种色觉缺陷类型，评估两色之间可测量的色差，而不是靠猜。

判断它是否适合你

适合的情况：

• 你的界面或图表需要满足对比度可访问性要求，且颜色数量多、需要成体系管理。
• 你要同时维护浅色/深色模式，或需要让用户自行调节对比度。
• 你需要把配色以 Design Tokens、CSS 变量或 npm 参数的形式交给工程实现。

不太适合的情况：

• 你只需要临时挑一两个颜色，不涉及色阶或主题体系。
• 你的目标纯粹是视觉风格探索，不关心对比度约束。

Leonardo 是 Adobe 的开源项目，想深入了解可以从其 Getting started 部分或 GitHub 入手，Articles 部分还有关于其核心概念的公开文章。

Leonardo 为数据可视化提供的是感知均匀的连续色阶与发散色阶，并且允许你在生成时控制色差、对比度和色盲安全性。它适合需要为图表、热力图、地图等场景制作配色、又希望颜色在感知上过渡均匀而不是在数值上均匀的设计师和工程师。需要说明的是，Leonardo 是 Adobe 的开源项目，页面未提及价格或登录限制，因此本文只描述其功能，不对收费或注册要求做推断。

Leonardo 在数据可视化配色上提供什么

根据网站首页的描述，Leonardo 的核心能力包括：

• 数据可视化色阶：对感知均匀的连续（sequential）和发散（diverging）色阶提供高级控制。
• 色盲安全配色：可自动循环你的颜色来生成色盲安全调色板。
• 高级控制选项：允许显示色差更大的颜色，或只保留满足 3:1 对比度最低要求的颜色。
• 对比度与色差评估：可比较两种颜色的对比度（支持 alpha 透明度），并针对每种色觉缺陷类型评估两色之间可测量的色差。
• 导出与交付：可将主题或色阶下载为 SVG 文件，直接粘贴进设计工具；也能输出给工程师使用的主题参数、CSS 自定义属性和符合 W3C 工作规范的 Design Tokens。

这些能力组合起来，正好覆盖了数据可视化配色最常遇到的三个问题：色阶是否感知均匀、色盲用户能否分辨、颜色之间是否有足够对比。

创建数据可视化色阶的一般流程

网站没有逐步列出操作菜单，但根据其功能描述，可以按以下思路使用：

1. 进入数据可视化色阶工具：首页的 “Create datavis colors” 入口对应数据可视化配色功能。
2. 选择色阶类型：连续色阶用于表示单向递增的数值（如密度、温度），发散色阶用于有中间基准的数据（如正负偏差）。
3. 设定颜色与目标：Leonardo 的颜色生成基于目标对比度，色块由目标对比度生成，因此你不再需要手动逐个检查对比度；控制项同时配有明度输入，也可以按目标明度来定义色块。
4. 调整感知均匀性：可从多种色彩空间中选择，用来创建感知上平衡的色阶。
5. 检查色盲安全性：利用色差评估功能，查看每种色觉缺陷类型下颜色之间的可测量差异。
6. 导出：将色阶下载为 SVG，或复制粘贴到设计工具；需要交付给工程时，输出主题参数、CSS 自定义属性或 Design Tokens。

预期结果：得到一组在感知上过渡均匀、对比度可控、并经过色盲安全性评估的数据可视化色阶，可直接用于设计稿或代码。

关键控制点与选择条件

选择时的一个实用判断：连续数据优先看感知均匀性和明度递进，分类数据优先看色差和色盲安全性。Leonardo 把这两类需求分别放在了色阶控制和色盲安全功能里。

常见卡点

• 把感知均匀当成数值均匀：色阶在 RGB 数值上等距，视觉上并不等距。Leonardo 提供多种色彩空间正是为了解决这一点，选错色彩空间会让色阶看起来不均匀。
• 忽略色盲安全：默认配色对红绿色觉缺陷用户可能不可分辨。应使用色差评估功能逐类型检查，而不是凭感觉判断。
• 对比度与色差混为一谈：对比度衡量的是明暗差异，色差衡量的是颜色差异。数据可视化中两者都重要，Leonardo 分别提供了对应工具。
• 导出格式选错：设计阶段用 SVG 或直接粘贴，工程交付用主题参数、CSS 自定义属性或 Design Tokens，按下游需求选择。

想进一步了解

网站建议访问 Getting started 部分，或前往 GitHub 查看更详细的使用方法；Articles 部分还收录了介绍 Leonardo 及其核心概念的出版物。Leonardo 是 Adobe 开源项目，可以参与改进。