HSL() / HSLa() 在程序化颜色控制中非常出色

如果您需要在原生 CSS 中手动操作颜色，HSL 几乎是唯一的选择。 HSL（CSS 中的 hsl() 和 hsla() 函数）代表色相、饱和度、亮度，以及可选的 alpha。我们之前讨论过它，但我们可以进一步分解它，并利用它做一些有趣的事情。

色相： 想象一个色轮。 0^o 和 360^o 附近是红色。 120^o 是绿色，240^o 是蓝色。使用 0 到 360 之间的任何值。高于和低于的值将对 360 取模。
饱和度： 0% 是完全不饱和（灰色）。 100% 是完全饱和（全色）。
亮度： 0% 是完全暗（黑色）。 100% 是完全亮（白色）。 50% 是平均亮度。
alpha： 不透明度/透明度值。 0 是完全透明。 1 是完全不透明。 0.5 是 50% 透明。

您可以手动操作这四个值中的任何一个，并对将要发生的事情有一个大致的了解。更改色相以在色轮上进行旋转。更改饱和度以获得更深或更柔和的颜色。更改亮度本质上是混合黑色或白色。

您可能对 rgb() 有些了解，知道 rgb(255, 0, 0) 明显是红色，或者 rgb(0, 0, 0) 是黑色，但操作这些值以获得浅紫色，或者从森林绿开始并使其更浅，并不完全是心算。您甚至可能是那种可以通过十六进制代码识别颜色的聪明人。在派对上问问 David DeSandro。不过，没有什么比 HSL 更直观了。

那些走在技术前沿的人可能会记得颜色级别 4 的工作草案中的 color() 函数和更直观的子函数。或者，您可能会热衷于使用 Sass 颜色函数或您自己的自制东西。祝您一切顺利！

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 Sass 颜色函数笔记。

在使用 JavaScript 玩弄颜色时，我非常喜欢 HSL。例如，假设您想生成一些不同的红色色调。您可以围绕一些值随机化 H、S 和 L。

查看 CodePen 上 Chris Coyier (@chriscoyier) 的随机红色笔记。

不久前，我基本上做了同样的事情，但旋转了色相来制作这个星际之门动画。

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 Sparklegate 笔记。

如果您在 JavaScript 中使用颜色并且想要使随机化产生令人愉悦的颜色，请试用 PleaseJS。

需要一个快速的颜色选择器？我很久以前就制作了这个，并且很快将其移植到 CodePen 上。

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 HSL 浏览器笔记。

如果您需要选择，还可以使用 HSL 颜色选择器和 Mothereffering HSL。

查看 CodePen 上 Graham Pyne (@gpyne) 的 HSL 笔记。

想更多地了解网络上的颜色吗？不要错过 Sarah Drasner 的网络颜色指南。其中包含大量极好的内容，可以提升您对颜色操作的理解。

查看 CodePen 上 Dan Wilson (@danwilson) 的 HSL 笔记。

评论