颜色搭配生成器 - 在线配色工具

什么是颜色搭配生成器？

自动生成和谐的配色方案，支持多种配色模式，一键导出 CSS 变量。

Yeo工具箱免费提供在线CSS/前端工具，无需下载安装，绝大多数数据在浏览器本地处理，不会上传到服务器。

如何使用Yeo工具箱的颜色搭配生成器？

1. 选择基础颜色
2. 选择配色模式（互补色、类似色等）
3. 设置颜色数量
4. 点击「生成配色」查看结果
5. 点击「导出 CSS」获取代码

常见使用场景

• 场景1：网站设计时获取配色灵感
• 场景2：UI 设计确定主色和辅助色
• 场景3：品牌视觉设计确定色彩体系
• 场景4：PPT/演示文稿配色

使用小贴士

• 互补色适合需要强烈对比的设计
• 类似色适合需要和谐统一的设计
• 三色组适合需要丰富层次的设计

常见问题

Q1: 什么是互补色？

互补色是色轮上相对的两个颜色（相差180°），如红色和绿色。互补色搭配能产生强烈的视觉对比效果。

Q2: 什么是类似色？

类似色是色轮上相邻的颜色（相差约30°），如蓝色和蓝紫色。类似色搭配能营造和谐统一的视觉效果。

Q3: 导出的 CSS 变量如何使用？

将生成的 CSS 代码复制到样式表中，即可通过 var(--color-1) 等方式引用配色方案中的颜色。

更新日志

• 2026-08-29 更新：Yeo工具箱 颜色搭配生成器工具正式上线

⚠ 声明：本工具所有数据处理均在您的浏览器本地完成，数据不会被上传到任何服务器。