AI配色方案

什么是AI配色方案？

如何使用AI配色方案

1. 1

   输入描述：在顶部输入框中，清晰写清你需要配色的场景和想要的风格，比如『极简风奶茶店宣传海报主辅配色』『科技感后台管理系统亮色主配色』，尽量描述具体，AI能更贴合需求生成

2. 2

   生成方案：确认描述内容无误后，点击输入框下方的『生成配色方案』按钮，耐心等待几秒，AI会自动处理你的需求，输出完整的配色内容

3. 3

   查看内容：生成完成后，直接在结果区域查看完整内容，可以看到整理好的主色、辅助色、强调色色板，同时自带亮色模式和暗色模式两套完整配色

4. 4

   复制代码：找到你需要的代码区块，点击对应色值或代码块右侧的『复制』按钮，就能直接把CSS变量代码或是Tailwind配置代码复制到剪贴板使用

什么场景会用到？

计算示例

注意事项

• 生成结果受AI模型随机性影响，每次输入相同场景得到的配色不会完全一致，可多次生成挑选喜欢的方案。
• 工具仅生成配色参考方案，不做设计成品输出，实际使用需根据你的设计载体调整饱和度和对比度。
• 生成的Tailwind配置代码可直接复制到项目tailwind.config.js的theme.extend.colors字段使用，无需手动转换格式。
• 如果场景描述过于模糊（比如只输入「好看的配色」），生成的配色方案会缺乏针对性，建议明确场景和风格。

常见问题

参考资料

• WCAG 2.1《Web内容无障碍指南》（对比度参考标准）
• Tailwind CSS 官方主题配置文档

本工具生成配色遵循通用设计色彩规范，输出的CSS、Tailwind代码格式符合当前框架通用写法，由工具集编辑组定期维护输出格式适配。