How to create random pastel (or brighter) color in Javascript?

Question

I am creating a simple website that gives a random quote when I click the button and the background color changes. The fact is that sometimes the background color is too dark, and the font is black, and therefore a person cannot read the quote.

My question is, is there a way to create a random color code using only bright colors or pastel colors?

I got this code to generate random color. I tried editing to get the lines Aup F, but failed:

'#'+((1<<24)*(Math.random()+1)|0).toString(16).substr(1)

Thank you in advance.

Answer 1

HSL . HSL CSS

hsl( hue, saturation%, lightness%)

hue 0-360 , saturation lightness %.

• "" 100% 50%:

  hue 0 → < - hue 360

• - "" . 100% , , .

• , "" "" , .

• . 0% , , .

, 25-95% 85-95%:

var cssHSL = "hsl(" + 360 * Math.random() + ',' +
                 (25 + 70 * Math.random()) + '%,' + 
                 (85 + 10 * Math.random()) + '%)';

document.body.style.backgroundColor = cssHSL;

Hide result

Answer 2

, .

HSLA , , .

, ( ).

function randomHSL(){
    return "hsla(" + ~~(256 * Math.random()) + "," +
                    "70%,"+
                    "80%,1)"
  }

rdm.onclick = (function(){
   document.body.style.backgroundColor = randomHSL()
})
rdm.click()

<button id="rdm">Random pastel color!</button>

Hide result

:

function randomHSL(){
    return 'hsla(${~~(256 * Math.random())},70%,70%,0.8)'
  }

rdm.onclick = (function(){
   document.body.style.backgroundColor = randomHSL()
})
rdm.click()

<button id="rdm">Random pastel color!</button>

Hide result

Answer 3

, background-color rgb.
rgb (0,0,0) , rgb (255,255,255) - . , ( ) 255.
( JQuery):

 var rand = Math.floor(Math.random() * 10);
 var colorQ = "rgb(" + (215 - rand * 3) + "," + (185 - rand * 5) + "," + (185 - rand * 10) + " )"; 
 $("body").css("background-color", colorQ);

, , , - , 3 rgb , . . rgb (100 100 100), rgb (221,221,221) rgb (133,133,133) - . , .