How to generate random pastel (or brighter) color

问题:

I am building a simple website that gives a random quote when I click a button, and with that, the background color changes. The thing is that sometimes the background color is too dark and the font is black, and consequently the person can't read the quote.

---

My question:

Is there is any way to create a random color code using just bright colors, or pastel colors?

---

I got this code to generate a random color. I tried to edit to get only A to F strings but no success:

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

Thank you very much in advance.

回答1:

Using HSL colors may be the easiest. HSL color values are specified in CSS as

hsl( hue, saturation%, lightness%)

where hue is in range 0-360 degrees without a unit marker, and both saturation and lightness are percentages with a trailing % sign.

Note

• all the "bright" colors have a saturation value of 100% and a lightness value of 50%:

  hue 0 ▶ ◀ hue 360

• All colors blend with white - and become more "pastel" as the lightness increases. A lightness value of 100% creates white regardless of what the values of hue and saturation are.

• All colors blend with grey as the saturation decreases and become more "beige" or "grey" depending on how low the saturation gets.

• All colors blend with black as the lightness decreases. A lightness value of 0% creates black no matter what the hue and saturation values are.

---

Example: few random pastel colors with saturation in range 25-95% and lightness in range 85-95%:

function getColor(){ 
  return "hsl(" + 360 * Math.random() + ',' +
             (25 + 70 * Math.random()) + '%,' + 
             (85 + 10 * Math.random()) + '%)'
}


// Generate 20 colors
for( var i = 20; i--; ){
  var item = document.createElement('div')
  item.style.cssText = `
    display:inline-block; 
    padding: 2em;
    margin:5px; 
    border-radius:50%;
    background: ${getColor()};
  `
  document.body.appendChild(item);
}

回答2:

By randomizing only the hue, it's faster.

HSLA colors are made of Hue, saturation, lightness and alpha.

Example, lightness to be adjusted as needed (third value).

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

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

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

Or similary:

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

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

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

回答3:

You could choose among lighter colours by appropriately setting the background-color property using rgb.
rgb(0,0,0) is black, while rgb(255,255,255) is white. You could therefore use random values which are closer to (but not higher than) 255.
An example (using 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);

You can play around with the values until you find the colours that you prefer - keep in mind that the closer the 3 rgb values are to each other, the closer your colour will be to grey. E.g. rgb(100,100,100), rgb(221,221,221) and rgb(133,133,133) are all shades of grey. What changes is how light your grey will be.