在网页样式开发中，调整整体页面色调是常见的需求，传统的RGB颜色调整方式需要逐个修改每个元素的颜色值，效率很低。而HSL色彩模式可以很好地解决这个问题，通过统一调整亮度参数就能快速改变整体页面的明暗效果。
HSL色彩模式基础
HSL是色相（Hue）、饱和度（Saturation）、亮度（Lightness）的缩写，是一种更符合人类对颜色感知的色彩表示方式。三个参数的含义分别是：
- 色相（H）：表示颜色的类型，取值范围是0到360，对应色轮上的不同颜色，比如0是红色，120是绿色，240是蓝色。
- 饱和度（S）：表示颜色的鲜艳程度，取值范围是0%到100%，0%是灰色，100%是最鲜艳的状态。
- 亮度（L）：表示颜色的明暗程度，取值范围是0%到100%，0%是黑色，100%是白色，50%是标准亮度。
在CSS中，HSL颜色的使用格式是hsl(色相, 饱和度, 亮度)，比如红色可以写成hsl(0, 100%, 50%)。
用CSS变量结合HSL调整整体亮度
要实现快速调整整体页面色调，核心思路是把所有颜色相关的HSL参数中的亮度值提取为CSS变量，需要调整整体亮度时只需要修改这个变量的值即可。
第一步：定义基础CSS变量
首先在根选择器:root中定义全局的HSL相关变量，把亮度值单独提取出来：
:root {
/* 基础色相，这里以蓝色为例 */
--primary-h: 240;
/* 基础饱和度 */
--primary-s: 100%;
/* 全局亮度变量，初始为标准亮度 */
--global-lightness: 50%;
/* 基于变量生成具体颜色 */
--primary-color: hsl(var(--primary-h), var(--primary-s), var(--global-lightness));
--bg-color: hsl(0, 0%, calc(var(--global-lightness) - 30%));
--text-color: hsl(0, 0%, calc(var(--global-lightness) + 30%));
}
第二步：在样式中使用这些变量
把页面中需要用到颜色的元素都绑定到这些变量上：
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
.btn {
background-color: var(--primary-color);
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
.card {
background-color: hsl(0, 0%, calc(var(--global-lightness) - 20%));
padding: 16px;
border-radius: 8px;
margin: 16px 0;
}
第三步：通过JS修改亮度变量实现快速调整
只需要修改--global-lightness变量的值，就能统一调整所有关联颜色的亮度：
// 调亮页面，亮度增加到70%
document.documentElement.style.setProperty('--global-lightness', '70%');
// 调暗页面，亮度降低到30%
document.documentElement.style.setProperty('--global-lightness', '30%');
实际效果说明
当把--global-lightness从50%调整到70%时，所有基于这个变量计算的颜色都会变亮：背景色会更浅，文字颜色会更暗，主色调也会更明亮。反之调整到30%时，所有颜色都会变暗，快速实现深色模式的效果。
这种方式的优势在于不需要逐个修改每个颜色值，只需要调整一个变量就能改变整体色调，后续如果需要调整色相或者饱和度，也可以把对应的参数提取为变量，实现更灵活的颜色控制。
注意事项
- 计算亮度时要注意取值范围，避免calc计算后的结果超出0%到100%的范围，比如背景色的亮度计算时如果减30%，要确保初始亮度不会低于30%。
- 如果需要适配系统的深色模式偏好，可以结合
prefers-color-scheme媒体查询来自动设置亮度变量：
@media (prefers-color-scheme: dark) {
:root {
--global-lightness: 30%;
}
}
@media (prefers-color-scheme: light) {
:root {
--global-lightness: 50%;
}
}