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

Question

我正在尝试根据背景（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');
}

我无法弄清楚错误

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

感谢您的帮助。

Answer 1

在@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');
}

Answer 2

我会建议更好的正则表达式：^rgba((d*),s?(d*),s?(d*),s?([01]?.?d*?))$

我们知道 Alpha 值介于 0 和 1 之间，因此我们可以查找 0.00、.25、1 或 1.00 。请考虑以下事项。

$(function() {
  function changeTextColor(obj) {
    var rgb = obj.css('background-color');
    var pattern;
    if (rgb.slice(0, 4) == "rgba") {
      pattern = /^rgba((d*),s?(d*),s?(d*),s?([01]?.?d*?))$/;
    } else {
      pattern = /^rgb((d*),s?(d*),s?(d*))$/;
    }
    var matches = rgb.match(pattern);
    var red = parseInt(matches[1]);
    var green = parseInt(matches[2]);
    var blue = parseInt(matches[3]);
    var alpha = parseFloat(matches[4]) || -1;
    console.log(matches, red, green, blue, alpha);
    var colorValue = Math.round(((red * 299) + (green * 587) + (blue * 114)) / 1000);
    if (alpha >= 0) {
      if (alpha < 0.5) {
        console.log("RGBA", colorValue);
        obj.css('color', '#444444');
      }
    } else {
      if (colorValue > 125) {
        console.log("RGB 1", colorValue);
        obj.css('color', '#444444');
      } else {
        console.log("RGB 2", colorValue);
        obj.css('color', 'white');
      }
    }
  }
  $("button").click(function() {
    changeTextColor($("#box-1"));
    changeTextColor($("#box-2"));
  });
});

.color {
  width: 200px;
  height: 200px;
  background-color: rgb(20, 20, 20);
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="display: block;">Go</button>
<div id="box-1" class="color">
  Text 1
</div>
<div id="box-2" class="color" style="background-color: rgba(50,100,200,.25);">
  Text 2
</div>

希望有帮助。

Answer 3

这是 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);