在CSS中，我们经常会使用数字颜色来设置元素的颜色，比如 #000000 表示黑色，#FFFFFF 表示白色。但是，有时候我们希望能够通过数字来直接改变颜色，比如将黑色的 #000000 改成红色的 #FF0000。
这时候，我们可以使用一个叫“HSL（色相、饱和度、亮度）颜色模式”的方法来实现。
HSL颜色模式是一种通过三个参数来描述颜色的模式，分别是色相（H），饱和度（S）和亮度（L）。其中，色相表示颜色在色轮上的位置，取值范围为0-360；饱和度表示颜色的纯度，取值范围为0%-100%；亮度表示颜色的明暗程度，取值范围为0%-100%。
以红色为例，它在色轮上的位置是0度，纯度是最高的100%，明度是最亮的100%。因此，我们可以将红色的颜色代码表示为“hsl(0, 100%, 100%)”。
要想通过数字来改变颜色，我们只需要改变其中的三个参数即可。比如，如果要将红色的颜色调暗，我们可以将亮度调低，比如改成“hsl(0, 100%, 50%)”，表示明度降低到了50%。同理，如果要将红色的颜色调成橙色，我们可以将色相调整为30度，表示在红色和黄色之间，例如“hsl(30, 100%, 50%)”。
可以看到，使用HSL颜色模式可以非常方便地通过数字来改变颜色，而不用记住固定的颜色代码。如果你还不熟悉HSL颜色模式，不妨试着多多尝试，相信你会发现更多有趣的颜色组合！
文章说明:
本文原创发布于探乎站长论坛，未经许可，禁止转载。
题图来自Unsplash，基于CC0协议。
该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。
