- 分类：
- Workflow Tips
- 摘要：
- 通过Adobe色彩轮工具，深入理解色彩和谐规则（互补、类似、三色组）与对比度要求，一步步创建符合无障碍标准的调色板，并针对色盲适配、色彩冲突等常见问题提供高效解决方案。
Adobe Color Wheel 是位于 color.adobe.com/create/color-wheel 的免费网页工具，能依据配色规则生成五色调色板、提供对比度检查器和色盲模拟功能，并支持直接保存到 Creative Cloud 图库。基本色板创建无需订阅，但品牌工具包（Brand Kits）等 Adobe Express 高级功能则需要付费。
Adobe Color Wheel 到底收不收费——免费与付费区别
许多资料都说 Adobe Color Wheel 是免费工具，就其核心功能而言确实如此。放置在 color.adobe.com/create/color-wheel 的色轮生成器本身无需任何订阅或付费即可使用。你可以选择基色、应用配色规则、生成五色调色板、运行对比度检查器、使用色盲模拟，所有这些操作都是免费的。访问色轮甚至不需要 Adobe ID，但保存色板仍需要免费 Adobe 账户。
免费与付费的分界线在于 Adobe Express 的高级工作流。将色板保存到品牌工具包（Brand Kit）并在 Adobe Express 设计中自动应用，这需要付费订阅。下表说明了哪些功能免费，哪些需要付费。
| 功能 | 免费 | 付费 / 高级 |
|---|---|---|
| 色轮生成器 | ✓ 完整访问 | — |
| 配色规则（全部 7 种） | ✓ 完整访问 | — |
| 对比度检查器（WCAG） | ✓ 完整访问 | — |
| 色盲模拟 | ✓ 完整访问 | — |
| 从图片提取色板 | ✓ 完整访问 | — |
| 保存到 Creative Cloud 图库 | ✓（需免费账户） | — |
| 保存到品牌工具包（Adobe Express） | — | ✓ 需订阅 |
| 在 Adobe Express 中自动应用色板 | — | ✓ 需订阅 |
正如一位 Reddit 用户所说，该工具的核心功能“无需订阅即可免费使用”。付费层只在你依赖 Adobe Express 品牌工具包和自动品牌工作流时才重要。
如何访问 Adobe Color Wheel 工具
Adobe Color Wheel 位于 color.adobe.com/create/color-wheel。它是一个完全基于网页的交互工具——无需下载、无需安装、没有应用。你可以在任何现代浏览器中使用：Chrome、Firefox、Safari 和 Edge 都可以运行良好。
使用色轮本身不需要 Adobe 账户。只有在你想将色板保存到 Creative Cloud 图库以便在 Photoshop、Illustrator 或 Adobe Express 中使用时，才需要账户。该工具也能在移动浏览器上运行，不过界面针对桌面屏幕做了优化。
Adobe Color Wheel 界面——圆形渐变让你选择基色，然后工具围绕它生成完整色板。
进入页面后，你会看到左边有一个圆形色轮，右边有一组色块。色轮是可交互的：点击任意位置会选中新的基色，色块会根据你选择的配色规则实时更新。
七种配色规则及如何选择
Adobe Color Wheel 的核心在于其应用**配色规则（Color Harmony Rules）**的能力。选择基色和规则后，工具会根据建立的颜色理论关系自动生成五色调色板。每种规则产生不同的视觉效果，服务于不同的设计目的。
以下是工具中全部七种配色规则，以及使用建议。用任何规则创建色板后，最好用色盲模拟器测试一下——这一步常被跳过，但能避免后期大量返工。
单色（Monochromatic） 使用单一色相，通过饱和度和明度变化产生色板。营造平静、统一的视觉效果，整体感强。 适用于注重信任的品牌——蓝色单色色板很适合金融、医疗或法律服务。
邻近色（Analogous） 使用色轮上相邻的颜色。产生和谐、低对比度的色板，感觉自然舒适。 适合自然主题设计——绿色、蓝绿色和黄色能模仿户外环境。
互补色（Complementary） 选择色轮上相对的颜色。带来高对比和充满活力的视觉效果。 非常适合行动呼吁按钮——蓝色和橙色是经典的高对比组合。
分裂互补（Split Complementary） 取一种颜色加上其互补色两侧的两种颜色。提供强对比，但比纯互补色张力小。 适用于需要对比但又不想太刺眼的设计，比如编辑排版。
三角色（Triadic） 将三种颜色均匀分布在色轮上（间隔 120°）。在保持和谐的同时提供平衡的多样性。 适合活泼、充满能量的设计——比如儿童产品或活动品牌。
四色互补（Tetradic / Double Complementary） 形成两对互补色，共四种颜色。非常丰富且有表现力，但需要仔细平衡以避免视觉混乱。 适合复杂插画、多样化品牌系统，或需要宽广色域的项目。
方块色（Square） 与四色互补类似，但四种颜色均匀分布（间隔 90°）。产生复杂、鲜艳的色板，具有平衡多样性。 适合需要多种元素且无单一色彩主导的复杂设计。
选择三角色规则的 Adobe Color Wheel——三个均匀分布的颜色出现在色轮上，下方显示五个色块（含变化色）及其 RGB 和十六进制值。
实用技巧： 确定配色规则后，逐个切换模拟器面板中的色盲模式（红色盲、绿色盲、蓝色盲、全色盲）。如果色板失去对比度或某些颜色难以区分，在定稿前调整饱和度或明度。仅此一步就能显著改善可及性。
逐步操作：使用对比度检查器满足可达性标准
Adobe Color Wheel 内置对比度检查器，可评估前景/背景颜色对是否符合 WCAG（网页内容可及性指南）标准。对于任何用于网页或 UI 设计的色板，这一步至关重要。
操作步骤如下：
- 打开对比度检查器面板——在 Adobe Color Wheel 界面中，可从色轮下方的控制区找到。
- 选择一种前景色（通常是文字）和一种背景色（色板中的某个色块）。工具会显示两者之间的对比度比率。
- 对照 WCAG 阈值检查结果： AA 合规要求普通文字最低比率 4.5:1，AAA 合规要求 7:1。大号文字（24 像素以上或加粗 19 像素以上）在 3:1 即可满足 AA。
- 如果比率不达标，调整颜色——加深文字色或加亮背景色，直到工具显示通过。
示例： 浅蓝色 #A0C4FF 搭配白色 #FFFFFF ——对比度比率约为 1.6:1。不满足 AA 和 AAA。加深蓝色或使用其他背景以达到 4.5:1 阈值。
以可达性为先的工作流
在保存任何色板前，将每一组文字与背景的搭配都经过对比度检查器测试。色块预览中看起来很漂亮的色板，应用到真实界面时可能严重不达标。对比度检查器不是事后补充，而是色板创建的核心环节。
Adobe Color 中的定制色板（五个色块）——从该界面可轻松访问对比度检查器和色盲模拟。
如何从图片创建色板
除了色轮，Adobe Color 还提供了基于图片的色板生成器，位于 color.adobe.com/create/image。上传任何照片，工具会提取 3–5 种主要颜色，作为新色板的基础。
工作原理：
- 访问
color.adobe.com/create/image，上传一张照片（JPG、PNG 或其他受支持格式）。 - 工具分析图片，将主要颜色以色块和十六进制代码的形式显示出来。
- 以提取的色块为起点——在色轮上微调，并在定稿前用对比度检查器测试。
实际场景： 你正在为一家咖啡店设计品牌标识。上传一张烘焙咖啡豆的照片。工具返回暖棕色、深巧克力色和奶油色。以这些颜色为核心色板，然后在色轮上精修，并测试可及性。
羚羊峡谷照片与自动提取的四色调色板——工具会显示定义该图像的主要色调。
如何保存和导出色板
保存到 Creative Cloud 图库
色板满意后，点击 Adobe Color Wheel 界面中的**「保存（Save）」**按钮。为色板命名，选择或创建一个 Creative Cloud 图库。之后该色板会自动出现在 Photoshop、Illustrator 和 Adobe Express 中——只要你使用正确的 Adobe ID 登录。
重要： 如果保存的色板在应用中不显示，请确认你在所有工具中登录了同一个 Adobe ID。这是一个常被忽略的细节，会导致混淆。（完整解决方法见下方故障排查部分。）
导出为 .ASE 文件用于非 Adobe 软件
Adobe Color 允许你将色板下载为 .ASE（Adobe Swatch Exchange）文件。这是一种标准格式，可导入众多 Adobe 生态之外的设计工具：
- Affinity Designer 和 Affinity Photo——通过色板面板导入 .ASE 文件。
- Procreate——可通过色板菜单导入 .ASE 文件。
- Web 开发——将 .ASE 颜色转换为 CSS 自定义属性或变量，用于代码库。
免费与付费保存选项
使用 Adobe 账户将色板保存到 Creative Cloud 图库是免费的。但保存到品牌工具包（Brand Kit）或使用 Adobe Express 高级工作流中的自动应用功能需要付费订阅。在决定订阅前，评估你是否需要这些功能。
常见 Adobe Color Wheel 故障排查
Adobe 社区论坛上用户报告了色轮工具的几个常见问题。以下是出现频率最高的问题及解决方法。
指针圈丢失——“选择器圈无法拖动”
症状： 选择器圆圈移出色轮范围，界面变灰，无法将圆圈拖回色轮。这似乎是一个 UI 渲染故障，部分用户通过正常浏览器操作无法解决。
尝试以下方法：
- 强制刷新页面——Windows 按
Ctrl+F5，Mac 按Cmd+Shift+R。 - 禁用浏览器扩展——广告拦截、隐私插件和脚本拦截可能会干扰工具的 JavaScript。
- 使用隐身/无痕窗口打开工具——排除缓存脚本或扩展冲突。
- 更新浏览器至最新版本。
- 换用其他浏览器——如果 Chrome 不行，试试 Firefox 或 Edge。
Adobe 社区关于此问题的主题已关闭，官方未给出正式解决方案。因此如果以上方法都不行，可考虑换一个浏览器作为变通。
已保存色板丢失——颜色未在图库中显示
症状： 保存到 Creative Cloud 图库的颜色主题在 Photoshop、Illustrator 或 Adobe Color 图库视图中不出现。
原因： 2020 年 8 月 26 日的一次性能更新改变了图库加载方式——色板确实已保存，但缓存可能不会立即显示。Adobe 社区支持人员记录了此问题。
官方修复方法：
- 刷新页面，等待几秒钟让缓存重建。
- 在图库页面点击**「加载更多（Load More）」**以获取更多项目。
- 在特定图库文件夹内点击**「显示更多（Show More）」**以展开内容。
- 确认你的 Adobe ID——确保你登录的是保存色板时使用的同一账户。
界面变灰——整个页面无响应
症状： 整个 Adobe Color 页面无响应，大部分控件变灰。这可能伴随“指针圈丢失”问题出现，也可能独立出现。
尝试以下方法：
- 强制刷新页面（
Ctrl+F5/Cmd+Shift+R）。 - 临时禁用广告拦截和脚本拦截扩展。
- 在私密浏览会话中打开工具，以排除扩展干扰。
- 如果问题依旧，换用其他浏览器或设备。
关于未解决问题
“指针圈丢失”和“界面变灰”问题在 Adobe 社区均被报告过，相关主题已关闭，未提供永久修复。若遇到这些问题，以上方法是目前最佳的变通方案。
使用色盲模拟器为所有人设计
Adobe Color Wheel 内置**色盲模拟（Color Blindness Simulator）**功能，可显示你的色板在不同类型色觉缺陷者眼中的效果。这是极为重要的可达性工具，应成为每个色板创建工作流的一部分。
使用方法：
- 从工具界面打开模拟器（通常是一个小眼睛图标或标注为“色盲”（Color Blindness）的下拉菜单）。
- 选择一种缺陷类型预览：红色盲（Protanopia，减少对红色的敏感度）、绿色盲（Deuteranopia，减少对绿色的敏感度）、蓝色盲（Tritanopia，减少对蓝色的敏感度） 或 全色盲（Achromatopsia，完全丧失色觉）。
- 工具会重新绘制色板，展示在该情况下的效果。如果对比度崩溃或颜色变得难以区分，调整饱和度或明度。
与对比度检查器联合使用： 在正常视觉下通过 AA 的色板，在色盲模拟中可能不通过。创建色板后，逐个切换每种缺陷模式。如果原本区分明显的颜色对变得几乎相同，调整其中一种颜色，然后重新检查对比度比率。这种组合方法可确保你的色板对最广泛的群体有效。
接下来做什么——在真实项目中应用色板
色板保存到 Creative Cloud 后，会自动出现在 Photoshop、Illustrator 和 Adobe Express 中。以下是验证色板在实际设计中可行性的具体步骤：
- 打开 Photoshop 或 Illustrator——保存的色板会出现在色板面板中，以图库名称显示。
- 创建简单的模型——一个包含标题、正文、按钮和背景的着陆页。从色板中为每个元素应用颜色。
- 最后检查一次对比度——对模型中每一组文字与背景的搭配使用内置对比度检查器。
- 与团队分享——Creative Cloud 共享图库允许协作者立即访问同一色板。
如需更详细的操作指南，UT San Antonio Academic Innovation 的“如何使用 Adobe Color”教程提供了从色轮到设计完成的整个过程的视觉引导。
最后核查
在认定色板完成之前，再用色盲模拟器过一遍所有四种缺陷模式。然后确认最重要的文字-背景搭配至少通过 WCAG AA（4.5:1）。一个在色块预览中看起来很漂亮但应用时失败得色板不是最终成品——它只是一个起点。