🎨

配色方案生成器

选择基础色并生成和谐配色方案。可选择互补色、类似色、三角配色等。即时复制 HEX、RGB 或 CSS 变量。

生成器工具 本地运行 不发送数据
颜色调色板方案设计
互补色

什么是配色方案生成器?

配色方案生成器基于色彩理论规则创建和谐调色板:互补色、三角配色、类似色、分裂互补色等。可用于为 UI 设计、品牌或艺术项目选取颜色。

如何使用配色方案生成器

  1. 使用取色器选择基础色,或输入 HEX 值。
  2. 选择配色类型(互补色、类似色、三角配色等)。
  3. 单击任意色块复制其 HEX,或将全部导出为 CSS 变量 / JSON。
了解更多▾
色彩和谐类型
  • 互补色 —相对色,高对比度
  • 类似色 —相邻色,和谐且平静
  • 三角色 —三种等距分布的颜色,鲜明活泼
  • 分裂互补色 —基础色 + 其补色两侧的两种颜色
  • 四色配色 —在色轮上构成矩形的四种颜色
  • 单色 —同一色相的深色调与浅色调
常见问题
如何在 CSS 中使用这些颜色?

单击“复制为 CSS 变量”即可获取一段可直接粘贴的代码片段,其中所有颜色均以自定义属性表示。

可以将调色板导出为 JSON 吗?

可以。单击“导出 JSON”即可下载包含 HEX 和 RGB 值的配色方案。