HSL和HSLA是基于色调、饱和度、亮度的颜色表示法，HSL不支持透明度，HSLA增加Alpha通道控制透明度，适用于需要半透明效果的场景。

HSL 和 HSLA 是 css 中用于表示颜色的两种方式，它们都基于色调（Hue）、饱和度（Saturation）和亮度（Lightness）三个属性，但在透明度支持上有所不同。

HSL 颜色表示

HSL 表示法使用三个值来定义颜色：

• 色调（Hue）：用角度值表示，范围是 0 到 360，代表色轮上的颜色位置，如 0（或 360）为红色，120 为绿色，240 为蓝色。
• 饱和度（Saturation）：百分比值，0% 表示完全去色（灰色），100% 表示颜色最鲜艳。
• 亮度（Lightness）：百分比值，0% 为黑色，50% 为标准亮度，100% 为白色。

例如：hsl(240, 100%, 50%) 表示一个标准蓝色。

HSL 不支持透明度，颜色始终是不透明的。

立即学习“前端免费学习笔记（深入）”；

HSLA 颜色表示

HSLA 在 HSL 的基础上增加了一个 Alpha 通道，用于控制颜色的透明度：

• 前三个参数与 HSL 相同：色调、饱和度、亮度。
• Alpha 透明度：取值范围是 0 到 1，0 表示完全透明，1 表示完全不透明，0.5 表示半透明。

例如：hsla(240, 100%, 50%, 0.5) 表示一个半透明的蓝色。

稿定AI社区

在线AI创意灵感社区

60

查看详情

使用 HSLA 可以实现背景叠加、文字阴影透明等视觉效果，增强页面层次感。

实际应用建议

如果需要设置透明效果，比如模态框遮罩、渐变叠加，优先选择 HSLA。

在仅需纯色且无需透明时，HSL 更简洁，可读性高，适合设计系统中统一管理主题色。

现代浏览器对 HSL 和 HSLA 支持良好，可以放心使用。

基本上就这些。

以上就是在