如何根據動態變化的背景顏色動態更改文本顏色

Question

我正在建立一個新的網站，需要我的文字根據不斷變化的背景顏色改變顏色，以保持對比度。 我已經在網上搜索了不涉及Sass的答案，但沒有一個有效...

我嘗試了一些JavaScript，但只有當背景是手動更改的固定顏色時，它們才有效。

我當前的文件： https ： //codepen.io/jonathanlee/pen/wZXvRY

var color = function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
setInterval(function() {
  document.getElementById("test").style.backgroundColor = color(); //() to execute the function!
}, 3000);

var ww = function isDarkColor(rgb) {
  return Math.round((
    parseInt(rgb[0], 10) * 299 +
    parseInt(rgb[1], 10) * 587 +
    parseInt(rgb[2], 10) * 114) / 1000) <= 140
}

if (ww <= 140) {
  document.getElementById("test").style.color = '#fff';
} else {
  document.getElementById("test").style.color = '#000';
}

我試過的其他解決方案之一，但沒有奏效： http ： //jsfiddle.net/QkSva/

function isDark(color) {
  var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color);
  return (match[1] & 255) +
    (match[2] & 255) +
    (match[3] & 255) <
    3 * 256 / 2;
}
$('div').each(function() {
  console.log($(this).css("background-color"))
  $(this).css("color", isDark($(this).css("background-color")) ? 'white' : 'black');
});

現實生活中的例子是我正在開發的網站上的備用主頁， https：//nepmelbourne.com/q 。 我有一個動態的背景，但有一些顏色與我的白色文字沒有很好的對比。

Answer 1

一種方法是將背景顏色的相反顏色設置為文本，如下所示，

 function invertColor(hex, bw) { if (hex.indexOf('#') === 0) { hex = hex.slice(1); } // convert 3-digit hex to 6-digits. if (hex.length === 3) { hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; } if (hex.length !== 6) { throw new Error('Invalid HEX color.'); } var r = parseInt(hex.slice(0, 2), 16), g = parseInt(hex.slice(2, 4), 16), b = parseInt(hex.slice(4, 6), 16); if (bw) { // http://stackoverflow.com/a/3943023/112731 return (r * 0.299 + g * 0.587 + b * 0.114) > 186 ? '#000000' : '#FFFFFF'; } // invert color components r = (255 - r).toString(16); g = (255 - g).toString(16); b = (255 - b).toString(16); // pad each with zeros and return return "#" + padZero(r) + padZero(g) + padZero(b); } function padZero(str, len) { len = len || 2; var zeros = new Array(len).join('0'); return (zeros + str).slice(-len); } var color = function getRandomColor() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } setInterval(function() { var bgColor = color(); var textColor = invertColor(bgColor,true); document.getElementById("test").style.backgroundColor = bgColor; //() to execute the function! document.getElementById("test").style.color = textColor; }, 3000); 

 <div id="test">This is some text</div> 

相反的顏色代碼如何根據當前顏色生成相反的顏色？

在invertColor（）中添加了一個額外的參數bw，如果bw設置為true，如果背景亮，文本顏色將為黑色，反之亦然。