如何在CSS中使用颜色亮度调整_color lighten dark技巧

发布时间：2025-11-20

点击量：

使用HSL模型、CSS自定义属性配合calc()、Sass预处理器或PostCSS插件可实现颜色明暗调整。1. HSL通过调节lightness值直接控制亮度；2. CSS自定义属性结合calc()支持动态亮度变化；3. Sass提供lighten()/darken()函数编译为标准CSS；4. PostCSS插件扩展CSS语法支持颜色函数。核心是理解亮度即lightness变化，按项目需求选择合适方案。

如何在css中使用颜色亮度调整_color lighten dark技巧

在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。

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

$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 效果。

以上就是如何在CSS中使用颜色亮度调整_color lighten dark技巧的详细内容，更多请关注其它相关文章！

上一篇：如何在CSS中控制元素尺寸_width height max

下一篇：如何在CSS中使用::before添加装饰图标_通过::be