javascript - 如何在 Javascript 中生成随机柔和(或更亮)的颜色？

Question

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

---

我的问题:

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

---

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

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

非常感谢您。

Answer 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:饱和度在 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% 亮度开始。选中选项框并单击按钮，通过增加亮度和降低饱和度来调整接近蓝色的颜色。

• “接近蓝色”被硬编码为表示在色调值 240 的 25 度单位内，
• 最大调整量由gain设置为20百分比单位，
• 演示代码。实际代码和调整值将根据具体情况进行更改，具体取决于进行颜色调整的原因和方式。