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

Question

问题： 是否有任何方法（在 JS 中）仅使用 bright colors，或 pastel colors 创建随机颜色代码？

我正在建立一个简单的网站，当我点击一个按钮时，它会给出一个随机报价，然后背景颜色会改变。问题是有时背景颜色太深，字体是黑色的，因此人们无法阅读报价。

我发现这段代码可以生成随机颜色。我试图编辑只得到字符串

A

到

F

，但没有成功：

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

Answer 1

HSL 颜色

使用 HSL 颜色 颜色可能是最简单的。 HSL 颜色值在 CSS 中指定为

hsl( hue, saturation%, lightness%)

其中

hue

在 0-360 范围内（使用度数时没有单位标记），并且

saturation

和

lightness

都是百分比 0-100，尾随

%

符号。

注意

• “亮色”指的是RGB色轮的颜色，由红色开始，纯红混入绿色，纯绿混入蓝色，纯蓝再混入红色。

• 在 HSL 颜色空间中，明亮的颜色由基于其在色轮上的位置的色调表示，具有

  100%

  饱和度和

  50%

  的亮度值：

  色调

  0

  ▶◀色调

  360

  
  饱和度：

  100%

  
  亮度：

  50%

• 颜色与白色混合 - 随着亮度增加到

  50%

  以上，颜色变得更加“柔和”。无论色调和饱和度的值是多少，

  100%

  的亮度值都会产生白色。

• 随着饱和度降低，颜色与灰色混合，并根据饱和度的降低程度变得更加褪色。

  0%

  的饱和度值仅基于亮度创建灰度色调。

• 随着亮度降低到

  50%

  以下，颜色与黑色混合。无论色调和饱和度值是什么，

  0%

  的亮度值都会产生黑色。

警告

人眼对蓝色最不敏感。与其他颜色相比，蓝色背景上的黑色文本（或黑色上的蓝色）更难阅读。如果这成为随机颜色选择的问题，示例 2 显示了一种补偿方法。

---

示例 1：一些随机柔和的颜色，saturation 在

25-95%

范围内，lightness 在

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：此示例演示了针对眼睛对蓝色不敏感而调整颜色。它生成一组盒装字母，颜色范围为 0 到 340，呈现在黑色背景上。

"use strict";

// individual letter classes:
function letterCSS(letter, i, length, blueBoost) {
    let hue = Math.floor( i/length * 341); // between 0 and 340
    let saturation = 100;
    let lightness = 50;

    // color adjustment:
    if( blueBoost && hue > 215 && hue < 265) {
         const gain = 20;
         let blueness = 1 - Math.abs( hue-240)/25;
         let change  = Math.floor( gain * blueness);
         lightness += change;
         saturation -= change;
    }
    let hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;

  return `.${letter} {
  color: ${hsl};
  border-color: ${hsl};
  background-color: black;
}
`   ;
}

// generate and display boxed letters of the alphabet
function letterBlocks() {
    let letters = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
    let cssText = "";
    let html = ""
    let blueBoost = document.getElementById("boost").checked;
    letters.forEach( (letter, i, a) => {
       cssText += letterCSS( letter, i, a.length, blueBoost);
       html  += ` <span class="letter ${letter}">${letter}<\/span> `;
    });
    let style = document.createElement("style");
    style.textContent = cssText;
    document.body.appendChild(style);
    let p = document.getElementById("blocks");
    p.innerHTML = html;
}

#blocks {
  line-height: 2.5rem;
}
.letter {
  display: inline-block;
  text-align: center;
  line-height: 2rem;
  font-size: 1.5rem;
  height: 2rem;
  width: 2rem;
  font-family: sans-serif;
  font-weight: bold;
  border-width: 0.125rem;
  border-style: solid;
  border-radius: 0.25rem;
}

<button type="button" onclick="letterBlocks()">Generate Letter Blocks</button><label>
- optionally lighten colors near pure blue:<input type="checkbox" id="boost">
</label>
<p id="blocks"></p>

字母颜色以完全饱和度和 50% 亮度开始。选中选项框并单击按钮，通过增加亮度和降低饱和度来调整接近蓝色的颜色。

• “接近蓝色”被硬编码为表示在色调值的 25 度单位内

  240

  ,
• 最大调整量由

  gain

  到

  20

  百分比单位设定，
• 演示代码。实际代码和调整值将根据具体情况进行更改，具体取决于进行颜色调整的原因和方式。

Answer 2

通过仅随机化色调，速度更快。

HSLA 颜色是 Hue、Saturation、Lightness 和 Alpha 的组合。

调整亮度

eq: 72%

以调整整个粉彩集。

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

rdm.onclick = () => document.body.style.background = randomHSLA()
rdm.click()

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

Answer 3

您可以通过使用 rgb 适当设置 background-color 属性来选择较浅的颜色。
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) 都是灰色阴影。改变的是你的灰色会有多浅。