javascript - I call random colors in my js but would avoid a selection

Question

I call random colors in my JS. It's working well.

(this is for a follow cursor that randomly display a color on link)

But some colors are too dark and I would like to avoid them.

   $links.on('mouseenter', function(e){
      var color = '#'+Math.floor(Math.random()*16777215).toString(16);
      var colorString = color;
      $('#whaouu').css('background-color',colorString);
   });

How can I avoid the darkest part of my colors?

question from:https://stackoverflow.com/questions/65906968/i-call-random-colors-in-my-js-but-would-avoid-a-selection

Answer 1

A common way to solve issues of this sort is to use hsl values.

$links.on('mouseenter', function(e){
    const colorTone = 360 * Math.random();
    const colorSaturation = 50 + 80 * Math.random();
    const colorLightness = 50 + 10 * Math.random();
    var colorString = `hsl(${colorTone},${colorSaturation}%,${colorLightness}%`;
    $('#whaouu').css('background-color',colorString);
});

just play around with the parameters a bit until you find colors you like.