基准色
#3b82f6（互补色）
互补色
#f6993b
设计配色
色彩和谐搭配 - 经典配色规则工具
选定基准色后，按互补、类似、三角、四角、分裂互补或单色系规则生成配色方案，提供 UI 预览与 CSS 变量，适合品牌与组件配色。
配色色彩和谐
设计配色
色彩和谐搭配
搭配结果
预览效果
配色预览
查看配色在实际界面中的效果
CSS 变量
使用场景
- 为设计项目选定配色规则并出方案
- 生成按钮主色与次色参考
- 导出 CSS 变量接入主题
如何使用
- 选择或输入基准色
- 选择搭配规则
- 点击色块复制颜色或复制 CSS 变量
示例输入输出
FAQ
支持几种配色规则？
支持互补色、类似色、三角配色、四角配色、分裂互补和单色系共 6 种。
和调色板生成器有何不同？
本工具以单一基准色按色彩理论展开固定结构；调色板生成器更侧重随机探索与锁定迭代。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
调色板生成
调色板生成 - 色彩规则配色在线工具
按单色、类似色、互补色、三角色或完全随机规则生成调色板，可锁定个别色块后继续随机，适合 UI 探索与品牌色衍生。
调色板 配色 色彩
颜色格式转换
颜色格式转换 - HEX RGB HSL 在线工具
在浏览器本地将颜色在 HEX、RGB、HSL、HWB、CMYK 与 CSS 变量之间转换，支持取色器与随机色，适合设计稿取色、写样式和对齐品牌色。
颜色 HEX RGB
粉彩配色生成
粉彩配色生成 - 低饱和调色板工具
在浏览器本地生成低饱和粉彩与莫兰迪风格调色板，可选数量与风格并导出 HEX 列表或 CSS 变量，适合图表、背景与柔和 UI。
粉彩 配色 调色板