配色工作站
AI 生成专业配色方案，让设计不再纠结颜色
简介
配色工作站帮你用自然语言描述风格或场景，AI 自动生成专业级配色方案。支持从关键词生成、从图片提取、从品牌色扩展等多种方式，覆盖网页设计、App 界面、PPT 演示、海报平面等各类配色需求。内置无障碍对比度检测，确保配色方案不仅好看，还符合 WCAG 可访问性标准。
能做什么
- 配色方案生成 — 从关键词（"科技蓝"、"清新自然"）、场景（"企业官网"、"儿童教育"）或情绪（"活力"、"沉稳"）生成配色
- 色板提取 — 从上传的图片中智能提取主色、辅色、点缀色，生成可用的色板
- 颜色格式转换 — HEX / RGB / HSL / CMYK / CSS 变量自由互转
- 品牌色系统 — 基于一个品牌主色，自动扩展出完整的色彩系统（主色、辅色、中性色、语义色）
- 渐变色生成 — 线性渐变、径向渐变，多色过渡，直接输出 CSS 代码
- 无障碍对比度检测 — 检测文本与背景色的对比度是否符合 WCAG AA / AAA 标准
- 色彩搭配建议 — 互补色、类比色、三角色、分裂互补等配色理论推荐
- 深色模式适配 — 从浅色方案自动生成对应的深色模式配色
使用示例
| 你说 | AI 生成 |
|---|---|
| "给网站选个配色方案，科技感" | 5 色科技风配色方案 + CSS 变量 + 预览色块 |
| "从这张图提取色板" | 主色 + 辅色 + 点缀色，含 HEX 和 RGB 值 |
| "检查这个颜色的对比度：#1a73e8 配白色文字" | WCAG 对比度评分 + AA/AAA 达标情况 |
| "生成科技蓝渐变色" | 渐变预览 + CSS 代码 + 多个方向变体 |
| "品牌主色是 #FF6B35，扩展一套色彩系统" | 完整品牌色板：主色系、辅助色、中性色、成功/警告/错误 |
| "这个配色方案转深色模式" | 深色模式配色 + 明暗对比预览 |
支持的配色风格
| 风格 | 关键词示例 | 适用场景 |
|---|---|---|
| 科技商务 | 科技蓝、专业、稳重 | 企业官网、SaaS 产品、B 端系统 |
| 清新自然 | 绿色、自然、环保 | 健康、教育、环保类产品 |
| 活力潮流 | 亮色、撞色、年轻 | 电商、社交、C 端 App |
| 极简优雅 | 黑白灰、简约、高级 | 作品集、品牌展示、时尚 |
| 温暖亲和 | 暖色、柔和、温馨 | 母婴、餐饮、生活服务 |
| 高端奢华 | 金色、深色、质感 | 奢侈品、金融、高端地产 |
| 可爱童趣 | 马卡龙、圆润、明快 | 儿童教育、游戏、文创 |
配色理论参考
- 互补色 — 色轮对面的两色，对比强烈，视觉冲击力强
- 类比色 — 色轮相邻的颜色，和谐统一，柔和舒适
- 三角色 — 色轮等距三色，丰富而平衡
- 分裂互补 — 互补色的两侧邻近色替代，对比适中
- 单色系 — 同一色相的不同明度和饱和度，统一感最强
输出规格
- 配色方案：色块可视化预览 + HEX / RGB / HSL 值
- CSS 变量：可直接复制粘贴到项目中使用的 CSS 自定义属性代码
- 色板图：SVG / PNG 格式的色板图片
- 对比度报告：WCAG 2.1 标准评分（AA 4.5:1 / AAA 7:1）
- 归档位置：
output/配色工具/目录下按日期自动归档