文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载HSL 是一种比十六进制颜色更直观的 CSS 颜色定义方式它通过色相Hue、饱和度Saturation和亮度Lightness三个分量来描述颜色并可选地附加第四个分量 Alpha 来控制透明度。本篇指南基于 TIL 仓库中的 Define HSL Colors With Alpha Values 笔记系统讲解如何在 CSS 中使用带 Alpha 的 HSL 颜色你将掌握现代的无逗号hsl()语法、为了兼容旧浏览器而保留的hsla()逗号分隔写法以及两种写法在真实样式中的配合与取舍。HSL 三要素与 Alpha 第四通道HSL 是 Hue、Saturation、Lightness 三个英文单词首字母的缩写分别对应一个 HSL 颜色值的三个组成部分Hue色相以角度表示的颜色种类取值范围通常是0deg到360deg0deg/360deg为红色顺时针依次经过橙色、黄色、绿色、青色、蓝色、紫色再回到红色。Saturation饱和度颜色中色彩的浓烈程度以百分比表示0%为纯灰100%为最鲜艳。Lightness亮度颜色的明暗程度同样以百分比表示0%为黑色100%为白色50%通常是最具代表性的“标准”明度。在这三个分量之外HSL 颜色还可以带上第四个分量Alpha用来描述颜色的透明度transparency——即该颜色对背景元素的遮盖程度。Alpha 为1或100%表示完全不透明为0或0%表示完全透明。现代写法hsl()无逗号语法现代 CSS 语法允许直接使用hsl这一函数无论是否携带 Alpha 值都不需要使用逗号分隔符。前三个值以空格分隔如果要包含 Alpha 值则必须用正斜杠/将它与前面三个值隔开.modern-hsl { background-color: hsl(340deg 100% 50%); } .modern-hsla { background-color: hsl(340deg 100% 50% / 0.75); }上述代码中.modern-hsl得到一个色相340deg、饱和度100%、亮度50%的完全饱和的品红色完全不透明.modern-hsla在同样的颜色基础上通过/ 0.75附加了0.75的 Alpha 值即 75% 不透明度背景下的内容会以 25% 的程度透出来。在这种现代语法下Alpha 值既可以写成0到1之间的小数如/ 0.75也可以写成百分比如/ 75%deg单位在不需要强调单位时同样可以省略直接写作hsl(340 100% 50%)。这套写法源自 CSS Color Module Level 4语法更简洁、阅读顺序更贴近“颜色本身 透明度”的直觉。旧版写法hsla()逗号分隔语法如果需要支持 IEInternet Explorer就必须退回到旧语法。旧版hsl要求使用逗号分隔各分量而要应用 Alpha 值则必须把函数名换成hslaAlpha 作为第四个逗号分隔的参数传入.old-hsl { background-color: hsl(340deg, 100%, 50%); } .old-hsla { background-color: hsla(340deg, 100%, 50%, 0.75); }可以看到旧语法与新语法的唯一区别就在分隔符和函数名上旧版hsl(340deg, 100%, 50%)用逗号分隔带透明度时写为hsla(340deg, 100%, 50%, 0.75)新版hsl(340deg 100% 50%)用空格分隔带透明度时仍用hsl写作hsl(340deg 100% 50% / 0.75)。两种语法的参数与差异速查对比维度现代语法CSS Color Module Level 4旧版语法兼容 IE函数名一律使用hsl()无透明度用hsl()带透明度必须用hsla()分隔符空格分隔前三个分量逗号分隔全部参数Alpha 写法用/与前三个值分隔如hsl(340deg 100% 50% / 0.75)作为第四个逗号参数如hsla(340deg, 100%, 50%, 0.75)适用场景现代浏览器需要支持 IE 的旧项目各分量的取值范围速查分量取值范围示例Hue色相0deg~360deg可省略deg单位340deg为品红区间Saturation饱和度0%~100%100%为最鲜艳Lightness亮度0%~100%50%为最典型明度Alpha透明度0~1或0%~100%0.75/75%为 75% 不透明在真实样式中的组合应用HSL 带透明度的写法非常适合与同仓库 CSS 目录下的其他颜色技巧配合使用构建完整的设计系统与线性渐变配合在 Style A Background With A Linear Gradient 中背景色同样可以换成带 Alpha 的 HSL让渐变从半透明过渡到不透明实现更细腻的叠层效果例如background: linear-gradient(hsl(340deg 100% 50% / 0.5), hsl(340deg 100% 50% / 1))。与 SCSS 变量配合Define CSS Custom Properties With SCSS Variables 展示了 SCSS 变量需要插值#{}才能注入 CSS 自定义属性同理将 HSL 颜色存入$brand-color这样的变量后再通过变量派生不同透明度的版本能让整套配色只维护一个色相基准。与明暗调节函数配合在 SCSS 中还可以用lighten和darken函数调整亮暗见 Lighten And Darken With SCSS与 Alpha 通道结合即可同时控制颜色的“深浅”与“透明”两个维度。从仓库的 README.md 中可以看到整个 CSS 分类下css/目录的这些颜色相关笔记同属一个 TIL 知识体系适合作为手边速查手册连续阅读。浏览器兼容性与适用前提旧版逗号分隔的hsl()/hsla()语法是长期以来的标准写法兼容性最广也是需要支持 IE 时唯一的选择。现代的无逗号hsl()语法则以较新浏览器为适用前提具体到你的目标浏览器版本应以兼容性查询工具如 Can I Use的结果为准进行确认。一条务实的兼容策略是面向现代浏览器、希望语法最简洁时使用现代hsl()写法项目明确要求覆盖 IE 等旧环境时统一改用hsla()逗号分隔写法。两种写法产出的视觉结果完全一致区别只在于可用的浏览器范围因此完全可以在同一项目的不同构建产物中按需选择。赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐FAST 色彩工具链 matchLightnessIndex 解析基于 HSL 明度索引匹配的颜色定位方法FAST 色彩工具链 matchLightnessIndex 解析基于 HSL 明度索引匹配的颜色定位方法 导读 matchLightnessIndex 是前端UI组件Hippy 颜色样式指南RGB、HSL 与命名颜色从语法到 32 位原生颜色的源码转换原理Hippy 颜色样式指南RGB、HSL 与命名颜色从语法到 32 位原生颜色的源码转换原理 本篇基于 Hippy 官方文档 docs/api/style/c跨平台移动开发前端Sass 支持 CSS Color Level 4 rgb() / hsl() 新语法提案解析空格分隔通道与斜杠 AlphaSass 支持 CSS Color Level 4 rgb / hsl 新语法提案解析空格分隔通道与斜杠 Alpha 本篇技术指南以 Sass 官方提案 ac前端上一篇Cursor Free VIP多平台智能工具的开源解决方案下一篇三步轻松保存网页视频VideoDownloadHelper 浏览器扩展使用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考