在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协议。
该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。