HSL

什么是HSL

HSL 是一种颜色表示方式，它由三个值组成：

• H: 代表色相，取值范围为 0-360，0 为红色，120 为绿色，240 为蓝色
• S: 代表饱和度，取值范围为 0-100，0 为灰色，100 为全彩
• L: 代表亮度，取值范围为 0-100，0 为黑色，100 为白色, 50 为没有任何其他颜色的真是颜色

HSL 比 RGB 可视性跟强，更容易理解，更容易调整颜色, 比如你想提高一个颜色的亮度或者饱和度，只需要调整 L 或 S 的值即可
而在 RGB 中，你需要调整三个值，而且调整的效果不如 HSL 直观, 而且通常需要使用调色板工具

HSL 的两种形式

HSL 有两种形式的写法，一种是数值形式，一种是百分比形式

• 数值形式 hsl(47 52 21)
• 百分比形式 hsl(47% 52% 21%)
  数值形式的 CSS4 中的新格式，通常称为 CSS Level 4 HSL 语法，数值的范围为
• H 色相：0-360角度（表示颜色的位置
• S 饱和度和 L 亮度 : 0-100 的线性数值

百分比形式是经典的 CSS 3 语法，饱和度和亮度使用百分比单位

• H 色相: 0-360 角度
• S 和 L: 0% - 100% 表示相对比例

百分比单位更直观，特别是适合描述饱和度和亮度的相对大小

HSLA

旧版的 hsla() 语法是 hsl() 的别称。

实现 Alpha 通道

hsl(47 52% 21% / 20%)

hsla(47, 52, 21%, 0.4)