← 返回工具

调色板生成器

从一个基础色出发,自动生成完整的配色方案,支持导出为 CSS 变量。

打开工具 → 查看源码

输入一个主色,自动生成 50–900 的完整色阶,并支持导出。

为什么做这个

每次做新项目都要手动调色,太麻烦。这个工具用 HSL 色彩空间插值,几秒钟就能得到一套和谐的配色。

导出格式

:root {
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  /* ... */
}

直接复制到项目里就能用。

← 返回工具