配色方案生成器 —— 在线生成和谐色板
配色方案生成器按色彩和谐规则（邻近、互补、三角等）在色轮上取色，生成一套协调好看的 5 色配色。设计猫直接在你的浏览器里生成：按空格快速换一组、点 🔒 锁住喜欢的颜色、点色块复制 HEX，还能一键导出 CSS 变量——全程本地，不上传任何东西。
按 空格 换一组 · 点色块复制 HEX · 🔒 锁住保留
如何配色生成器？
- 1选择一种配色方案（邻近色、互补色、三角色…）。
- 2按「空格」键或点「换一组」，不断生成新配色直到满意。
- 3点 🔒 锁定喜欢的颜色，再换色时它会保留。
- 4点任意色块复制 HEX，或用「复制全部 / 复制 CSS 变量」一次拿走整套。
为什么用设计猫配色生成器？
- 本地生成、不上传：纯浏览器运算，秒出结果，隐私安全。
- 和谐有依据：按色轮角度关系生成，不是乱凑的随机色。
- 开发友好：一键导出 HEX 列表或 :root CSS 变量，复制即用。
常见问题
配色方案是怎么生成的？
设计猫按色彩和谐（color harmony）规则在 HSL 色轮上取色：邻近色取相邻角度、互补色取对侧 180°、三角色取均匀 120°，再叠加一层明度阶梯，得到一套既有对比又协调的 5 色配色。
怎么保留我喜欢的颜色再换其余的？
点该颜色上的锁形图标把它锁住，再按空格 / 点「换一组」时，锁定的颜色会保留，只重新生成其余颜色。
能导出给代码用吗？
可以。点「复制全部」拿到逗号分隔的 HEX 列表，或点「复制 CSS 变量」直接得到 :root { --color-1: … } 形式，粘进样式表即可。
更新于 · 设计猫团队