OKLCH · 色调阶
色调阶生成器
输入一种颜色，得到感知均匀的色阶——三种模式（完整 50→950 / 变浅 / 变深），3–13 步可调，导出格式覆盖 Tailwind v4 与原生 CSS 变量。
11
小贴士
在 Tailwind v4 项目里，把 Tailwind 导出粘进 @theme { … } 内，bg-brand-500 等自定义阶工具类就立即生效。
导出色阶
HEX 列表
#F6ECFF, #EDE0FF, #DAC9FF, #C2AAFF, #A583FF, #8B57F8, #7538E0, #5D28B5, #46198C, #2A085C, #0F002CCSS 变量
:root {
--color-50: #F6ECFF;
--color-100: #EDE0FF;
--color-200: #DAC9FF;
--color-300: #C2AAFF;
--color-400: #A583FF;
--color-500: #8B57F8;
--color-600: #7538E0;
--color-700: #5D28B5;
--color-800: #46198C;
--color-900: #2A085C;
--color-950: #0F002C;
}Tailwind 主题
brand: {
'50': '#F6ECFF',
'100': '#EDE0FF',
'200': '#DAC9FF',
'300': '#C2AAFF',
'400': '#A583FF',
'500': '#8B57F8',
'600': '#7538E0',
'700': '#5D28B5',
'800': '#46198C',
'900': '#2A085C',
'950': '#0F002C',
}为什么用 OKLCH
HSL 明度在骗你，OKLCH 不会。
过去二十年，标准做法是拿 HSL，把 L 从 90% 走到 10%——瞬间生成色阶。结果总是令人失望：yellow-50 消失在页面里，blue-900 看起来和纯黑没区别，所谓的"中段"根本不在中段。
OKLCH 修了这件事。它的 L 轴是感知均匀的——L 从 0.7 走到 0.5，不管色相是红、蓝还是黄，视觉上的"变暗幅度"都一样。两个不同色相用相同 L 阶梯生成的色阶，每一阶看起来亮度一致。
我们生成的每一阶都用 Tailwind v4 同款 OKLCH 阶梯：50 阶约 L 0.97，950 阶约 L 0.15。极端处饱和度温和降低——纯白和接近纯黑物理上就不能高饱和。生成结果可直接放进 Tailwind 主题。
三种模式，对应三种任务
该用哪种，取决于你要回答什么问题。
完整阶（50 → 950）
固定 L 阶梯的完整色阶。扩展设计系统、构建 UI 令牌、对齐 Tailwind 命名时用它。
变浅（更亮）
从基准色逐步向白色靠近。用于分层背景、悬停态、品牌色之上的浅色叠加。
变深（更暗）
从基准色逐步向接近黑色靠近。用于按下态、浅色背景上的文字变体、深色模式表面。
常见问题
这个工具是免费的吗？
完全免费，无需注册，全部在浏览器本地运行。
为什么 50 阶或 950 阶和我的品牌色不一样？
本来就不应该一样。完整色阶里，品牌色通常落在 500——中段。50 阶是该色相的接近白色版本，950 阶是接近黑色版本。你输入的基准色决定整套色阶的"色调"。
能完全对齐 Tailwind 的阶梯吗？
我们使用 Tailwind v4 默认色板同款 L 位置，每阶的感知亮度与 slate、blue 等系列一致。具体饱和度不完全一致（Tailwind 对每个色相手工调过）但整套色阶看起来同属一个家族。
当饱和度超出色域怎么办？
高饱和色在 OKLCH 暗端可能超出 sRGB 色域。我们默默裁剪到最接近的可显示色——通常正是你想要的结果。
用几步合适？
11 步是 Tailwind 的约定，也是大多数设计系统标准化的选择。9 步适合更紧凑的色阶；5 步生产用太稀，但用于快速探索色板有用。
能分享色阶吗？
可以——分享按钮会把颜色、模式、步数编码进页面 URL 的 hash。打开链接即可看到同样的色阶。
变浅 / 变深用的是 HSL 还是 OKLCH？
OKLCH。在 OKLCH 里向白或黑插值，每一步在感知上均匀；HSL 插值则中段饱和度会异常。试一下两者你立刻能看出差别。