Thay đổi màu văn bản dựa trên độ sáng của vùng nền được bao phủ trong HTML?

Có thể thay đổi màu văn bản tùy thuộc vào độ sáng trung bình của các pixel được bao phủ trong màu nền của phụ huynh bằng cách sử dụng đoạn mã sau.

var rgb = [255, 0, 0];
setInterval(display, 1000);
function display() {
   rgb[0] = Math.round(Math.random() * 255);
   rgb[1] = Math.round(Math.random() * 255);
   rgb[2] = Math.round(Math.random() * 255);
   
   var d = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) +
      (parseInt(rgb[2]) * 114)) / 1000);
   // for foregound
   var f = (d> 125) ? 'black' : 'white';
   
  // for background
  var b = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  $('#box').css('color', f);
  $('#box').css('background-color', b);
}
<scriptsrc = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id = "box"> Demo</div>

Sau đây là CSS -

#box {
   width: 300px;
  height: 300px;
}