如何在 Javascript 中生成随机柔和（或更亮）的颜色？

Question

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

---

我的问题：

有什么方法可以只使用 明亮的颜色 或 柔和的颜色 来创建随机颜色代码吗？

---

我得到这段代码来生成随机颜色。我试图编辑只得到 A 到 F 字符串但没有成功：

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

非常感谢你提前。

原文由 Zzeks 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

HSL 颜色

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

hsl( hue, saturation%, lightness%)

where hue is in range 0-360 (without a unit marker when using degrees), and both saturation and lightness are percentages with a trailing % 标志。

笔记

• “明亮”颜色是指从红色开始，然后将纯红色混合到绿色，将纯绿色混合到蓝色，最后将纯蓝色再混合回红色而形成的 RGB 色轮的颜色。

• 在 HSL 颜色空间中，明亮的颜色由基于它们在色轮上的位置的色调表示，饱和度为 100% ，亮度值为 50% ：

色调 0 ▶ ◀ 色调 360

饱和度： 100%

亮度： 50%

• 颜色与白色混合 - 随着亮度增加到 50% 之上，颜色变得更加“柔和”。无论色调和饱和度的值是多少，亮度值 100% 都会产生白色。

• 随着饱和度 降低， 颜色与灰色混合，并根据饱和度降低的程度变得更加褪色。饱和度值 0% 仅根据亮度创建灰度色调。

• 随着亮度降低到 50% 以下，颜色与黑色混合。无论色调和饱和度值是多少，亮度值 0% 都会产生黑色。

警告

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

---

示例 1：一些随机柔和的颜色， 饱和度 在 25-95% 范围内， 亮度 在 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 百分比单位，
• 演示代码。实际代码和调整值将根据具体情况进行更改，具体取决于进行颜色调整的原因和方式。

原文由 traktor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

HSLA 颜色由 色调、饱和度、亮度和 alpha 组成。

例如，根据需要调整亮度（第三个值）。

 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>

或类似的：

 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>

原文由 NVRM 发布，翻译遵循 CC BY-SA 4.0 许可协议