色阶变化 (Shades & Tints)
/* 点击上方按钮导出代码 */
如何创建专业的配色方案？
审美困境
为什么有些颜色单独看很好看，放在一起却显得非常“脏”或者不协调？如何快速为新项目确定主色和辅助色？
色彩理论的应用
配色不应全凭直觉。利用色相环（Color Wheel）上的几何关系，如互补、类比或三角关系，可以确保颜色之间存在数学上的和谐性。
常见的调和模式解析
- 互补色 (Complementary) : 选取色相环上完全相对的两个颜色。这种配色对比度最强，极具冲击力，适合用于强调关键操作（CTA）。
- 类似色 (Analogous) : 选取色相环上相邻的颜色。这种方案非常平稳、舒适，常见于自然界的景观中，适合营造统一的品牌氛围。
- 三角色 (Triadic) : 选取色相环上呈 120 度分布的三个点。即使使用较淡的饱和度，三角色方案也能保持极高的平衡感和丰富度。
- 单色系 (Monochromatic) : 基于同一种色相，通过调整饱和度和亮度来生成色阶。这是现代 UI 设计中最安全且最高级的配色方式。
为什么色阶（Shades）很重要？
一个好的 UI 系统不能只依靠 3-5 个主色。你需要完整的色阶变化来处理不同的交互状态：
- 浅色阶 : 用于背景、边框、禁用状态。
- 深色阶 : 用于文字、阴影、Hover 悬停效果。
开发集成建议
本工具支持直接导出 CSS 变量和 Tailwind 配置。我们建议将生成的调色板定义为 CSS 变量（如
--color-primary-500
），这样在后续调整品牌色时，只需修改一处变量即可全局生效，极大提升了项目的可维护性。