JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<div style="background:#AF0000;width:145px;"></div><br style="clear:both;"/>
div {width:20px;height:20px;margin:5px 0 0 5px;float:left;}

CSS

div {width:20px;height:20px;margin:5px 0 0 5px;float:left;}

JavaScript

function LightenColor(rgbtext, delta) {
      var r, g, b, txt;
      r= parseInt(rgbtext.substr(1, 2), 16),
      g= parseInt(rgbtext.substr(3, 2), 16),
      b= parseInt(rgbtext.substr(5, 2), 16),

      r+= delta;  if (r> 255) r= 255;  if (r< 0) r= 0;
      g+= delta;  if (g> 255) g= 255;  if (g< 0) g= 0;
      b+= delta;  if (b> 255) b= 255;  if (b< 0) b= 0;
      txt= b.toString(16);       if (txt.length< 2) txt= "0"+ txt;
      txt= g.toString(16)+ txt;  if (txt.length< 4) txt= "0"+ txt;
      txt= r.toString(16)+ txt;  if (txt.length< 6) txt= "0"+ txt;

      return "#"+ txt;
    }
    function DarkenColor(rgbtext, delta) {
      return LightenColor(rgbtext, delta* -1);
}
    styles = '<style>'
        styles += '.b1 {background:'+LightenColor('#AF0000', 50)+';}'
        styles += '.b2 {background:'+ DarkenColor('#AF0000', 50)+';}'        
    styles += '</style>'        
$('head').append(styles);
$('body').append('<div class="b1"></div><div class="b2"></div>');
/*        
<div style="background:#AF0000;width:145px;"></div><br style="clear:both;"/>
div {width:20px;height:20px;margin:5px 0 0 5px;float:left;}
$('body').append('<div style="background:'+LightenColor('#AF0000', 100)+'"></div>');
$('body').append('<div style="background:'+LightenColor('#AF0000', 50)+'"></div>');
$('body').append('<div style="background:'+LightenColor('#AF0000', 10)+'"></div>');
$('body').append('<div style="background:'+DarkenColor('#AF0000', 10)+'"></div>');
$('body').append('<div style="background:'+DarkenColor('#AF0000', 50)+'"></div>');
$('body').append('<div style="background:'+DarkenColor('#AF0000', 100)+'"></div>');
*/