Loading...
Loading...
色阶生成器
色阶生成器以一个基准色为起点，在 HSL 色彩空间中保持色相与饱和度不变、仅调整明度通道，生成由浅到深的 10 级色阶。点击任意色块即可复制其十六进制值，并能将整套色阶导出为 CSS 自定义属性或 Tailwind 颜色对象。它非常适合把单一品牌色扩展成用于背景、边框和悬停态的一致调色板。
由于色阶仅调整 HSL 明度，饱和度极高或接近纯黑的基准色在两端容易被压缩；若最浅或最深一级显得发灰，可适当调整基准色的饱和度。
仅改变基准色的明度值，生成从浅色到深色等距分布的十级色阶。
选中任意色块即可将其十六进制代码复制到剪贴板，可直接粘贴进样式表或设计工具。
将整套色阶按级别命名，输出为可直接粘贴的 CSS 自定义属性，适用于任何现代样式表。
生成与 Tailwind 主题配置兼容的数字编号颜色对象，将 50 到 900 映射到你生成的各级色阶。
通过十六进制输入或取色器选定一个基准色。
查看生成的 10 个色块，按从最浅到最深的顺序排列。
点击任意色块复制其十六进制代码，或使用导出按钮。
选择 CSS 变量或 Tailwind 对象，将输出粘贴到你的项目中。
把一个主品牌色扩展成完整的数字编号色阶，用于按钮、表面和各种状态。
将导出的对象放入 Tailwind 配置，即可添加色阶一致的自定义颜色。
无需凭感觉猜十六进制值，即可为悬停态选取稍深一级、为禁用控件选取更浅一级。
先将基准十六进制色解析为 RGB，再转换为 HSL，然后按十个目标明度值重新渲染；每个结果都转换回十六进制以供显示、复制和导出。
颜色转换和剪贴板复制全部在你的浏览器中运行。任何颜色值都不会上传或存储到服务器。
生成并渲染十个色块只需少量数学运算，因此更改基准色后调色板会即时更新。