色阶调色板（Color Scale Palette）是指基于一个基色，通过系统性地改变其明度（亮度）而生成的一系列颜色变体。通常从极浅（接近白色）到极深（接近黑色）均匀分布，形成完整的色彩梯度。这种调色板在UI设计系统中非常常见，如Material Design的50-900色阶系统、Tailwind CSS的颜色等级等，为设计师和开发者提供了丰富的色彩选择。

色阶调色板应用广泛：① UI设计中的按钮状态（hover用稍深色阶、active用更深色阶）；② 数据可视化中的热力图和渐变图表；③ 品牌色彩系统建设，统一产品视觉；④ 网页背景与卡片层级区分；⑤ 图标和插画的多层次着色；⑥ CSS主题变量定义。拥有完整的色阶体系能让界面色彩协调统一，提升设计效率。

HSL（色相Hue、饱和度Saturation、明度Lightness）色彩空间更符合人类对颜色的直觉感知。在HSL中，只需保持色相(H)和饱和度(S)不变，均匀调整明度(L)值，即可生成视觉上自然流畅的色阶渐变。相比RGB空间直接插值，HSL方式能避免出现灰暗或不自然的中间色，生成的色阶更加和谐统一，这也是主流设计工具（如Figma、Sketch）常用的方式。

选择基色时建议：① 选择中等明度（L约40%-70%）的颜色作为基色，这样上下都有足够的明度变化空间；② 饱和度适中（S约50%-90%）的颜色能产生更丰富的色阶层次；③ 低饱和度的基色（接近灰色）生成的色阶更柔和，适合中性色系统；④ 高饱和度基色生成的色阶更鲜明，适合强调色和品牌色。本工具默认的靛蓝色（#6366F1）就是很好的起点。

本工具采用HSL色彩空间，保持基色的色相(H)和饱和度(S)不变，将明度(L)在5%到95%之间均匀分布。例如10级色阶对应L值分别为95%、85%、75%、65%、55%、45%、35%、25%、15%、5%。这种线性明度分布确保了视觉上的平滑过渡，每一级都有明显的明暗差异，既不过于微妙也不过于跳跃，适合大多数设计场景。

您可以通过多种方式应用：① 直接复制HEX值用于CSS属性（如background-color、color等）；② 使用"复制CSS变量"功能，生成--color-50到--color-900格式的CSS自定义属性，粘贴到:root中即可全局使用；③ 复制JSON数组用于JavaScript动态主题切换；④ 复制HSL值用于需要动态调整的场景。本工具支持以上所有导出格式，一键即可完成。

浅色阶（L>70%）适合：页面背景、卡片底色、禁用状态按钮、次要文字背景、hover高亮效果。中等色阶（L≈40%-70%）适合：主要按钮、重点文字、图标着色、标签和徽章。深色阶（L<30%）适合：文字颜色、深色模式背景、强调边框、阴影效果。合理搭配不同明度的色阶可以建立清晰的视觉层次和信息层级。