HSLa 万岁

巨大的、又长又粗的东西？ 高强度低合金钢？ 不，我们指的是色调、饱和度、亮度和 alpha，它是一种在 CSS 中声明颜色的方法。 它看起来像这样

#some-element {
  background-color: hsla(170, 50%, 45%, 1);
}

它类似于 RGBa，您声明三个值来确定颜色，然后声明第四个值来表示其透明度级别。 您可以在下面阅读有关浏览器支持的更多信息，但基本上，任何支持 rgba() 的浏览器也支持 hsla()。

HSL 和 RGB 颜色有新的语法！ 现在，在任一函数中都不需要逗号或“a”来设置 alpha 透明度。 相反，我们在 alpha 值前面使用正斜杠 (/)。 例如 hsl(170 50% 45% / 1) 而不是 hsla(170, 50%, 45%, 1)。 了解更多 有关更改和其他更新的 CSS 颜色功能。

• 色调 - 想想一个色轮。 大约 0^o 和 360^o 是红色，120^o 是绿色，240^o 是蓝色。 使用 0-360 之间的任何值。 超出此范围的值将为模 360。
• 饱和度 - 0% 是完全脱色的（灰度）。 100% 是完全饱和的（全色）。
• 亮度 - 0% 是完全黑暗的（黑色）。 100% 是完全明亮的（白色）。 50% 是平均亮度。
• alpha - 不透明度/透明度值。 0 是完全透明的。 1 是完全不透明的。 0.5 是 50% 透明。

让我们深入研究。

为什么它很酷？

HSLa 的真正吸引力在于它更直观地理解更改值对颜色的影响。 增加第二个值将增加该颜色的饱和度。 减少第三个值将降低该颜色的亮度。 这使得创建自己的即兴颜色变化变得更加容易。 我敢说，我们大多数人都无法使用 RGBa 模型创建如此美观且一致的颜色变化。

HSLa 模型还使以编程方式更改颜色值变得更加容易。 查看强调这一点的 演示工具。

为什么使用它较少？

这是我做的一个很大的假设，但据我所知，HSLa 在现实世界中的使用量远远少于 RGBa。 如果您有任何关于原因的想法，请在评论中分享。 我的理论是，就从屏幕或 Photoshop 文档中采样而言，HSL 值更难获得。

我猜 Photoshop 使用色调/饱和度/亮度模型。 说实话，我不太了解其中的区别，但当我第一次尝试时，我遇到了这种情况。

获取 HSLa 值

有一个名为 Colors 的 Mac 小应用程序，由 Matt Patenaude 开发。

您只需单击放大镜，然后单击屏幕上的任何位置。 它将在框中填充颜色。 然后，您可以选择 hsla 选项并将其复制到剪贴板。 有一些首选项可以调整格式，使其完全符合您的需要。 效果很好。 我唯一不满的是，如果关闭小浮动窗口，除非退出并重新启动应用程序，否则它不会重新打开。 可能是 Snow Leopard 的问题，而且应用程序很久没有更新了？ 我不知道。

如果有人有用于捕获具有 HSLa 功能的颜色，并作为 Windows 或 Linux 工具的首选，请在评论中告诉我，我将在此更新。

浏览器支持

Firefox 3.0+、Safari 3+、Chrome 6+（可能更早的版本也支持？）、Opera 10+（可能更早的版本也支持？）。

像往常一样，IE 被排除在外。 甚至版本 8。 我感觉版本 9 将支持它，但还没有证据。 有人安装了它并且可以测试吗？ 对于 IE，您只需声明一个备用颜色。 IE 8 也不支持 RGBa，因此使用十六进制代码是最好的选择。

#some-element { 
  background-color: #e2ecf0; /* Fallback */
  background-color: hsla(190, 30%, 94%, 1);
  background-color: hsl(190 30% 94% / 1);
}

我的工具

为了演示以编程方式创建颜色变化的简便性，我创建了 HSLa Explorer。 页面上有两个滑块。 顶部的滑块控制色调值，第二个滑块控制不透明度级别。 它获取这些值并构建一个包含 100 种颜色变化的网格，其中饱和度和亮度在矩阵中变化。

由于某种原因，IE 不喜欢 JavaScript 中的内容（在演示中），但无论如何，IE 都不喜欢 HSLa。 感谢 Matthieu Sieben 帮助改进演示。

更多工具

• Brandon Mathis 开发的 HSL 颜色选择器
• Matt Groeber 开发的 HSL 随机颜色生成器