配色方案生成器
Web 工具从基础色一键生成互补、类似、三角、四方、单色与明度六种配色方案，支持导出 JSON 或 CSS 变量。适合 UI 设计、品牌配色与网页主题开发，用于前端调试、接口联调与 SEO 配置，本地处理保护隐私，免费且无需登录即可使用。
相关工具
关于 配色方案生成器
配色方案生成工具基于 HSL 色彩空间从基础颜色出发生成专业配色方案。支持互补色（色相相差 180 度）、类比色（相差 30 度）、三元色（相差 120 度）、四元色（相差 90 度）和单色方案（相同色相不同明度）五种基础色彩理论方案，外加分裂互补、tetradic 等变体。每种方案输出对应颜色的 HEX、RGB 和 HSL 三种格式数值，可导出为 JSON、CSS 变量定义或 TXT 纯文本，方便直接粘贴到设计工具或代码中使用。一个实用技巧是「锁定主色再生成」：把品牌主色锁定后重新生成辅助色，能在保持识别度的前提下快速探索搭配，避免反复手调。配色有个常见误区——色相夹角相同并不代表观感等距，真正舒服的搭配往往还要照顾明度与饱和度的平衡，所以生成后别只盯色相还要看整体明暗是否协调。适用于 UI 界面设计、数据可视化配色、品牌色系推导和前端 CSS 自定义属性定义。
使用方法
- 打开 配色方案生成器 工具页面
- 根据需求输入或粘贴数据到输入区域
- 查看实时处理结果，使用复制按钮获取输出
使用场景
- 品牌配色推导 — 输入品牌主色，生成完整的辅助色和中性色配色方案。
- 数据可视化 — 为图表、地图生成高区分度的多色配色，避免色盲不友好。
- 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 生成和谐色相但不等价保证对比度。文字与背景请另测 WCAG 对比度，并建议用专业的色觉模拟工具复核色盲友好性。
能锁定主色只换辅助色吗？
可以。锁定某些颜色后重新生成其余颜色，就能在保持品牌主色的前提下探索辅助色与中性色搭配。
颜色会上传吗？
不会。所有配色计算在浏览器本地完成，不上传任何服务器，可放心用于未公开发布的品牌色。
评论与讨论
评论仅保存在你的浏览器本地，切换设备后不可见。配置 Giscus 后可支持云端评论。