配色方案
从基色推导和谐色板：互补 / 类比 / 三角 / 分裂互补 / 单色五策略，一键导出 CSS 变量与 Tailwind 片段。
>_ 使用指南 · GUIDE
选定一个基色，自动推导和谐色板，五种策略可选：互补（色轮对面，对比最强）、类比（相邻色，柔和统一）、三角（三点均衡，丰富且协调）、分裂互补（互补的邻色，比互补更稳）、单色（同色相不同明暗，最安全）。每种策略实时出完整色板。
一键导出 CSS 变量与 Tailwind 片段，配色方案直接进代码。给项目定色板、给 PPT 找搭配、设计物料配辅助色，从「拍脑袋选色」变成「按色彩理论推导」。本地计算，即改即出。
>_ 常见问题 · FAQ
Q1 · 五种配色策略分别适合什么场景？
单色：正式、极简的产品界面（最不容易翻车）；类比：自然、柔和的品牌调性（健康、环保类）；互补：需要强对比的行动按钮与促销物料；分裂互补：想要对比但互补太刺眼时的折中（最常用的「有点对比但不吵」）；三角：活泼多元的插画风、儿童产品。先想调性再选策略。
Q2 · 定好色板后怎么分配使用比例？
经典 60-30-10 法则：60% 主色域（背景、大面积底色）、30% 辅助色（卡片、分区）、10% 点缀色（按钮、高亮、图标）。互补色通常落在 10% 里——点缀色用得少才显高级，处处强调等于没有强调。
Q3 · 为什么导出 CSS 变量比直接写色值好？
CSS 变量（--brand: #014DB2）让色板单点维护：换主题、调品牌色改一处即可，暗色模式也靠变量切换实现。Tailwind 片段则直接进配置文件生成 bg-brand 这类工具类。导出格式与主流工程实践对齐，配色方案落地零转换。
Q4 · 生成的配色保证「好看」吗？
色彩理论保证和谐（色相关系不冲突），不保证审美——明度、饱和度的分配仍需要人的判断。建议流程：本工具推导出色相框架 → 微调明度饱和度定层级 → 实际界面里按 60-30-10 验证。它是起点，不是免检终点。
Q5 · 无障碍要求下配色要注意什么？
文字与背景的对比度必须达标（WCAG AA 正文 4.5:1）。配色方案选完后，务必用「对比度检查」工具验证关键文字色组合——高饱和的浅色文字配浅底是最常见的无障碍翻车点，色彩理论本身不检查这一项。