色阶生成器
把一个基准 HEX 颜色变成 Tailwind 风格的 50-950 色阶，每一级都带色块和可复制的 HEX 值。
正在加载工具…
色阶生成器 — 输入一个 HEX 基准色，立即得到 11 级色阶（50、100、200……900、950）——浅色级向白色混合、深色级向黑色混合，编号方式与 Tailwind CSS 完全一致。每一级都显示色块和 HEX 值，并附带一键复制按钮。全部在浏览器中完成，颜色绝不会发送到服务器。
色阶生成器 是什么？
色阶生成器是一款免费的在线工具，可将一个基准 HEX 颜色转换为完整的明暗色阶，编号为 50、100、200 一直到 900 和 950，与 Tailwind CSS 的颜色令牌一致。它通过将基准色线性地向白色混合（生成 50-400 的浅色级）和向黑色混合（生成 600-950 的深色级）来构建色阶，而 500 保持为基准色本身。设计师和前端开发者用它为设计系统生成统一的色阶、设置 CSS 自定义属性或 Tailwind 主题色、以及挑选品牌色的浅色/深色变体。每一级都以色块加 HEX 值的形式展示，并配有一键复制按钮。
如何使用 色阶生成器
- 在“基准色 (HEX)”输入框中以 #rrggbb 或 #rgb 格式输入基准色，或点击大号取色色块进行可视化选取。
- 50-950 色阶会即时更新：浅色级（50-400）向白色混合，500 是你的基准色，深色级（600-950）向黑色混合。
- 查看每一行，可并排看到级别编号（50……950）、对应的色块和它的 HEX 值。
- 点击任意行末尾的复制按钮，即可将该级别的 HEX 值复制到剪贴板。
- 若只需要 500 级，可点击输入框旁的复制按钮复制基准色的 HEX 值。
示例
蓝色基准的最浅级（50）
输入
#4f86f7
输出
#f6f9ff
同一基准的最深级（950）
输入
#4f86f7
输出
#0b1323
构建 Tailwind 主题色
输入你的品牌色，然后将 50 到 950 各级逐个复制到 Tailwind 主题颜色（例如 colors.brand）或 CSS 自定义属性中，即可得到一套现成的、与 Tailwind 默认色阶编号一致的由浅到深色阶。
常见问题
- 可以输入哪些颜色格式？
- 基准色以 HEX 值输入，支持 #rrggbb（六位）或 #rgb（三位简写）两种格式。如果输入的值不是有效的 HEX 颜色，会显示“Invalid HEX color”提示且不生成色阶。输出中的每一级都以 #rrggbb 形式的 HEX 值显示。
- 这些色阶是如何计算的？
- 每一级都是基准色与纯白或纯黑之间的线性混合。50-400 级按递减比例向白色混合，500 级是未改动的基准色，600-950 级按递增比例向黑色混合。编号方式与 Tailwind CSS 的色阶一致。
- 为什么 500 级有时不正好对应我基准色的编号？
- 500 级始终是你的精确基准色。该工具不会把你的颜色重新映射到感知明度曲线上，因此如果输入非常浅或非常深，色阶较浅或较深的那一半范围就会较小——选择一个中间色调作为基准可获得最均匀的色阶。
- 可以可视化选色而不用手动输入 HEX 吗？
- 可以。点击内置取色器的大色块即可选取颜色；HEX 输入框会自动更新，整个 50-950 色阶也会随你的更改即时重新计算。
- 我的颜色数据会被上传到任何地方吗？
- 不会。一切都完全在你的浏览器中通过本地色彩运算完成——任何颜色值都不会被发送到服务器，因此它可离线使用，并能为你的配色保密。