ToolMochi

调色板生成器

基于一个主色生成明暗色阶、互补色、邻近色和三角配色,快速搭建完整配色方案。

浅色调

d4d2f9

aaa6f2

7f79ec

544ce6

2920df

深色调

2119b3

191386

110d59

08062d

040316

互补色

5048e5

dde548

邻近色

488fe5

5048e5

9e48e5

e548dd

三角配色

5048e5

e55048

48e550

本工具完全在浏览器本地运行,输入内容不会被上传。

如何使用

  1. 1输入主色或使用取色器选择颜色
  2. 2查看自动生成的明暗色阶和配色关系
  3. 3复制单个色值或整组配色

常见问题

这些配色是怎么算出来的?

把主色转到 HSL 空间,通过调整亮度生成色阶,通过旋转色相生成互补色、邻近色和三角配色。

可以直接用于设计软件吗?

可以。每组配色都能一键复制为逗号分隔的 HEX 列表,粘贴到 Figma 或代码中即可。

为什么深浅色看起来不完全对称?

色阶按固定亮度生成,不同色相在相同亮度下的视觉效果会有差异,建议再按品牌需要微调。

相关工具

颜色格式转换

在 HEX、RGB、HSL 和 HSV 之间转换颜色,支持取色器实时预览。

对比度检测

检查前景色与背景色的对比度,并按 WCAG AA / AAA 标准判断普通文本和大字号是否达标。

渐变生成器

可视化生成线性或径向 CSS 渐变,调整颜色、角度和位置,一键复制 CSS 代码。

阴影生成器

可视化调整偏移、模糊、扩散、颜色和透明度,生成 CSS box-shadow 代码。