JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">

        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #d8d8d6; cursor: pointer;" id="btn-institucional">

            <p>1</p>

            <img id="institucional" src="https://www.w3schools.com/howto/img_fjords.jpg" width= "50%">

            <p>Desarrollo Institucional para un Buen Gobierno</p>   



        </div>

JavaScript

console.log(document.getElementById("btn-institucional").style.backgroundColor); // returns rgb(216, 216, 214)

function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

let backgroundColor = rgb2hex(document.getElementById("btn-institucional").style.backgroundColor)

if( backgroundColor == "#d8d8d6") {
	document.getElementById("institucional").src = "http://www.ptahai.com/wp-content/uploads/2016/06/Best-Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg";
}