如何使用纯CSS调整HSL颜色明度值，无需依赖自定义CSS变量

API 探路者

2026-10-2

方法1：使用CSS相对颜色语法（最优解，无额外冗余）

这个是CSS Color Level 5新增的特性，不需要提前定义变量，直接基于继承的父元素颜色修改HSL的指定参数，完全符合你只改header颜色就同步nav色系的需求：

header {
    background-color: hsl(180, 90%, 35%);
}

nav {
    /* from inherit表示继承父元素的颜色，h表示复用父颜色的色相值，单独修改饱和度、明度参数即可 */
    background-color: hsl(from inherit h 80% 25%);
}

兼容性：Chrome 111+、Firefox 112+、Safari 16.4+均已支持，不需要兼容低版本浏览器优先选这个方案。

方法2：继承父色+filter组合（兼容低版本浏览器）

如果需要兼容不支持相对颜色语法的旧浏览器，可以用继承父元素背景色+组合滤镜的方式接近效果，调整参数可以尽可能匹配你要的HSL效果：

header {
    background-color: hsl(180, 90%, 35%);
    isolation: isolate; /* 避免滤镜效果外溢影响其他元素 */
}

nav {
    background-color: inherit;
    /* saturate调整到原饱和度的88.8%，brightness调整到原明度的71.4% */
    filter: saturate(0.89) brightness(0.71);
    position: relative;
}

nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: -1;
}