JSFiddle - React, Tailwind, and code Playground

HTML

<div id="red" class="dark red"></div>
<div id="green" class="dark green"></div>
<div id="blue" class="dark blue"></div>
<div id="gray" class="dark gray"></div>
<br />

<div id="lred" class="lred"></div>
<div id="lgreen" class="lgreen"></div>
<div id="lblue" class="lblue"></div>
<div id="lgray" class="lgray"></div>

CSS

div { display: inline-block; width: 20px; height: 20px; cursor: pointer }
.red { background: rgb(100, 26, 0) }
.green { background: rgb(0, 128, 26) }
.blue { background: rgb(26, 0, 128) }
.gray { background: rgb(210,210,210) }

JavaScript

function Lighthen(red, green, blue)
{
    var max = ([red,green,blue].sort(function(l,r){return r-l}))[0];
    var multiplier = max;
    multiplier = (multiplier / 255) + 1;
    if (multiplier < 1.5) multiplier = 1.9;
    
    if ((max * multiplier) > 255)
    {
        multiplier = (multiplier / 230) + 1;
    }

    var r = Math.round(red * multiplier);
    var g = Math.round(green * multiplier);
    var b = Math.round(blue * multiplier);
    
    if (r > 255) r = 255;
    if (g > 255) g = 255;
    if (b > 255) b = 255;
    
    return "rgb(" + r + "," + g + "," + b + ")";
}

$(".dark").click(function(){
    var color = $(this).css("background-color");
    color = color.replace(/[^0-9,]+/g, "");
    var red = color.split(",")[0];
    var gre = color.split(",")[1];
    var blu = color.split(",")[2];
    
    $("#l" + $(this).attr("id"))
        .css("background", Lighthen(red, gre, blu));
    
});