怎么用一个颜色生成色阶？

输入基色，工具生成 11 步 50–950 色阶，可直接复制为 Tailwind、Radix 或 CSS 变量格式。

50–950 这些数字是什么意思？

它们是亮度档位：50 是最浅的色，500 大致是基色，950 是最深的色——这是多数现代设计系统的约定。

为什么不直接在 HSL 里变亮？

HSL 的亮度感知不均匀，色阶跳变不齐。这个工具让各档看起来视觉均衡。

色阶生成器

输入一个主色，生成 50 到 950 的设计系统色阶

主色 HEX

生成色阶

11 个色阶，可复制、收藏或导出

应用预览

模拟按钮、提示、背景和深色界面层级

色阶生成器使用说明

UI色阶生成器，输入任意颜色自动生成50–950共11步色阶，支持Tailwind CSS、Radix和CSS Variables格式输出，适用于设计系统建设。输入一个基础色即可生成完整的 11 步色阶，并同时提供 Tailwind、Radix 和 CSS Variables 三种格式的输出，不需要分别手动转换。

适合正在搭建设计系统色彩规范、或者需要给现有项目补齐完整色阶的场景。

常见问题

怎么用一个颜色生成色阶？ 输入基色，工具生成 11 步 50–950 色阶，可直接复制为 Tailwind、Radix 或 CSS 变量格式。
50–950 这些数字是什么意思？ 它们是亮度档位：50 是最浅的色，500 大致是基色，950 是最深的色——这是多数现代设计系统的约定。
为什么不直接在 HSL 里变亮？ HSL 的亮度感知不均匀，色阶跳变不齐。这个工具让各档看起来视觉均衡。