配色方案生成器

什么是配色方案生成器？

如何使用配色方案生成器

1. 1

   选择规则：展开页面顶部的下拉菜单，从中挑选符合设计需求的色彩和谐生成规则，不同规则会生成不同风格的搭配结果。

2. 2

   调整基色：点击界面中的初始基色色块，唤起拾色器面板，你可以拖拽色条或输入色值，自定义想要的初始基础颜色。

3. 3

   锁定颜色：在生成的配色列表中，找到你想要保留的颜色，点击该颜色块下方的『锁定』图标，固定这个颜色不会被改动。

4. 4

   导出代码：点击页面下方的『导出』按钮，在弹出选项中选择你需要的 CSS 或 Tailwind 格式，复制生成好的代码即可使用。

什么场景会用到？

计算示例

注意事项

• 锁定颜色后重新生成，只会调整未锁定的配色，保持你选定的核心颜色不变，适合已有主色调需要搭配辅助色的场景。
• 生成规则基于色相环的经典色彩和谐理论，包括互补色、类比色等方案，生成结果仅作设计参考，实际可根据视觉需求调整。
• 导出的Tailwind格式直接对应Tailwind v3的extend配置格式，复制后可直接粘贴到项目配置文件中使用。
• 如果生成的配色亮度太接近，会导致文字与背景对比度不足，不符合可访问性要求，请手动调整亮度后再使用。

常见问题

参考资料

• 经典色彩和谐理论（设计行业通用实践）
• Tailwind CSS 官方颜色配置文档

本工具遵循通用设计领域的色彩和谐生成规则，所有导出格式均经过实际项目验证，可直接使用，由工具集编辑组维护更新。