Javascript 根据背景颜色的亮度动态更改颜色

我用它来转换和处理颜色。我有一些元素，我想根据背景颜色动态地改变它们。因此，如果背景颜色为深色，则将文本设置为白色。如果是浅颜色，则将文本设置为黑色

这很简单：

myElem.color = color.RGBLuminance > 0.22 ? 'black' : 'white';

但我也会有阿尔法。如何测试背景的alpha和亮度

var myColor=新颜色（）；
var div=document.getElementById（'div'），
span=document.getElementById（'span'），
rgbColor=myColor.colors.RND.rgb；
霉色({
r:0，
g:0，
b:0
}“rgb”）；
/*霉色({
r:100，
g:200，
b:255
}“rgb”）*/
div.style.backgroundColor=rgba（rgbColor.r，rgbColor.g，rgbColor.b，0.3）；
span.style.color=myColor.colors.RGBLuminance>0.22？“黑'：'白'；
函数rgba（r，g，b，a）{
返回“rgba”（“+r+”、“+g+”、“+b+”、“+a+”）；
}

#div{
宽度：200px；
高度：200px；
}

你好

您可以使用

myColor.colors.alpha

因此，您可以使用类似于以下内容的检查：

span.style.color = myColor.colors.RGBLuminance > 0.22 || myColor.colors.alpha < 0.5 ? 'black' : 'white';

span.style.color=myColor.colors.RGBLuminance>0.22 | | myColor.colors.alpha<0.5？“黑'：'白'；

---

您可能需要处理这些条件（或添加更多案例）才能获得所需的行为。

color.js非常复杂，在后台处理很多事情。所以，它实际上也解决了你的问题。color.js在内部使用3层：前景或您刚刚选择的颜色，然后是保存的颜色的背景色，然后是自定义（纯色，因此没有alpha）背景色（color.js猜不到，因此您必须将其添加到选项中）：

然后（几乎）正确设置颜色，如：

myColor.setColor({ // 
    r: 0,
    g: 0,
    b: 0
}, 'rgb', 0.3); // but then with the correct alpha

…和color.js将提供一个变量

colors.rgbaMixBGMixCustom.luminance

，该变量提供您所需的值：

div.style.backgroundColor = myColor.toString(); // new method in Color()
span.style.color = myColor.colors.rgbaMixBGMixCustom.luminance  > 0.22 ?
    'black' : 'white';

rgbaMixBGMixCustom

是指设置

rgba

颜色与

BG

保存的背景颜色混合（叠加），我们可以在这里忽略它，因为它设置为

rgba（0,0,0,0）

和我们在开始时设置的自定义纯色背景颜色

custom

（还有一个方法

setCustomBackground（）

如果需要，稍后重置此选项）

---

rgbaMixBGMixCustom

还保存所有3层的结果颜色信息。

谢谢您的回答！我如何让它们结合起来，而不是‘或’？这取决于你所说的‘结合’是什么意思。恐怕你得自己决定适合你的标准的正确组合。

div.style.backgroundColor = myColor.toString(); // new method in Color()
span.style.color = myColor.colors.rgbaMixBGMixCustom.luminance  > 0.22 ?
    'black' : 'white';