关于 Khroma
Khroma: 极客设计师专用的个人 AI 调色盘与配色生成平台
Khroma 是一款专为 UI/UX 设计师、品牌插画师、前端开发者及视觉艺术家打造的“AI 驱动型调色板生成与美学配色工具”。它打破了传统配色网站（如 Adobe Color）死板的手动拉取色轮模式，通过让设计师挑选 50 种喜欢的色彩，在线训练出专属于你视觉偏好的神经网络 AI 算法，并在几秒内自动推演成千上万种高颜值、符合色彩学对比度的双色组合（Color Pair）、渐变色（Gradient）、四色调色板（Palette）及图片渲染方案。
🎯 解决的核心痛点
在 UI 界面设计、品牌 VI 构建及插画配色中，设计师与前端开发普遍面临以下痛点：
- 配色试错成本高昂：手动寻找主色、辅色、背景色与字体颜色的过程繁琐，容易导致画面刺眼或对比度低下。
- 缺乏个性化审美推演：常规配色网站推荐的方案千篇一律，无法根据设计师个性的独特审美喜好进行个性化衍生。
- 可读性与无障碍 (WCAG) 校验缺失：选好的颜色搭配放在 UI 界面上时，经常发生文本与背景对比度不足、不符合无障碍标准的尴尬。
- HEX / RGB 代码提取麻烦：需要频繁使用吸管工具或手动复制色值代码，设计转前端流程断续。
💡 核心功能深度剖析
1. 神经网络个性化美学训练 (Personalized Neural Color Model)
初始使用时挑选你偏爱的 50 种色彩，Khroma 后端的大模型会自动学习你对色相、饱和度与明度的独特审美范式。
2. 五种专业展示视图模式 (5 Display Views: Poster/Header/Gradient/Palette/Image)
提供海报模式、网页 Header 布局、双色平滑渐变、四色组合调色板以及真实照片色彩渲染 5 种直观的可视化查看视角。
3. Web 无障碍 WCAG 文本对比度校验 (WCAG Compliance Checker)
所有生成的颜色搭配实时计算符合 WCAG 规范的文本可读性得分，自动标注适合大标题或正文小字的最佳展示方式。
4. 快捷收藏与 HEX / CSS 一键复制 (One-Click CSS / HEX Export)
支持将心仪的调色板一键加入个人收藏库，悬浮点击即可瞬间复制标准的 HEX、RGB 色值或 CSS 渐变代码。
🖥️ 界面实况与交互架构
Khroma 调色面板实况
下图展示了 Khroma 在工作台中展示个性化双色匹配、渐变推演与 WCAG 对比度校验的实况：
个性化 AI 调色与 CSS 导出工作流
graph TD
A[挑选 50 种偏好色彩进行个人美学训练] --> B[Khroma 神经网络自动生成数万种配色方案]
B --> C[在海报/网页 Header/渐变/四色视图间无缝切换]
C --> D[实时计算 WCAG 无障碍文本对比度得分]
D --> E[一键复制 HEX / RGB / CSS 代码或加入收藏]
🛠️ 常用功能与指南
| 功能视图 | 界面位置 | 场景说明 |
|---|---|---|
| Color Pair View | 顶部 View 选项 | 查看适合作为背景与文字搭配的双色组合 |
| Gradient View | 顶部 View 选项 | 生成高级平滑的双色与三色 CSS 渐变效果 |
| Palette View | 顶部 View 选项 | 查看包含主色、辅助色与背景色的四色调色板 |
⚙️ 进阶使用技巧 (Pro Tips)
[!TIP] 利用“Bias 偏差过滤器”快速定位调性 在顶部搜索栏输入具体色系（如
Warm暖色、Pastel马卡龙、Dark暗黑风），Khroma 会立刻在你的个人 AI 算法库中筛选出符合该调性的所有调色板！
❓ 常见问题解答 (FAQ)
Q: Khroma 是否免费使用？
A: 完全免费。设计师可以直接在 Web 端训练个人配色模型并免费导出所有 HEX / CSS 色值。
Q: 生成的色彩搭配是否支持导出为图片？
A: 支持。支持一键将调色板导出为 SVG 或高清 PNG 图片，方便粘贴到 Figma 或 Sketch 中使用。
