使用HSL模型、CSS自定义属性配合calc()、Sass预处理器或PostCSS插件可实现颜色明暗调整。1. HSL通过调节lightness值直接控制亮度；2. CSS自定义属性结合calc()支持动态亮度变化；3. Sass提供lighten()/darken()函数编译为标准CSS；4. PostCSS插件扩展CSS语法支持颜色函数。核心是理解亮度即lightness变化，按项目需求选择合适方案。
在CSS中，并没有直接的 lighten 或 darken 函数，但你可以通过多种方式实现颜色亮度的调整。这些方法包括使用 HSL 颜色模型、CSS自定义属性配合 calc()、PostCSS 插件，或借助预处理器如 Sass。下面介绍几种实用技巧。
使用 HSL 调整亮度
HSL 代表色相（Hue）、饱和度（Saturation）、亮度（Lightness），其中 Lightness 直接控制颜色明暗。
hsl(200, 50%, 70%) 比 hsl(200, 50%, 30%) 更亮。- Lightness 值为 0% 是纯黑，100% 是纯白，50% 是标准色彩
- 提高 lightness 值让颜色变亮，降低则变暗
- 适合在原色基础上微调明暗，保持色调一致
使用 CSS 自定义属性模拟 lighten/darken
虽然原生CSS不支持 lighten/darken 函数，但可以结合 HSL 和自定义变量手动控制。
:root {
--primary-h: 200;
--primary-s: 50%;
--primary-l: 50%;
}
.btn {
background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}
.btn:hover {
background-color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 20%));
}
- 通过 calc() 提高或降低 lightness 实现变亮/变暗
- hover 状态下增加亮度，营造交互反馈
- 适合需要动态调整的主题系统
使用 Sass 等预处理器
Sass 提供了内置函数 lighten() 和 darken()，编译后生成标准CSS。
立即学习“前端免费学习笔记（深入）”；
$base-color: #3498db;
.bright {
background: lighten($base-color, 20%);
}
.dim {
background: darken($base-color, 20%);
}
- lighten(#3498db, 20%) 输出更浅的蓝色
- darken() 会减少亮度，颜色更深
- 适用于项目使用构建工具时，提升开发效率
借助 PostCSS 插件实现
使用 postcss-preset-env 或 postcss-functions 可以在现代工作流中扩展CSS能力。
- 配置插件后可在CSS中写类似 darken(color, 10%) 的函数
- 最终会被编译成具体的 hex 或 hsl 值
- 适合团队项目统一颜色处理逻辑
基本上就这些常用方式。HSL 最简单直接，Sass 更适合复杂项目，而自定义属性加 calc() 可以在无构建环境下灵活使用。关键是理解亮度本质是 lightness 的变化，选对方法就能轻松实现 color lighten/dark 效果。
