调色板生成器 使用指南

<p><strong>输入：</strong>基色 #FF6B35、类型类似。</p><p><strong>处理：</strong>在 HSL 空间取邻近色相。</p><p><strong>输出：</strong>5 色…

核心功能

• 由主色按配色规则（类似 / 互补 / 三角等）生成协调调色板
• 每个色块给出 HEX 与 RGB 色值，并可一键复制
• 支持导出 CSS 变量与渐变代码
• 纯本地计算，不上传任何输入

适用场景

• 从主色派生整套 UI 配色。
• 做海报、PPT 的配色方案。
• 给新品牌起一组色。

使用步骤

1. 设定主色（取色器或输入色值）
2. 选择配色规则与色块数量
3. 查看生成的整套调色板
4. 微调个别色块直到层次协调
5. 复制 CSS 变量或渐变代码用于项目

实用技巧

• 类似色柔和统一、互补色对比强烈，按画面需要的张力选择
• 生成后仍需用对比度工具核验正文与背景，配色协调不代表文字可读
• 建议为主色预留明暗两侧的固定档位（如 100–900），便于统一按钮与状态色
• 品牌色不要直接大面积铺底，降低饱和度或提高明度后更耐看

常见问题

互补和类似怎么选？

类似色柔和统一，互补色对比强；按画面张力需求选。结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。

两种色对比度不够会提示吗？

会按 WCAG 算出对比度值与等级，未达标会标红提醒，便于及时换色或调深。

会保存或上传我的内容吗？

结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。