基于div背景颜色改变文本颜色

Question

我有一个 div，需要在其上放置一些文本。该 div 的背景是动态生成的。因此，我想根据背景决定文本颜色。

到目前为止，我已经尝试了以下方法。

function invert(color){
   return (color.replace('#','0x')) > (0xffffff/2) ? 'black' : 'white'
}

使用这个函数，我将红色转换成了黑色。invert('#ff0000') => black（虽然白色看起来更适合搭配红色）

这种方法可行吗？还是有其他更好的方式...

- Prasanna

---

“is this approach ok?” 的意思是什么？ - David Thomas

我指定的函数 - Prasanna

个人而言，我会使用 RGB 而不是十六进制来使它更容易实现。例如：<div id="myDiv" style="background-color:rgb(0,0,0);"></div> - jsmith

这并不是非黑即白的问题。有些色调会让你的文本看起来模糊不清。请参见：http://web.mst.edu/~rhall/web_design/color_readability.html - Diodeus - James MacFarlane

虽然不是很常用，但你可能可以使用hsl格式来进行更好/更容易的计算。 - atwixtor

Answer 1

这是我在jsfiddle中使用jQuery想出的一个快速解决方案。

另外请注意，如果您使用此方法，background-color的值可以是从rgb(50, 205, 50)到lime到#32CD32的任何值，它仍然可以工作。

对于您的HTML：

<div id="test" style="background-color: #000000;">Can you see this text?</div>​

还有 JavaScript：

$(document).ready(function(){
    var color = $('#test').css('background-color');
    var startIndex = color.indexOf('(') + 1;
    var lastIndex = color.indexOf(')');

    var values = color.substr(startIndex, lastIndex - startIndex).split(',');

    var r = 0;
    var g = 0;
    var b = 0;

    $(values).each(function(i) {
        if (i == 0) {
            r = 255 - values[i];
        }
        if (i == 1) {
            g = 255 - values[i];
        }
        if (i == 2) {
            b = 255 - values[i];
        }
    });

    $('#test').css('color', 'rgb(' + r + ',' + g + ',' + b + ')');
});​

编辑：非jQuery方式（不适用于像青柠色、蓝色、红色等颜色名称）

function invert(color) {
    var startIndex = color.indexOf('(') + 1;
    var lastIndex = color.indexOf(')');

    var values = color.substr(startIndex, lastIndex - startIndex).split(',');

    var r = 0;
    var g = 0;
    var b = 0;

    for(i= 0; i < values.length; i++) {
        if (i == 0) {
            r = 255 - values[i];
        }
        if (i == 1) {
            g = 255 - values[i];
        }
        if (i == 2) {
            b = 255 - values[i];
        }
    }
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

- jsmith

---

顺便提一下，涉及到jQuery的只有获取和设置color属性。 - BoltClock

好的指出... 或者你可以使用类似以下的代码： var div = document.getElementById('test'); var color = div.style.backgroundColor; - jsmith

Answer 2

使用在这个问题的最高赞回答底部所勾勒出的方法 - 如果已知背景颜色如何找到好看的字体颜色？

- Jasper Mogg

---

这个答案已经提供了5年了。如果现在最高票的答案不同怎么办？如果问题被删除会发生什么？如果链接失效会怎样？ - soulshined

Answer 3

这将适用于每种颜色。

var luminance = {r: 0.2126, g: 0.7152, b:0.0722};
var color = '#ffaa11'; // your color
var r = parseInt(color.substring(1,3), 16);
var g = parseInt(color.substring(3,5), 16);
var b = parseInt(color.substring(5), 16);
var rgb = [r / 255, g / 255, b / 255];
for (var i = rgb.length; i--; )
    rgb[i] =
        rgb[i] <= 0.03928 ?
            rgb[i] / 12.92 :
            Math.pow(((rgb[i] + 0.055) / 1.055), 2.4);
var thresh = ((luminance.r * rgb[0]) +
              (luminance.g * rgb[1]) +
              (luminance.b * rgb[2]));
// now if thresh > 0.22 set text color to #222
// else set it to #ccc
// you now have readable text on every hex background.

- user740521