Khroma – AI配色工具

Khroma 是什么，适合解决哪些配色问题？

Khroma 是一个面向设计师的 AI 配色工具。它会让使用者选择喜欢的颜色，用这些偏好形成个人化的颜色生成方向，再提供可发现、检索和收藏的颜色组合与调色板，适合 UI、网页、品牌和视觉设计中的配色比较。

先明确界面层级、品牌颜色规则、阅读环境和目标受众，再比较候选组合，更容易得到可落地的方案。

想继续比较 AI 配色、调色板和设计灵感工具，可以在云记号导航按实际设计任务浏览。

www.yjdh.com

如何用 50 个颜色建立个人配色偏好？

Khroma 的训练页会引导使用者选择 50 种颜色，并建议覆盖不同色相、明度和饱和度。这个步骤的价值不在于机械地填满数量，而在于让系统看到你偏爱的冷暖关系、深浅范围和色彩强度。若只选取同一类颜色，后续组合容易失去对比和变化。

开始前可列出必须保留的颜色、适合点缀的颜色，以及会与品牌或无障碍需求冲突的颜色。把这些边界纳入选择，结果会更贴近真实项目。

1. 先分出主要色、辅助色、中性色和提醒色各自要承担的任务。
2. 在浅色与深色、低饱和与高饱和之间保留足够变化。
3. 把容易造成阅读困难或与品牌相冲突的颜色单独标记。
4. 从候选中挑出几组，在真实标题、正文和按钮中继续测试。

调色板可以怎样检索和筛选？

当项目已经有明确方向时，不必反复浏览所有组合。Khroma 的公开说明显示，生成器可按颜色类型、色相、颜色名称、HEX 或 RGB 值查找组合，也可以把色相和类型条件组合起来。这样的筛选方式适合从“偏暖的低饱和背景”“需要与某个品牌色配合的文字色”等具体问题开始。

筛选时要区分“喜欢一支颜色”和“这组颜色能否承担页面任务”。单色看起来舒服，不表示它和正文、图标、悬停状态或数据图表放在一起仍然清楚。可以先用 HEX 或 RGB 锁住不能变化的颜色，再寻找合适的背景色、强调色和文字色。

• 按色相：适合先确定整体的冷暖与情绪。
• 按类型：适合限制深浅、明亮或柔和等视觉范围。
• 按名称：适合围绕已有的颜色语言寻找近似选择。
• 按 HEX 或 RGB：适合围绕已有品牌色补充成组颜色。

排版、渐变、调色板和图片视图怎样帮助判断颜色？

同一组颜色放在不同载体中，感受会明显变化。Khroma 的公开页面列出排版、渐变、调色板和图片等查看方式，适合从不同角度判断组合。排版视图更容易看出文字与背景是否有层级，渐变视图能帮助观察颜色过渡，调色板视图适合比较整体比例，图片视图则可用于感受颜色在视觉素材中的关系。

查看时建议把“画面好看”和“信息好读”分开判断。营销主视觉可以使用更强的颜色对比，但长正文、表单和后台界面需要更稳定的阅读节奏。不要因为一组颜色在大图中显眼，就直接用于小字号文字、禁用状态或高密度信息区域。

HEX、RGB、颜色名和色相查询如何使用？

已有品牌规范、设计稿或前端变量时，HEX 和 RGB 查询能围绕已有颜色继续比对。颜色名和色相查询适合探索相近方向，例如先找冷色、暖色或低饱和候选，再缩小到与现有主色相配的范围。不同设备的显示可能存在差异，最终仍应以项目实际色值和界面效果为准。

Khroma 首页还说明每个颜色对可查看颜色名称、HEX、RGB、CSS 代码和 WCAG 可访问性信息。对于设计和开发协作，这些信息有助于减少沟通误差。不过代码值只是交付的一部分，组件在深色模式、错误提示、选中状态和不同屏幕上的表现也需要单独确认。

为什么需要关注对比度和可读性？

颜色搭配不只影响风格，也会影响内容能否被快速看懂。Khroma 生成器设置中提供了阻止未通过 WCAG 对比度测试的文字组合选项，可作为初步筛选参考。它适合先排除明显难读的组合，再把保留下来的颜色放进真实页面检查。

对比度合格不等于所有人、所有屏幕和所有字号下都舒服。浅色细字、叠加在图片上的文字、图标与文字组合、错误或成功提示，以及状态只靠颜色区分的表格，都需要额外观察。重要信息宜同时使用文案、图标、边框或版式建立层级，避免只靠一个颜色传达含义。

• 把主标题、正文、链接和按钮分别放到实际背景上测试。
• 检查浅色、深色和高亮状态是否仍能一眼区分。
• 让警告、成功和错误信息保留文字或图标提示。
• 在手机和桌面屏幕上查看小字号与细线的清晰度。

UI、网页与品牌设计怎样把配色变成实际方案？

为界面选择颜色时，可以先为每一类元素分配职责：背景负责提供阅读空间，文字负责信息层级，主按钮负责行动引导，辅助色负责提示或数据区分。再从 Khroma 的候选组合中选择能承担这些职责的一组，而不是把最喜欢的颜色平均分配到所有区域。

品牌设计也需要保留系统性。主色应有稳定的使用场景，辅助色要避免抢走核心信息，中性色要支撑长时间阅读。把候选方案放进首页、表单、卡片、数据图表和社交素材中试用，能更早发现某些颜色只适合海报、不适合产品界面的情况。

收藏、保存和跨设备使用需要注意什么？

Khroma 的公开页面提供收藏组合的方向，也说明个人生成器和收藏数据可以保存。训练页当前提示偏好数据存放在当前浏览器和设备可访问的本地存储中。对于要长期使用的配色方案，不能只依赖浏览器中的一次选择，应该把确认后的色值、使用场景和关键状态写入自己的设计规范。

更换设备、清理浏览器数据或把方案交给他人前，先查看当前页面提供的保存与导入方式，并保留可读的颜色清单。需要共同维护的项目，还应确认谁能修改主色、怎样记录版本、哪些色值用于正式交付，避免多份相近但不一致的调色板同时流转。

哪些情形不宜只靠自动配色？

涉及品牌重塑、医疗和金融信息、公共服务、复杂数据展示或需要严格无障碍要求的页面，自动生成的组合只能提供参考。它不能替你理解行业规范、法律限制、受众文化差异或已有设计系统。重要页面应把候选颜色放进完整内容、真实设备和关键交互中复核。

照片、插画和视频中的颜色也会影响文字可读性。即使调色板本身协调，背景素材的明暗变化仍可能让标题、按钮或标识消失。此时应调整覆盖层、文字摆放或素材选择，而不是只继续增加颜色数量。

使用 Khroma 前应该确认哪些条件？

开始前先确认当前页面的使用方式、数据保存提示和适合的设计任务。公开页面能说明颜色训练、生成、筛选和收藏方向，但费用、账号、导入导出范围、不同设备上的保存方式以及其他产品条件可能随页面更新而变化。准备重要交付时，应以使用时界面和自己的项目规范为准。

如果配色会进入客户项目、正式产品或公开活动，可以建立一份最终确认表：主色和辅助色色值、文字与背景组合、状态色、图片叠加规则、组件示例和责任人。这样即使后续更换工具或调整候选，也能保持设计与开发之间的一致性。

常见问题

Q：Khroma 是什么？
A：Khroma 是面向设计师的 AI 配色工具，公开页面介绍了颜色偏好训练、配色组合生成、检索和收藏等方向。

Q：为什么训练页要选择 50 个颜色？
A：页面用这一组颜色建立个人偏好，并建议包含不同色相、明度和饱和度。选择范围越单一，后续候选越可能缺少变化。

Q：可以按已有品牌色找配色吗？
A：可以从 HEX 或 RGB 值、颜色名和色相开始筛选，再把候选放进真实的文字、按钮和背景中检查。

Q：WCAG 对比度选项能替代人工检查吗？
A：不能。它适合作为初步筛选，实际页面仍要检查字号、字重、背景素材、组件状态和不同屏幕上的可读性。

Q：收藏和偏好数据会自动同步到其他设备吗？
A：训练页当前提示偏好数据保存在当前浏览器和设备的本地存储中。更换设备前应先查看页面的保存与导入方式，并自行保留重要色值。

Q：Khroma 能直接确定完整品牌规范吗？
A：它可以帮助形成和比较候选调色板，但品牌规范还需要结合受众、内容层级、实际界面和交付要求确认。

在云记号导航中，还可以按 AI 配色、UI 设计和调色板等需求继续比较工具。

www.yjdh.com