JSFiddle - React, Tailwind, and code Playground

by elizabethkmathew

HTML

<div id="bg">TEXT</div>

CSS

#bg{
width: 200px;
height: 200px; 
 background-image: linear-gradient(to bottom, white 0%, rgba(77, 189, 189, 0.8) 29%, #304b72 61%, #131b26 73%, #090909 100%);
}

JavaScript

//Color text change

var rgb = ['255', '0', '0'];
    
setTimeout(function(){
    
    var c = 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')';
    
    //http://www.w3.org/TR/AERT#color-contrast
    
    var o = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) + (parseInt(rgb[2]) * 114)) /1000);
    
    //console.log(o);
    
    if(o > 125) {
        $('#bg').css('color', 'black');
    }else{ 
        $('#bg').css('color', 'white');
    }

    /* $('#bg').css('background-color', c) */;
    
    var r = Math.round(Math.random() * 255);
    var g = Math.round(Math.random() * 255);
    var b = Math.round(Math.random() * 255);

    rgb[0] = r;
    rgb[1] = g;
    rgb[2] = b;                
  

}, 500);