JSFiddle - React, Tailwind, and code Playground

HTML

<h1>HELLO</h1>
<input type="submit" id="submit" value="Desaturate!"/>

CSS

h1 { color: blue; background:pink; font-size: 30px; }

JavaScript

function desaturate(r, g, b) {
    var intensity = 0.3 * r + 0.59 * g + 0.11 * b;
    var k = 1;
    r = Math.floor(intensity * k + r * (1 - k));
    g = Math.floor(intensity * k + g * (1 - k));
    b = Math.floor(intensity * k + b * (1 - k));
    return rgb_to_string(r, g, b);
}

function rgb_to_string(r, g, b) {
    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

function desaturate_element(selector) {
    var foreground = $(selector).css('color').match(/\d+/g);
    var background = $(selector).css('background-color').match(/\d+/g);
    $(selector).css('color', desaturate(foreground[0], foreground[1], foreground[2]));
    $(selector).css('background-color', desaturate(background[0], background[1], background[2]));
}

$("#submit").click(function() {
    desaturate_element("h1");
});