界面配色方案生成器

界面配色方案生成器是一个面向设计师、前端开发者和产品经理的专业配色工具，基于 iro.js 色轮引擎 + HSL 配色算法构建。它帮你从一种基色出发，通过 7 种经典配色规则（互补色、类似色、三角色、分裂互补色、四角色、单色渐变、正方形色）自动生成完整的配色方案，并提供实时 UI 组件预览，让你在落地代码前就能预览配色在真实界面中的表现效果。

本工具的核心优势在于「选色 → 生成方案 → UI 预览 → 导出」一体化流程。左侧色轮让你直观选取基色，中间面板展示 7 种配色规则下的色板；右侧实时渲染预览界面（Header、按钮、卡片、Badge、输入框），支持浅色/暗色双模式切换。确定方案后，可将配色一键导出为 HEX 列表、Tailwind 配置或 CSS 变量。

主要功能

• 基于 iro.js 的交互式色轮，支持 HEX 输入与随机生成。
• 7 种配色规则：互补色、类似色、三角色、分裂互补色、四角色、单色渐变、正方形色。
• 每个色板颜色独立展示 HEX 值，支持一键复制。
• 实时 UI 组件预览（Header / 按钮 / 卡片 / Badge / 输入框），支持浅色/暗色模式切换。
• 3 种导出格式：HEX 列表、Tailwind 配置、CSS 变量。

使用建议

• 先输入或选取品牌主色，再切换配色规则查看不同风格的效果。
• 在浅色/暗色模式下切换预览，检查对比度和可读性。
• 确定配色后使用导出功能快速落地到 Tailwind 配置或 CSS 变量文件。
• 搭配「随机生成」快速获得配色灵感，再微调基色优化。

技术说明

所有配色计算在浏览器端完成，基于 HSL 色彩空间进行色相旋转、饱和度和亮度调整。色板颜色严格按照色彩理论公式生成：互补色旋转 180°、三角色 ±120°、分裂互补色 +150°/+210°、四角色 +60°/+180°/+240°、正方形色 +90°/+180°/+270°。

---

最后验证时间：2026-07-22 源码出处：jaames/iro.js