HTML এ আচ্ছাদিত পটভূমি এলাকার উজ্জ্বলতার উপর ভিত্তি করে পাঠ্যের রঙ পরিবর্তন করবেন?

নিম্নলিখিত কোড স্নিপেট ব্যবহার করে তার পিতামাতার পটভূমির রঙের আবৃত পিক্সেলের গড় উজ্জ্বলতার উপর নির্ভর করে পাঠ্য রঙ পরিবর্তন করা সম্ভব৷

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>

নিম্নলিখিত CSS −

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