JSFiddle - React, Tailwind, and code Playground

HTML

<div id="original"></div>
<div id="brighter1"></div>
<div id="brighter2"></div>
<div id="brighter3"></div>

CSS

body{
    font-family:arial;
}
div{
    padding:10px;
    margin-bottom:3px;
    color:#fff;
}

JavaScript

increase_brightness = function(color,percent){

    var ctx = document.createElement('canvas').getContext('2d');

    ctx.fillStyle = color;
    ctx.fillRect(0,0,1,1);

    var color = ctx.getImageData(0,0,1,1);
    var r = color.data[0] + Math.floor( percent / 100 * 255 );
    var g = color.data[1] + Math.floor( percent / 100 * 255 );
    var b = color.data[2] + Math.floor( percent / 100 * 255 );

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

var color = '#0000ff';

// try another colors
// var color = 'orange';
// var color = 'rgb(12,7,95)';

var original = document.getElementById('original');
var brighter1 = document.getElementById('brighter1');
var brighter2 = document.getElementById('brighter2');
var brighter3 = document.getElementById('brighter3');

original.innerHTML = color;
brighter1.innerHTML = increase_brightness(color,20);
brighter2.innerHTML = increase_brightness(color,50);
brighter3.innerHTML = increase_brightness(color,80);

original.style.backgroundColor = color;
brighter1.style.backgroundColor = increase_brightness(color,20);
brighter2.style.backgroundColor = increase_brightness(color,50);
brighter3.style.backgroundColor = increase_brightness(color,80);