🎨 Color Palette Generator
单色
互补色
类似色
三角色
四角色
分裂互补
随机
#667eea
基础颜色
🖼️
点击或拖拽图片到此处
支持 JPG、PNG、GIF 等格式
Set a base colour and a harmony rule to build a matching palette, then export the swatches, gradients and CSS variables.
📐 计算公式 / 原理
邻近色相 = H ± Δ（Δ 常取 15°/30°）；明度阶梯 = L ± k·ΔL；饱和度按规则微调
按色彩调和规则在主色基础上做色相偏移与明度、饱和度阶梯，生成可复用的调色板，支持导出色值、渐变与 CSS 变量，用于为网站与海报建立统一色彩体系。
📚 深度解析：调色板生成器
💡 常见使用场景
- 从主色派生整套 UI 配色。
- 做海报、PPT 的配色方案。
- 给新品牌起一组色。
由 #FF6B35 生成类似色板
<p><strong>输入：</strong>基色 #FF6B35、类型类似。</p><p><strong>处理：</strong>在 HSL 空间取邻近色相。</p><p><strong>输出：</strong>5 色协调板与 HEX，可复制为 CSS 变量。</p>
❓ 常见问题（FAQ）
- 互补和类似怎么选？
- 类似色柔和统一，互补色对比强；按画面张力需求选。结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。
- 两种色对比度不够会提示吗？
- 会按 WCAG 算出对比度值与等级，未达标会标红提醒，便于及时换色或调深。
- 会保存或上传我的内容吗？
- 结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。
⚠️ 使用说明与注意事项
- 本工具纯前端运行，数据不会上传到服务器
- 建议在主流浏览器（Chrome/Safari/Firefox/Edge）中使用
- 计算结果仅供参考，请以实际应用场景为准