🎚️
色阶生成器
输入一个主色，自动生成 50–950 的明暗色阶，适配 Tailwind/设计系统。
本地处理 · 不上传
加载工具中…
相关：色阶 · tint · shade · tailwind · 调色板 · palette
色阶生成器基于一个基准色生成明度递进的完整色阶，可直接用作设计系统的色板。每一档同时给出 HEX 与 RGB 值，方便写进变量或设计稿。
使用步骤
- 输入或选取基准色
- 调整色阶档数与明度跨度
- 查看生成的完整色阶
- 复制所需档位的色值
使用场景
- 为设计系统建立主色的完整色板
- 生成按钮的常态、悬停与按下三态色
- 制作图表的同色系渐变配色
- 快速获得深浅搭配的背景与文字色
小贴士
- 纯粹按明度递进容易出现中间档发灰，可适当调整饱和度补偿。
- 文字与背景的搭配要看对比度而非色阶档位差，正文建议达到 4.5:1 以上。
- 深色模式下不宜直接反转色阶，通常需要单独调整饱和度，否则高饱和色在暗背景上会刺眼。
常见问题
色阶应该分几档？
设计系统常用 9 到 11 档，覆盖从极浅背景到极深文字。档数太少不够用，太多则相邻档难以区分。
为什么中间档看起来发灰？
因为单纯调整明度会降低感知饱和度。可在中间档略微提高饱和度，或改用感知均匀的色彩空间生成色阶。
能直接用于深色模式吗？
不建议直接反转。深色背景上高饱和色会显得刺眼，通常需要降低饱和度并重新校准对比度。
色阶生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用色阶生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。