changing text color if random background too dark

#1

I am trying to set a text color based off my background color here is the code I have to create a random colors & my code to change the background color to the randomly created color, any one have any thoughts on how or where would i start in this code to automatically change the text color if the background color is too dark?

const randomColors = function(){
const r = Math.floor(Math.random()*255)+1;
const g = Math.floor(Math.random()*255)+1;
const b = Math.floor(Math.random()*255)+1;
return newColor = rgb(${r}, ${g}, ${b})
}
const delayedColorChange = function (color, delay){
return new Promise(function(resolve, reject){
setInterval(()=>{
document.body.style.backgroundColor = color;
resolve();
}, delay)
})
}

delayedColorChange (randomColors(), 2000);

#2

If you use an HSL model instead of RGB, you’ll have lightness in your L component making it pretty easy to check.

const h = Math.floor(Math.random()*360);
const s = Math.floor(Math.random()*100);
const l = Math.floor(Math.random()*100);
if (l > 50) {
  // light
} else {
  // dark
}
return `hsl(${h}deg, ${s}%, ${l}%)`
1 Like
#3

couldn’t get background colors to work when I changed to hsl

#4

never mind I got the background to change colors but I still cannot get the text to change, sorry I’m bad at this

#5

What is the code you are using the change the text color?