Khroma

Khroma 完整使用指南

训练 AI 学习你的色彩偏好,生成专属无限调色板

评分: 8.4/10 价格: 免费(浏览器内使用) 厂商: George Hastings(独立开发者) 官网: khroma.co

目录

1. 什么是Khroma
2. 核心功能
3. 如何使用
4. 价格方案
5. 竞品对比
6. 优缺点
7. 常见问题
8. 总结建议
9. 快速开始

快速开始

⏱ 预计耗时:5 分钟 · 难度:小白友好

测试编辑:Mnet 测试日期:2026-06-15 测试环境:Windows 11 / macOS 15 / Chrome 138

第 1 步:准备工作

打开 Chrome 或 Edge 浏览器(建议最新版),访问 khroma.co。Khroma 完全在浏览器内运行,无需注册、无需登录、无需下载,打开即可使用。注意:页面是纯英文界面,偏好数据存在本地浏览器(LocalStorage),换电脑或清缓存就需要重新训练,建议用常用浏览器完成训练。

第 2 步:跟着做

1. 进入首页后点中央的「Start Training」按钮,系统会进入「Train」页面。
2. 每次展示一张双色卡片(左色 + 右色),点左下角「♥」表示喜欢、右下角「→」表示跳过,也可以直接点色块表达偏好。
3. 目标完成 50 组判断——屏幕顶部进度条会显示 X/50,达到 50 后页面顶部会出现「You can now generate」提示,模型才算激活。
4. 训练完成后点顶部导航「Generator」,你就会看到无穷多按你审美排列的双色搭配;点击任意一组可展开详情,看到 HEX、RGB、CSS 代码及在白底/黑底下的 WCAG AA/AAA 对比度评级。
5. 找到喜欢的组合后,点详情页右上角的「♥ Favorite」加入收藏夹(在「Favorites」页面可集中管理与搜索)。

第 3 步:验证

看到一组你「喜欢」色调倾向鲜明的双色搭配 + 对应 HEX/RGB/CSS 代码 + WCAG 评级 = 训练成功。下一步建议:打开「Generator」,在搜索框输入你品牌主色的 HEX 值(例如 #2E7D32),回车后只显示与该色同色相/相邻色相的搭配,直接拿来做品牌延展;再做 30–50 组新训练,把模糊偏好推向更精准。失败处理:如果生成结果与你审美差太远,通常是训练阶段判断太分散(看到好看的都选)——回「Train」页面按住 → 集中跳过不喜欢的色相,模型会快速收敛;如果页面卡在「loading model」超过 30 秒,通常是网络或浏览器扩展拦截,关掉广告拦截插件刷新即可。

什么是Khroma

Khroma 是一款基于浏览器运行的 AI 调色板生成工具,由独立开发者 George Hastings 创建。其核心思路是用神经网络学习数千种人工调色板,然后根据用户对色彩的主观偏好(喜欢/不喜欢),训练出一个高度个性化的色彩推荐模型。与传统配色工具不同,Khroma 不是简单地按色相环或互补规则生成组合,而是从用户视角出发,逐步逼近个人或品牌的色彩语言。

从产品定位来看,Khroma 主要面向平面设计师、UI/UX 设计师、品牌设计人员以及需要快速生成调色板的数字内容创作者。它特别适合在项目启动初期寻找色彩灵感、验证配色可访问性(contrast ratio)以及为已有视觉系统延展衍生色板的场景。由于完全在浏览器中运行,无需下载安装,加载即可使用,这对于追求效率的设计团队非常友好。

在 2026 年的当下,Khroma 已经成为众多独立设计师和小品牌工作流中的常驻工具。它在 Behance、Dribbble 等设计社区的口碑稳定,被许多 UI 设计师当作 Color Hunt、Adobe Color 的智能化替代品。其独特价值在于:通过 50 组偏好训练后生成的色彩,具有明显的”个人风格一致性”,这是传统调色板工具难以复现的能力。

核心功能

1. 神经网络偏好学习 — 通过至少 50 组双色”喜欢/不喜欢”判断训练个性化 AI 模型,后续所有推荐都会基于该模型加权输出
2. 无限色彩组合生成 — 基于从互联网学习的数千种人工调色板,持续产出符合用户偏新的配色方案
3. 多维度搜索与筛选 — 支持按色相、色度、明度、十六进制值、RGB 值等参数精确过滤生成的色彩组合
4. 收藏夹与 WCAG 评级 — 可保存无限组配色方案,每对颜色附带 WCAG 无障碍对比度评级,直接服务前端开发
5. 多格式色值导出 — 支持导出 HEX、RGB、HSL、CSS 变量代码,便于在 Figma、Sketch、网页代码中直接使用

如何使用

注册和入门

Khroma 是一款零门槛工具,打开官网 https://www.khroma.co 即可开始使用,无需注册账号。首页会直接展示一组双色色卡,用户点击左侧或右侧的色卡表达”喜欢”或”跳过”偏好。系统会不断展示新组合,直到用户完成至少 50 组判断(界面右上角会显示训练进度),此后模型激活,“Explore” 页面才会真正按用户偏好生成方案。对于不愿意花时间做偏好的用户,平台也提供”Skip Training”选项直接进入探索模式,但生成结果会偏向通用风格。

基础操作流程

完成训练后,进入主操作界面:左侧为生成的色彩组合网格,每张卡片显示两种颜色的搭配效果;顶部为筛选器,支持按 hue(色相)、saturation(饱和度)、brightness(明度)等维度过滤;右上角的搜索框支持直接输入 HEX 值查找特定颜色。点击任意一张配色卡,会展开详情页:显示两种颜色的名称、HEX、RGB、CSS 代码以及在白底/黑底上的 WCAG AA/AAA 评级。用户可以一键将喜欢的方案加入”Favorites”收藏夹,并通过收藏夹页面进行二次组织与管理。

整个基础操作流程是”训练 → 浏览 → 筛选 → 收藏 → 导出”。对于不熟悉色彩理论的初学者,Khroma 的”训练”机制相当于一个轻量级的色彩入门课程,系统会用对比的方式教会你”什么是好看的颜色”,这是其相比 Adobe Color 等专业工具的差异化体验。

高级技巧

对于有经验的设计师,有几个进阶用法值得关注:第一,结合 Figma 插件将 Khroma 收藏夹色板同步到设计文件,保持设计系统的一致性;第二,利用”对比度”过滤功能,只查看达到 WCAG AA 级(对比度 ≥ 4.5:1)的配色,直接生成无障碍合规的 UI 配色;第三,在做品牌延展时,可以固定一个主色 HEX 值,搜索相近色相不同明度的衍生组合,得到完整品牌色谱;第四,使用”Type”切换查看 Typography(排版)预览效果,模拟色彩在文字与背景上的真实呈现;第五,将收藏的多个色板组合成”主题库”,在多个项目间复用,逐步沉淀个人色彩体系。

价格方案

说明:Khroma 是工具中较为罕见的”完全免费”产品,所有核心功能均开放,无功能阉割。

竞品对比

优缺点

优点:

• 真正零门槛,完全免费,无需注册,无功能阉割
• AI 偏好学习机制独特,生成的色彩组合具有强烈的个人风格一致性
• WCAG 评级直接内嵌,做无障碍设计时省去额外验证步骤
• 支持多种色彩空间(HEX、RGB、HSL、CSS)导出,适配前端开发工作流
• 浏览器原生运行,跨平台无障碍,加载即可使用

缺点:

• 缺少中文界面,对中文用户不友好
• 缺乏品牌管理、版本控制等团队协作功能,主要面向个人设计师
• 偏好训练结果不可导出或分享,无法快速复用到团队其他成员
• 没有 AI 文生色板能力(基于关键词生成配色),需要手动训练
• 对于需要”专业色彩理论”指导的用户,系统提示较少,学习曲线隐藏在交互中

常见问题

Q1: Khroma 是完全免费的吗?会不会有功能限制? A1: 是的,Khroma 目前所有核心功能均免费开放,无水印、无使用次数限制、无登录要求。开发者主要通过捐赠和合作伙伴支持维持运营。

Q2: 训练数据会被上传或共享吗? A2: 根据 Khroma 官网说明,所有偏好数据仅存储在用户本地浏览器(LocalStorage)中,不会上传到服务器。如果清除浏览器数据,训练结果会丢失,需重新训练。

Q3: 生成的色彩组合可以商用吗?有无版权风险? A3: Khroma 生成的色彩本质上是色值数据(HEX/RGB),不涉及具体素材版权问题。用户可以将生成的配色用于商业品牌、UI 设计、网页、印刷品等任何用途,无版权限制。

Q4: 为什么训练后生成的色彩还是有些不符合预期? A4: 这是因为训练量不足或偏好判断不一致。建议:第一,完成至少 50 组判断;第二,在判断时尽量保持风格统一(比如集中选择同一类色相);第三,使用筛选器过滤掉不合适的色相范围;第四,逐步在收藏夹中”打分”高质量组合,模型会越来越精准。

Q5: Khroma 与 Figma 是否有官方集成? A5: 目前没有 Khroma 官方 Figma 插件,但社区有第三方插件支持将 Khroma 收藏夹色板导入 Figma。也可以手动复制 HEX 值到 Figma 中使用。

总结建议

Khroma 是当下最值得推荐的免费 AI 配色工具之一,尤其适合追求个性化配色方案的设计师和品牌主理人。其独特的”偏好学习”机制让它在所有配色工具中独树一帜,生成的色彩组合不是简单的规则套用,而是真正基于用户审美训练的产物。对于 UI/UX 设计师、品牌设计人员、独立创作者而言,Khroma 能够显著降低寻找配色的时间成本,同时通过内嵌的 WCAG 评级帮助提升产品的无障碍水平。

建议新用户:第一,认真完成 50 组偏好训练,这是发挥 Khroma 全部能力的前提;第二,结合 Adobe Color 或 Coolors 作为补充,在需要色轮规则或快速模板时切换使用;第三,将 Khroma 收藏夹与 Figma/Sketch 设计文件保持同步,形成”训练-收藏-应用”的闭环;第四,做无障碍设计时优先利用 WCAG 评级,直接获得合规的对比度数据。如果你是品牌主理人,可以将 Khroma 收藏夹作为品牌色谱的初稿,再结合专业设计软件进行微调,效率会比传统工作流提升数倍。