Tailwind 色阶生成器

输入您的品牌基色,工具将自动根据明暗度生成 50 到 950 的完整色阶调色板,确保视觉层次分明。您可一次生成多组颜色,并支持一键导出为 CSS 变量或 Tailwind 配置文件,直接复制到项目中使用。

#3b82f6
50
#f2f6fc
100
#e1eaf9
200
#c1d5f6
300
#91b6f3
400
#5491f2
500
#0b64f4
600
#0754cf
700
#0443a9
800
#033382
900
#01235b
950
#00173d

什么是 Tailwind 色阶?

Tailwind CSS 使用从 50(最浅)到 950(最深)的数字色阶系统来组织颜色。本工具可以从任意基础色生成完整的 50-950 色阶,支持同时生成最多 5 组颜色,并可直接导出为 CSS 变量或 Tailwind 配置。

  • 从任意 HEX 色值生成 50-950 完整色阶
  • 支持同时生成 1-5 组颜色
  • 一键导出 CSS 变量或 Tailwind 配置
  • 点击色块即可复制单个色值

FAQ