配色方案生成器

相关工具

常见问题

什么是互补色？

色相环上相隔 180° 的两个颜色，比如红和青、绿和品红。互补色放在一起对比最强烈，适合做强调色、按钮或需要突出的元素。但两块大面积互补色并列会显得刺眼，所以本工具生成的互补色都降低了饱和度，当点缀用更协调。

配色方案怎么选？

单色最稳，同一色相调深浅，适合极简风格。邻近色（色相相差 30° 左右）过渡柔和，最常见。互补色对比强，适合要突出的场景。三角色和四角色色彩丰富但难驾驭，建议只取其中一个是主色，其余降饱和当辅助。拿不准就先用「单色」或「邻近」。

导出的 CSS 怎么用？

点「导出 CSS」会复制一组 CSS 变量，形如 --primary: #319b86;。粘到你的样式表开头，之后用 var(--primary) 引用即可，改配色只改这几行。

配色要考虑对比度吗？

要。文字和背景的对比度建议不低于 4.5:1（WCAG AA 标准），否则视力不佳的用户会看不清。本工具生成的是色板本身，实际用到文字上时，记得用「深色文字配浅底」或「白色文字配深底」。

使用说明

1. 在左侧色轮上按住拖动选基准色，向外拖颜色更亮，越靠圆心越暗
2. 右侧选配色规则（单色 / 邻近 / 互补 / 三角 / 分割互补 / 四角）
3. 色板实时更新，点任意色块复制色值
4. 点「导出 CSS」拿到 CSS 变量，直接粘进样式表用

做网站选主题色、UI 设计定色板、PPT 配色、给孩子做手工选颜色搭配。也可以直接输入已知的品牌色 HEX，看它能搭出哪些协调的辅助色。

免责声明

本工具生成的配色方案由算法自动产生，仅供参考，不构成任何设计建议或保证。配色效果受显示器色域、色彩管理、使用场景等多种因素影响，请以实际设备显示为准。本工具为免费公益项目，按「现状」提供，不对因使用本工具产生的任何直接或间接损失承担责任。