色阶生成器
把一个基准 HEX 颜色转换为 OKLCH、HSL 或 RGB 色阶，级数可调，带逐级 WCAG 对比度提示，并支持导出 CSS、Tailwind 和 JSON。
正在加载工具…
色阶生成器 — 输入一个 HEX 基准色，立即用 OKLCH 或 HSL 的感知均匀插值（色相稳定、明度均匀分布）或经典的线性 RGB 混合来生成完整色阶，级数任意可选。你可以微调色相与饱和度，查看每一级的 WCAG 对比度提示——标示该色在白底和黑底上作为文字是否清晰——并一键将整条色阶复制为 CSS 自定义属性、Tailwind 颜色配置或 JSON。全部在浏览器中完成，颜色绝不会发送到服务器。
色阶生成器 是什么？
色阶生成器把一个基准 HEX 颜色变成完整的明暗色阶，可直接用于设计系统。它不局限于在 RGB 中线性混合，还能在 OKLCH 或 HSL 中插值，使色相保持稳定、明度均匀分布，从而得到感知上平衡、没有发灰或发白台阶的渐变。你可以决定生成多少级——从 2 到 24 级，或输入逗号分隔的自定义标签列表——偏移色相或缩放饱和度，并查看每一级的 WCAG 对比度提示，看清哪些色在白底和黑底上适合作为文字。完成的色阶可一键复制为 CSS 自定义属性、Tailwind 颜色配置对象或 JSON。
如何使用 色阶生成器
- 在「基准色 (HEX)」输入框中以 #rrggbb 或 #rgb 格式输入基准色，或点击大色块进行可视化选取。
- 选择色彩空间：OKLCH 或 HSL 可得到色相稳定、感知均匀的渐变，RGB 则是经典的线性混合。
- 设置想要的级数（2–24），或打开设置输入逗号分隔的自定义级别列表、偏移色相、缩放饱和度并设置导出颜色名称。
- 查看每一行的两个对比度单元格——白底和黑底上的字母 A——当该色达到文字的 WCAG AA 时会被高亮。
- 复制单个级别的 HEX，或用复制按钮将整条色阶复制为 CSS 变量、Tailwind 配置或 JSON。
示例
从品牌蓝生成均匀的 OKLCH 渐变
选择 OKLCH 并保持 11 级：50–950 色阶在保持蓝色相的同时均匀分布明度，因此不会像线性 RGB 混合那样出现发灰或发白的台阶。
自定义五级 Tailwind 配置
把 100、300、500、700、900 作为自定义级别列表输入即可只生成五个色块，然后将它们复制为以这些标签为键的 Tailwind 颜色对象，或复制为 CSS 变量和 JSON。
常见问题
- RGB、HSL 和 OKLCH 选项有什么区别？
- RGB 把颜色向白色和黑色线性混合，速度快，但中间调可能显得不均匀。HSL 和 OKLCH 则保持色相稳定并均匀分布明度；OKLCH 在感知上是均匀的，因此每一级看起来都是相等的亮度跳变。想要最平衡的渐变就选 OKLCH。
- 我可以生成多少级，能命名吗？
- 级数可设为 2 到 24 的任意值。11 级采用熟悉的 Tailwind 编号（50、100…900、950）；其他级数则在 50 到 950 之间均匀分布。你也可以在设置中输入逗号分隔的自定义标签列表，它会覆盖级数并按你输入的方式为每一级命名。
- WCAG 对比度提示是如何计算的？
- 对每一级，工具都会根据相对亮度计算它与纯白和纯黑的 WCAG 对比度。每行的两个小单元格显示白底和黑底上的字母 A，当对比度达到 4.5:1（普通文字 AA）时高亮；将鼠标悬停可看到精确比值以及它是 AA 还是 AAA。
- 我的颜色数据会被上传吗？
- 不会。色彩运算、对比度检查以及三种导出全部在你的浏览器中完成，任何颜色值都不会发送到服务器。它可离线使用，并为你的配色保密。