简介 色阶生成器
任意颜色生成 50–950 色阶并导出 CSS
如何使用
将单一基色生成完整的 50 到 950 色阶，并输出可直接粘贴的 CSS 与 Tailwind 代码。
色阶生成器
为什么需要 50–950 色阶
一套色阶让同一种色相覆盖背景、边框、文字和状态。50 是最浅的淡化色，950 是最深的阴影色，500 通常承载品牌主色。
步长均匀的色阶更易维护：相邻色值之间的跨度在每个页面上都保持可预期。
色阶如何生成
每个色阶都以 OKLCH 明度为基准，因此整条色阶在感知上保持均匀，不会在暗部塌陷。两端会降低彩度，让浅色更干净、深色更浓郁。
常见问题
为什么 500 不是我的原始颜色？
500 位于色阶中部，是按钮和链接最稳妥的默认值。输入色可能偏亮或偏暗，因此会落在相邻的色阶上。
导出的 CSS 可以直接用吗？
可以。CSS 块定义了 --brand-50 到 --brand-950，粘贴前把前缀改成你的设计系统命名即可。
灰色也能生成色阶吗？
可以。低彩度颜色会生成几乎不偏色的中性色阶，适合文字、边框和禁用状态。