Khroma怎么用？

Khroma是目前最值得设计师收藏的AI配色工具之一，它用人工智能帮你从海量配色方案中“学习”你的审美，然后生成近乎无限的个性化调色板。如果你厌倦了千篇一律的色卡，或者每次配色都要纠结半天，Khroma能帮你把灵感产出速度提升好几倍。下面我把它的用法、核心逻辑和隐藏技巧一次讲透。

Khroma是什么？它和普通配色工具的根本区别

Khroma（官网入口：khroma.co）是一款基于AI的配色生成器，由独立开发者Tyler Smith创建并维护。它不属于大厂，但凭借出色的算法和简洁体验，在设计师圈子里口碑极高。

它最核心的机制是“训练你的专属AI”：你不需要手动调色轮，而是通过从大量现有配色组合中“挑选你喜欢/不喜欢”来训练模型。AI会学习你的选择逻辑，之后生成的每一个调色板都是根据你的审美偏好定制的，而不是随机抛出色卡。

上手实操：从0到1，5分钟掌握核心流程

使用流程非常直观，分三步走：

1. 训练阶段（必做）：首次打开网站，系统会展示几十组双色或三色组合，你只需快速点击“喜欢”（拇指向上）或“不喜欢”（拇指向下）。这个过程大约需要2-3分钟，选得越多，AI越懂你。
2. 生成阶段：训练完成后，点击“Generate”，Khroma会立刻生成一整页的调色板网格。每个卡片包含一个主色、辅助色、字体搭配示例（标题/正文/链接色），以及对应的CSS代码。
3. 筛选与导出：你可以按“色系”“亮度”“饱和度”等条件过滤结果，也可以点击任意卡片查看大图，并一键复制HEX、RGB或CSS变量。

核心功能详解：不只是“生成颜色”这么简单

Khroma的强大之处在于它把“配色”这个动作延展成了完整的视觉决策系统，我拆解成四个实用模块：

1. 字体搭配预览（最被低估的功能）

它不只是给你色块，而是直接在四种字体场景（衬线、无衬线、等宽、手写）下展示颜色组合效果。你输入自己的文案，就能看到标题色+正文色+背景色放在真实排版里的对比度，这比干看色卡直观太多了。

2. 无限变体与“相似色”探索

每张色卡都有一个“Generate Variations”按钮，点击后AI会基于当前配色衍生出几十个微调版本（比如把明度提高5%、把饱和度降低10%）。这特别适合做UI设计时需要同一色系不同层级（比如主按钮、悬停态、禁用态）的场景。

3. 按类型筛选：渐变、纯色、双色、三色

左侧工具栏可以精确切换：纯色（Solid）、渐变（Gradient）、双色（Duo）、三色（Trio）。做PPT背景用渐变，做数据可视化用双色对比，做品牌VI用三色逻辑，一套工具全覆盖。

4. 搜索与反向检索

顶部搜索框支持输入任意颜色值（比如#FF6B6B），Khroma会找出所有包含该颜色的AI推荐方案；也可以输入关键词如“森林”“复古”“赛博朋克”，它会匹配色板名称和风格标签。

关于收费与限制（2025年更新）

目前Khroma提供免费版和Pro版（每月约5美元或年付40美元）。免费版足够个人项目使用，但有以下限制：

对于日常设计探索，免费版完全够用；如果你重度依赖它做前端开发或品牌提案，Pro版一次导出CSS变量的功能能省不少复制粘贴的时间。

进阶技巧：让Khroma产出更贴合业务场景的配色

用了一段时间后，我总结出三个能明显提升效果的操作习惯：

• 训练时不要全选“喜欢”：AI需要负面反馈来界定你的边界。如果你对80%的组合都点喜欢，模型会变得模糊。刻意挑出10%“绝对不行”的配色（比如荧光绿+暗紫），反而能教会它你的禁忌。
• 结合“色彩心理学”筛选：生成后，先看色板的“明度分布”。如果做金融类产品，优先选低饱和度、高明度的方案；做游戏UI，则反向找高对比、高饱和的卡片。Khroma的过滤条里直接有“明度”和“对比度”滑杆，别忽略。
• 用“字体预览”做无障碍检查：把文案字号调到12px，如果正文和背景的对比度看起来模糊，直接放弃这个方案。这比用计算器算对比率快多了。

同类工具横向对比（帮你做选择）

如果你在Khroma和其它工具之间纠结，可以看这个简单对比：

我的建议是：Khroma做主方案，Coolors做备选补充。Khroma胜在“懂你”，但有时也需要一点随机性来打破思维定势。

常见问题速答

• Q：需要注册账号吗？ A：不需要注册就能训练和生成，但保存色板需要免费注册一个账号。
• Q：生成的配色能商用吗？ A：可以。Khroma生成的色彩组合不涉及版权问题，但如果你把某个色板注册为商标，建议自行咨询法律意见。
• Q：手机端好用吗？ A：网页版适配了移动端，但训练阶段需要频繁点击，建议在平板上操作体验更佳。

相关问题

1. AI配色工具会取代设计师的审美吗？ 不会。它只是帮你把“从0到1”的过程压缩，但“为什么这个配色适合这个品牌”的判断力仍然属于你。工具越聪明，对设计师的品味要求反而越高。

2. 如何把Khroma的配色导入Figma或Sketch？ Pro版支持直接复制CSS变量，免费版可以手动输入HEX值。更高效的方式是用Figma的插件“Palette Master”（需在社区插件里搜索），它能直接读取剪贴板中的色值。

3. 有没有比Khroma更适合生成渐变色的工具？ 如果你专攻渐变，可以试试Gradienta，它提供大量手工调制的渐变预设，与Khroma的AI路线互补。

4. Khroma的AI模型是基于什么训练数据？ 官方未公开具体数据集，但从效果来看，它应该学习了大量设计社区（如Dribbble、Behance）的公开配色作品，以及色彩理论中的对比度规则。

5. 如果我不喜欢AI生成的所有结果，怎么办？ 建议重新训练一次，或者尝试在生成页面切换“风格强度”滑块（从“保守”到“激进”），这会影响AI对偏好的执行力度。