如何使用JavaScript操作CSS颜色

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在学习如何使用JavaScript操作CSS颜色之前,我们需要对CSS如何设置颜色有一个基本的了解。CSS设置颜色模式有多种,最为常见的模型有:RGBHSL。我们先来看一下这两种颜色模式。

颜色模式

RGB

RGBredgreenblue三个单词首字母的缩写,其由三个数字组成,每个数字表示其各自颜色的光在最终颜色中包含多少。在CSS中,这些数字都在0~255之间,可以作为CSS的rgb函数的参数,并且用逗号来分隔。例如rgb(50,100,0)

RGB是一个加色颜色系统,这意味着每个数字越高,最终的颜色就越亮。如果所有值相等,则颜色为灰色;如果所有值都是零,则结果为黑色;如果所有值都是255,结果将是白色。

另外,你也可以使用十六进制表示RGB颜色,在这种表示法中,每种颜色的整数都是从基数10转换为基数16。例如,rgb(50,100,0)转换出来的十六进制就是#326400

虽然我们经常发现自己出于习惯而使用RGB(特别是十六进制),但我经常发现它很难读,而且特别难操作。

HSL

HSL是huesaturationlight三个单词首字母的简写,也是由这三个值组成。色调对应于色盘上的位置,由CSS的角度值表示,最常见的是deg单位。

饱和度用百分比表示,是指颜色的强度。当饱和度为100%时,它是一个彩色;当饱和度越底,颜色就越少,直到0%,就会是一个灰色。

亮度也是用百分比来表示,指的是颜色亮度。常规亮度是50%。无论色调和饱和度如何,100%的亮度将是纯白色,而0%的亮度将是纯黑色。

HSL颜色模型是一个更直观的颜色模型。颜色之间的关系更加明显,而对颜色的操作往往就像调整一个数字一样简单。

有关于CSS颜色更深入的介绍,可以阅读下面相关文章进行扩展:

颜色模型之间的转换

RGB和HSL颜色模型都将颜色分解为不同的属性。要在语法之间进行转换,首先需要计算这些属性。

除了色调,我们讨论过的每个值都可以用百分比表示。甚至RGB值也是字节大小的百分比表示。在下面的公式和函数中,这些百分比将用01之间的小数表示。

我想指出的是,我们在这篇文章中不会深入讨论这些数学,相反,我将简要介绍原始的数学公式,然后将其转换为JavaScript公式。

从RGB中计算亮度

亮度是三个HSL值中最容易计算的。数学上,公式如下,其中M为RGB值的最大值,m为RGB值的最小值:

JavaScript表达即如下:

const rgbToLightness = (r, g, b) => 1 / 2 * (Math.max(r, g, b) + Math.min(r, g, b));

从RGB中计算饱和度

饱和度只比亮度稍微复杂一点。如果亮度为01,则饱和度值为0。对应的数学公式如下(其中L为亮度):

对应的JavaScript代码:

const rgbToSaturation = (r, g, b) => {
    const L = rgbToLightness(r, g, b)
    const max = Math.max(r, g, b)
    const min = Math.min(r, g, b)
    return (L === 0 || L === 1) ? 0 : (max - min) / (1 - Math.abs(2 * L - 1))
}

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/how-to-manipulate-css-colors-with-javascript.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部