Format
Palette
Click a swatch to copy
关于 Color Palette Generator
配色是设计和前端开发的高频需求：从品牌主色推导整套色板、为数据可视化准备区分色、为 UI 组件准备状态色。本工具从一个基础颜色出发，生成互补色、类比色、三元色、单色等配色方案，输出 HEX、RGB、HSL 三种格式，可导出 JSON、CSS 或 TXT。全部端侧运算，不上传。
使用方法
- 打开 Color Palette Generator 工具页面
- 根据需求输入或粘贴数据到输入区域
- 查看实时处理结果，使用复制按钮获取输出
使用场景
- 品牌配色推导 — 输入品牌主色，生成完整的辅助色和中性色配色方案。
- 数据可视化 — 为图表、地图生成高区分度的多色配色，避免色盲不友好。
- UI 状态色 — 基于主色生成 success、warning、error、info 等状态色变体。
- 网页配色灵感 — 快速尝试不同配色方案，为 Landing Page 或海报寻找视觉方向。
- 设计规范输出 — 导出 CSS 变量或 JSON，直接接入设计系统或前端代码。
常见问题
支持哪些配色方案？
支持互补色（Complementary）、类比色（Analogous）、三元色（Triadic）、分裂互补色（Split-Complementary）、四元色（Tetradic）、单色（Monochromatic）六种方案。
输入颜色支持哪些格式？
支持 HEX（如 #1A2B3C）、RGB（如 rgb(26,43,60)）、HSL（如 hsl(210,50%,40%)）三种格式，也可使用取色器直接选择。
能导出为 CSS 变量吗？
可以。导出为 CSS 格式时，每个颜色会生成 --color-1、--color-2 等 CSS 自定义属性，方便直接粘贴到样式表。
颜色会上传吗？
不会。所有配色计算在浏览器本地完成，不上传任何服务器。
有色盲友好模式吗？
工具基于 HSL 色彩空间生成配色，搭配类比色和单色方案可在一定程度上提升色盲友好性，建议搭配专业色觉模拟工具复核。
评论与讨论
💬 评论仅保存在你的浏览器本地，切换设备后不可见。配置 Giscus 后可支持云端评论。