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

Posted 2023-02-25

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

【英文标题】：How to generate random pastel (or brighter) color in Javascript?

【发布时间】：2017-08-28 20:00:47

【问题描述】：

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

---

我的问题：

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

---

我得到这个代码来生成随机颜色。我尝试编辑以仅获取 A 到 F 字符串但没有成功：

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

非常感谢您。

【问题讨论】：

使用hsl()颜色并在找到最佳饱和度和亮度值jsfiddle.net/sva8ckpy后仅随机化色调@

我猜'#'+((1<<24)*(Math.random()+1)|0xc0c0c0).toString(16).substr(1) 可能会解决问题——它应该将每个组件限制在 0xc0-0xff 范围内，但我不知道 javascript 所以真的任何事情都可能发生。 0x808080 允许更多变化，但可能太多了。如果您需要更大的灵活性，那么您将需要可能了解 javascript 的人给出的更完整的答案之一。

【参考方案1】：

HSL 颜色

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

hsl( hue, saturation%, lightness%)

其中hue 在 0-360 范围内（使用度数时没有单位标记），saturation 和 lightness 都是带有尾随 % 符号的百分比。

注意

“亮”色是指从红色开始，然后将纯红色混合为绿色，将纯绿色混合为蓝色，最后将纯蓝色重新混合为红色而形成的 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 百分比单位， 演示代码。实际代码和调整值将根据具体情况进行更改，具体取决于进行颜色调整的原因和方式。

【讨论】：

哇，这个解释让我大吃一惊，非常感谢。

【参考方案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>

【参考方案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) 都是灰色阴影。改变的是你的灰色有多浅。