调色板生成器
设定主色与配色规则后自动生成协调的调色板，提供色值、渐变与CSS变量导出，帮助设计师为网站、海报快速建立统一且可复用的色彩体系。
🎨 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）中使用
- 计算结果仅供参考，请以实际应用场景为准
▼
工具简介
调色板生成器。设计创意工具，可视化操作，一键生成 CSS 代码。
功能特点
- 可视化操作，所见即所得
- 支持实时预览与调试
- 一键复制 CSS 代码
- 纯前端运行，无需安装
使用场景
- 前端开发中的样式设计
- UI 设计师配色与布局参考
- 快速生成 CSS 效果代码
- 设计灵感探索与原型制作