Javascript 如何根据rgb和rgba背景色更改文本颜色？

我正在尝试根据背景颜色（rgb和rgba）更改文本颜色。 我需要使用rgb，但无法计算rgba颜色。 这是我的密码-

var rgb = this.css('background-color');
var pattern = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(,\s*\d+\.*\d+)?\)$/;
var matches = rgb.match(pattern);
var colorValue = Math.round(((parseInt(matches[1]) * 299) + (parseInt(matches[2]) * 587) + (parseInt(matches[3]) * 114)) /1000);

if (colorValue > 125) {
    this.css('color', '#444444');
} else if (parseInt(matches[4]) < 0.5) {
    this.css('color', '#444444');
} else {
    this.css('color', 'white');
}

var rgb=this.css（'background-color'）；
变量模式=/^rgba？\（\d+）\s*（\d+）\s*（\d+）（，\s*\d+\.\d+）$/；
var matches=rgb.match（模式）；
var colorValue=Math.round（（parseInt（匹配[1]）*299）+（parseInt（匹配[2]）*587）+（parseInt（匹配[3]）*114））/1000）；
如果（颜色值>125）{
css（'color'，'#4444'）；
}else if（parseInt（匹配[4]）<0.5）{
css（'color'，'#4444'）；
}否则{
css（'color'，'white'）；
}

我想不出这个错误

else if (parseInt(matches[4]) < 0.5) {
    this.css('color', '#444444');
}

else if（parseInt（匹配[4]）<0.5）{
css（'color'，'#4444'）；
}

---

感谢您的帮助。

这是基于java的andeiod解决方案

https://stackoverflow.com/users/815724/peter-o

 // Put this method in whichever class you deem appropriate
    // static or non-static, up to you.
    public static int getContrastColor(int colorIntValue) {
        int red = Color.red(colorIntValue);
        int green = Color.green(colorIntValue);
        int blue = Color.blue(colorIntValue);
        double lum = (((0.299 * red) + ((0.587 * green) + (0.114 * blue))));
        return lum > 186 ? 0xFF000000 : 0xFFFFFFFF;
    }

    // Usage
    // If Color is represented as HEX code:
    String colorHex = "#484588";
    int color = Color.parseColor(colorHex);

    // Or if color is Integer:
    int color = 0xFF484588;

    // Get White (0xFFFFFFFF) or Black (0xFF000000)
    int contrastColor = WhateverClass.getContrastColor(color);

---

我建议使用更好的正则表达式：

^rgba\（\d*）\、\s？（\d*）\、\s？（\d*）、\s？（[01]？\。\d*）\）$

我们知道Alpha值在0和1之间，因此我们可以查找

0.00

，

.25

，

1

，或者

1.00

。请考虑以下内容：

$（函数（）{
函数changeTextColor（obj）{
var rgb=obj.css（“背景色”）；
var模式；
如果（rgb.slice（0，4）=“rgba”）{
模式=/^rgba\（\d*）\，\s？（\d*）\，\s？（\d*），\s？（[01]？\。\d*）\）$/；
}否则{
模式=/^rgb\（\d*）\，\s？（\d*）\，\s？（\d*）\）$/；
}
var matches=rgb.match（模式）；
var red=parseInt（匹配[1]）；
var green=parseInt（匹配[2]）；
var blue=parseInt（匹配[3]）；
var alpha=parseFloat（匹配[4]）| |-1；
日志（匹配、红色、绿色、蓝色、alpha）；
var colorValue=数学圆（（红色*299）+（绿色*587）+（蓝色*114））/1000）；
如果（α>=0）{
如果（α<0.5）{
console.log（“RGBA”，colorValue）；
对象css（'color'，'#4444'）；
}
}否则{
如果（颜色值>125）{
console.log（“RGB1”，colorValue）；
对象css（'color'，'#4444'）；
}否则{
console.log（“RGB 2”，colorValue）；
对象css（“颜色”、“白色”）；
}
}
}
$（“按钮”）。单击（函数（）{
changeTextColor（$（“#方框-1”）；
changeTextColor（$（“#方框-2”）；
});
});
.color{
宽度：200px；
高度：200px；
背景色：rgb（20,20,20）；
浮动：左；
}

去
文本1
文本2
在@Patrick Roberts、@SpazzMarticus和@Twisty的评论的帮助下，我现在开始工作了。
这是完整的工作代码

var rgb = this.css('background-color');
var pattern = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(,\s*\d+\.*\d+)?\)$/;
var matches = rgb.match(pattern);
var colorValue = Math.round(((parseInt(matches[1]) * 299) + (parseInt(matches[2]) * 587) + (parseInt(matches[3]) * 114)) /1000);

var colorOpacity = '';
if (matches[4]) {
    var colorOpacity = matches[4].replace(', ','');
}

if (colorValue > 125 || parseFloat(colorOpacity) < 0.5) {
    this.css('color', '#444444');
}
else {
    this.css('color', 'white');
}

var rgb=this.css（'background-color'）；
变量模式=/^rgba？\（\d+）\s*（\d+）\s*（\d+）（，\s*\d+\.\d+）$/；
var matches=rgb.match（模式）；
var colorValue=Math.round（（parseInt（匹配[1]）*299）+（parseInt（匹配[2]）*587）+（parseInt（匹配[3]）*114））/1000）；
var colorOpacity=''；
如果（匹配[4]）{
var colorOpacity=匹配[4]。替换（'，'，''）；
}
if（colorValue>125 | | parseFloat（colorOpacity）<0.5）{
css（'color'，'#4444'）；
}
否则{
css（'color'，'white'）；
}
能否添加
控制台.log（匹配）
并在IF之前确认当前值？您正在使用
parseInt（）
。。。在非整数字符串值上。请考虑一下。
匹配[4]
包含一个
，
作为第一个字符-从正则表达式组中拉出
，
。它将是一个介于0和1之间的值-使用
parseFloat
而不是
parseInt
我看到
匹配[4]
是
”，0.75“
谢谢大家，我得到了我的错误，现在可以工作了！您的RegExp将只匹配RGBA颜色。@您是正确的。OP确实要求RGB和RGBA，但他的例子只是RGBA，所以我的答案只是关于RGBA。如果OP想发布一个更完整的示例，我很乐意更新我的答案。谢谢@Twisty，我现在可以使用它并作为答案发布。@Raiyan我已经用改进的代码更新了我的答案。alpha值0仍然存在问题。尝试设置
box-2
背景色
rgba（0,0,0,0）
。您将看到文本颜色为浅/白色，而应该为深色