简介 色阶生成器
任意颜色生成 50–950 色阶并导出 CSS
如何使用
将单一基色生成完整的 50 到 950 色阶，并输出可直接粘贴的 CSS 与 Tailwind 代码。
局限与边界
色阶按固定明度步长生成；高饱和的基色在两端会被裁切。
色阶生成器
为什么需要 50–950 色阶
一套色阶让同一种色相覆盖背景、边框、文字和状态。50 是最浅的淡化色，950 是最深的阴影色，500 通常承载品牌主色。
步长均匀的色阶更易维护：相邻色值之间的跨度在每个页面上都保持可预期。
色阶如何生成
每个色阶都以 OKLCH 明度为基准，因此整条色阶在感知上保持均匀，不会在暗部塌陷。两端会降低彩度，让浅色更干净、深色更浓郁。
常见问题
为什么 500 不是我的原始颜色？
500 位于色阶中部，是按钮和链接最稳妥的默认值。输入色可能偏亮或偏暗，因此会落在相邻的色阶上。
导出的 CSS 可以直接用吗？
可以。CSS 块定义了 --brand-50 到 --brand-950，粘贴前把前缀改成你的设计系统命名即可。
灰色也能生成色阶吗？
可以。低彩度颜色会生成几乎不偏色的中性色阶，适合文字、边框和禁用状态。
色阶的对比度曲线
以「藍 #104E8B」为例，把 50–950 十一档分别对白字与黑字求对比度。绿色表示达到 4.5:1，可以直接承载正文。
50
白字 1.1
黑字 17.2
100
白字 1.2
黑字 15.9
200
白字 1.4
黑字 13.3
300
白字 1.8
黑字 10.7
400
白字 2.3
黑字 8.1
500
白字 3.4
黑字 5.5
600
白字 4.8
黑字 4.0
700
白字 6.7
黑字 2.8
800
白字 9.4
黑字 2.0
900
白字 13.0
黑字 1.5
950
白字 16.2
黑字 1.2