JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">test</div>
<div id="div2">this is #div2
  <h3 id="ah3">text</h3>
</div>
<button id="test">change color</button>

CSS

#div1 {
 color: #ff0000; /* red in hex*/
}
#div2 {
  color : red;
}
h3#ah3 {
  color: green;
  background-color: red;
}

JavaScript

function colorToHex(color) {
    if (color.substr(0, 1) === '#') {
        return color;
    }
    var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue = parseInt(digits[4]);
    var rgb = blue | (green << 8) | (red << 16);
    return digits[1] + '#' + rgb.toString(16);
};

function changeColor(from, to) {
   var elements = document.getElementsByTagName('*');
   for (var i=0;i<elements.length;i++) {
	  var color = window.getComputedStyle(elements[i]).color;
      var hex = colorToHex(color);
      if (hex == from) {
         elements[i].style.color=to;
      }
	  var backgroundColor = window.getComputedStyle(elements[i]).backgroundColor;
      console.log(backgroundColor);
      if (backgroundColor.indexOf('rgba')<0) {
	      var hex = colorToHex(backgroundColor);
    	  if (hex == from) {
    	     elements[i].style.backgroundColor=to;
    	  }
  	  }

   }
}   

// change all red color styled elements to blue
document.getElementById('test').onclick = function() {
   changeColor('#ff0000','#0000ff');
}