CodeKitHub工具介绍
明暗色阶是同一颜色在不同亮度下的一系列变体，广泛用于界面设计中——比如悬停状态、禁用状态、边框以及需要与品牌色关联但又不完全相同的背景色。
这个工具会把你的基础颜色转换到 HSL 色彩空间，保持色相和饱和度不变，让亮度从约 95%（接近白色的浅调）逐步过渡到约 10%（接近黑色的深调），原始颜色则自然落在色阶中间的位置。
为什么使用它？
- 从任意单一颜色生成设计系统风格的色阶（类似 Tailwind 的 50/100/200…/900 色阶），而不局限于固定的预设调色板。
- 根据需要的精细程度选择 7 级、9 级或 11 级色阶。
- 每一级都显示精确的 HEX 代码和亮度百分比——点击即可复制。
- 整条色阶保持色相和饱和度不变，所有明暗色都能清晰地看出与基础色的关联，而不会偏向灰色。
- 免费、即时、完全本地运行。
使用方法
- 使用取色器或输入 HEX 代码选择你的基础颜色。
- 选择需要的色阶级数（7 级、9 级或 11 级）。
- 直接在每个色块上读取对应的 HEX 代码和亮度百分比。
- 点击任意色块即可复制其 HEX 代码。
示例
输入
#3B82F6（中等蓝色），9 级输出
从接近白色的浅调（约 95% 亮度）到接近黑色的深调（约 10% 亮度）共 9 级色阶，#3B82F6 本身位于色阶中间的位置色相和饱和度在全部 9 级中保持不变——只有亮度在变化——因此每一级都能清晰地看出属于同一色系。
常见问题
这和 Tailwind CSS 色阶所用的是同一套体系吗？
底层思路相同（固定色相/饱和度，只改变亮度），但不是对 Tailwind 具体调色板的精确复刻——Tailwind 的 50-900 色阶是设计师手工调校的，而不是靠单一公式生成的。这个工具能从你选择的任意颜色生成一套结构相近的色阶，当你的基础色不在 Tailwind 预设范围内时会很有用。
为什么相邻两级颜色看起来几乎一样？
这种情况在色阶的极浅或极深端较容易出现，因为人眼感知的亮度变化会比数值百分比所暗示的更慢（这是人类色彩感知的固有特性，并非本工具特有）。选择更少的级数（比如 7 级而不是 11 级）可以拉开各级之间的亮度差距，减少看起来相近的色块。
我可以把这些明暗色直接用作 CSS 自定义属性吗？
可以——复制每个 HEX 代码，粘贴到你的 CSS 变量中（例如 --color-brand-100 到 --color-brand-900），按项目使用的命名规则把色阶位置对应起来即可。
我该用这个工具还是颜色混合器？
如果你要制作同一颜色更浅或更深的版本——悬停状态、细微的背景色、与品牌色关联的边框——用这个明暗生成器。如果你需要的是两种不同颜色之间的过渡色（比如主蓝色和辅助橙色之间的一级），请改用颜色混合器，它是按任意比例对两种颜色的 RGB 通道做插值，而不是改变单一颜色的亮度。
如果我的基础色本身就已经很浅或很深，会怎样？
基础色始终位于中间一行，浅调向上延伸到约 95% 亮度，深调向下延伸到约 10%。如果基础色已接近白色，浅调部分会被压缩到一个很窄的亮度区间（相邻行看起来接近），而深调部分则会分布得很宽——基础色接近黑色时情况则相反。要获得分布最均匀的色阶，建议从中等亮度（大约 40%-60% 亮度）的颜色版本开始生成。
它能生成灰调色（颜色与灰色混合）吗？
不能——本工具只改变亮度、保持饱和度不变，因此生成的是浅调和深调，而不是灰调。如果想要更柔和的色阶，可以先降低基础色的饱和度（在取色器中选一个更灰的版本），再基于它生成色阶，这样每一级都会继承较低的饱和度。