JSFiddle - React, Tailwind, and code Playground

HTML

<div class='test1'>Test</div>
<div class='test2' style='color:#00aba0;'>Test 2</div>
<div class='test3'>Test 3</div>
<input type='text' id='color' placeholder='Enter color here' value='#FF0000' /><br>
<button id='changeColor'>Change</button>

CSS

.test1 {
    color: #00aba0;
    font-weight: bold;
}

.test2 {
    font-weight: bold;
}

.test3 {
    color: purple;
    margin-bottom: 20px;
}

JavaScript

function hexToRgb(hex) {
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? "rgb(" + parseInt(result[1], 16) + "," + parseInt(result[2], 16) + "," + parseInt(result[3], 16) + ")" : null;
}

$(document).ready(function() {
    $("#changeColor").on("click", function() {
        var newColor = $("#color").val();
        var oldColor = "#00aba0";
        $("*").css("color", function(i, val) {
            val = val.replace(/\s/g, "");
            if (val == oldColor || val == hexToRgb(oldColor)) {
                return newColor;
            }
            else {
                return val;
            }
        });
    });
});