JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<div id="red">
    hey
</div>

CSS

#red {
    background-color: #8bc347;   
    border: 2px solid;
    margin: 50px;
    padding: 50px;
}

JavaScript

function hexLuminance(hex, lum) {
    var lum = lum || 0;
    
    var rgb = {
        r: parseInt(hex.substr(1, 2), 16),
        g: parseInt(hex.substr(3, 2), 16),
        b: parseInt(hex.substr(5, 2), 16)
    };
    
    console.log(rgb);

    for (var light in rgb) {
        rgb[light] = ((0|(1<<8) + Math.round(Math.min(Math.max(0, rgb[light] + (rgb[light] * lum)), 255)))).toString(16).substr(1);
        console.log(rgb[light]);
        
    }
    
    return '#' + rgb.r + rgb.g + rgb.b;
}

var newColor = hexLuminance('#8bc347', 0.6);

console.log(newColor);

$('#red').css('border-color', newColor);