在CSS样式开发中，灰色层级不统一是常见的问题，很多开发者习惯用随机的十六进制值或者RGB值定义灰色，导致不同灰色的亮度没有规律，页面视觉显得杂乱。HSL色彩模式可以很好地解决这个问题，通过精确控制亮度参数，就能让所有灰度的层级保持一致。
HSL色彩模式的基本结构
HSL分别代表色相（Hue）、饱和度（Saturation）、亮度（Lightness），其中色相取值范围是0到360，饱和度是0%到100%，亮度也是0%到100%。当饱和度设置为0%时，无论色相取什么值，颜色都会变成灰色，此时只需要调整亮度参数，就能得到不同层级的灰色。
比如亮度为0%时是纯黑色，亮度为100%时是纯白色，中间的亮度值对应不同深浅的灰色，这样的定义方式让灰度的层级有明确的数值依据，不会出现随机的亮度差异。
用HSL定义统一灰色层级的步骤
1. 确定灰度的基准亮度间隔
首先根据设计需求确定灰度的层级数量，比如需要5个层级的灰色，就可以把亮度间隔设置为20%，从20%到100%依次取值，这样每个灰度的亮度差异是均匀的。
2. 设置饱和度为0%
要得到灰色，必须把饱和度设置为0%，此时色相的值可以任意设置，因为饱和度为0时色相不会影响最终颜色，通常可以统一设置为0，方便后续维护。
3. 定义CSS自定义属性统一管理
把定义好的灰色层级用CSS自定义属性存储，后续需要使用灰色的时候直接调用对应的变量，避免重复定义，也方便后续调整。
实际代码示例
下面是一个定义5个层级灰度的完整示例，所有灰度的饱和度都是0%，亮度按20%的间隔递增：
:root {
/* 定义5个层级的灰色，亮度从20%到100%，间隔20% */
--gray-1: hsl(0, 0%, 20%); /* 最深的灰色 */
--gray-2: hsl(0, 0%, 40%);
--gray-3: hsl(0, 0%, 60%); /* 中间灰色 */
--gray-4: hsl(0, 0%, 80%);
--gray-5: hsl(0, 0%, 100%); /* 最浅的灰色，即白色 */
}
/* 使用示例：卡片背景用中间灰色，文字用最深的灰色 */
.card {
background-color: var(--gray-3);
color: var(--gray-1);
padding: 16px;
border-radius: 8px;
}
/* 辅助文字用次深的灰色 */
.card .sub-text {
color: var(--gray-2);
font-size: 14px;
}
对比传统方式的优势
传统的十六进制定义灰色的方式，比如#333333、#666666、#999999，虽然看起来有规律，但实际对应的亮度值并不均匀，调整的时候也很难快速算出对应的数值。而用HSL定义的话，只要调整亮度参数就能得到预期的灰度，数值直观，修改的时候只需要改亮度值，不需要计算十六进制的对应关系。
如果后续需要调整所有灰度的亮度，只需要修改自定义属性里的亮度数值，所有使用这些变量的地方都会自动更新，维护成本大大降低。
注意事项
- 饱和度为0%是得到灰色的核心，不要误把饱和度设置为其他值，否则会得到带色调的颜色。
- 亮度值不要超出0%到100%的范围，否则浏览器会按照边界值处理。
- 如果设计稿给出的灰色是十六进制值，可以通过在线工具转换对应的HSL亮度值，再按照统一的间隔调整，保持层级一致。