色阶生成器

从单一颜色生成完整的浅色调与深色调范围——自定义明暗步长和色阶数量，即时复制任意色值。

基础颜色

步长

每步骤明暗变化幅度（1–25%）。

色阶数量

在基础颜色两侧各生成的浅色调与深色调数量。

渐变

生成的色阶

选择基础颜色、步长百分比和数量——所有浅色调与深色调将即时在浏览器中计算完成。

关于色阶生成器

色阶生成器可以将单一颜色扩展为一整套浅色调和深色调。给定一个基础色后,它会在一侧生成逐渐变浅的浅色调,在另一侧生成逐渐变深的深色调——就是现代设计系统中常见的 50 到 900 风格色阶。

两个控制项决定输出结果:步进百分比设定每一级色阶变浅或变深的幅度(每级 1%–25%),数量则设定基础色两侧各自出现多少个色阶,最多 10 个。渐变条会一目了然地预览整条色阶。

输入时生成会在浏览器中即时完成——不会向服务器发送任何内容。可以复制单个数值、完整列表,或将整条色阶以 CSS 变量的形式复制,直接放入设计令牌文件或 Tailwind 风格的颜色刻度中。

是的,完全免费。所有浅色调和深色调都在浏览器中实时计算,没有费用、无需账户,生成多少条色阶都没有限制。

浅色调是基础色向白色混合(更浅),深色调是基础色向黑色混合(更深)。生成器会同时生成两个方向,分别标注为"浅色调(更浅)"和"深色调(更深)",围绕在你的基础色两侧。

将每侧数量设为 4 或 5,这样总共可得到 9 到 11 个色块,基础色居中。步进大约设为 8%–10%,通常就能得到与主流框架所用的 50–900 色阶相似的间距。

较小的步进(3%–6%)适合悬停和边框等细微变化;中等步进(8%–12%)适合完整的设计系统色阶;较大的步进(15%–25%)则会产生对比强烈、海报感十足的效果。留意渐变预览——好的色阶应该均匀变深,不出现色带断层。

可以。"复制 CSS 变量"会将整条色阶输出为命名的 CSS 自定义属性,"全部复制"则给出一份纯数值列表,可粘贴到任何地方,从 SCSS 映射到 JavaScript 主题对象都适用。