渐变色板生成器
从一个基础色或在多种颜色之间生成平滑的色阶。可复制任意色块，获取渐变CSS，并导出为CSS、Tailwind、SCSS或JSON。
免费 在浏览器中运行 无需注册
正在加载渐变色板生成器…
您的文件绝不离开您的设备
如何使用渐变色板生成器
- 1
在此页面打开渐变色板生成器，它直接在浏览器中加载。
- 2
添加文件、文本或数值，并调整设置。
- 3
复制或下载结果。不会上传或存储任何内容。
关于此工具
设计系统中每种颜色都需要多个色阶：浅色用于背景，中间色用于按钮，深色用于文字和悬停状态。这款渐变色板生成器可以从一个基础色生成平滑色阶，或在你选择的多种颜色之间生成过渡色，并直接导出到代码中。
如何生成色阶
- 选择一个基础色。
- 选择模式：scale生成同一颜色由浅到深的色阶，steps在你添加的多种颜色之间过渡。
- 添加或删除颜色，并设置步数。
- 为色板命名，点击任意色块复制HEX色值，并复制渐变CSS。
- 把色板导出为CSS变量、Tailwind颜色、SCSS变量或JSON。
在设计系统中使用色阶
Tailwind等采用的常见命名方式，把色阶从50（最浅）编号到900或950（最深）：
- 50到100：页面和卡片背景。
- 200到300：边框和轻微填充。
- 500到600：主要按钮和链接。
- 700到900：悬停状态以及浅色背景上的文字。
小贴士
- 用于文字背后的色阶，请用对比度检查器检查对比度。
- 步长保持均匀，悬停和激活状态才会协调一致。
- 混合相近色相可得到自然渐变；相距太远的色相中间可能变灰。
- 在代码中按用途命名颜色（primary、accent），品牌更新时只需修改一处。
常见问题
什么是色阶？
同一种颜色由浅到深的一系列色调，可统一用于背景、边框、按钮和文字。
可以导出Tailwind色阶吗？
可以。选择Tailwind导出，即可得到能粘贴到Tailwind配置中的颜色项。
scale和steps模式有什么区别？
Scale为一个基础色生成更浅和更深的色调；Steps则在你选择的多种颜色之间，按设定的步数进行过渡。
如何复制单个颜色？
点击任意色块即可复制其HEX色值。
可以导出哪些格式？
CSS变量、Tailwind配置、SCSS变量和JSON，以及渐变CSS。
免费吗？
免费，无需注册。