HSL颜色

使用HSL颜色颜色可能是最简单的。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，显示在黑色背景上。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个
字母颜色以全饱和度和50%亮度开始。选中选项框并单击按钮，通过增加亮度和降低饱和度来调整接近蓝色的颜色。

• "接近蓝色"被硬编码为表示在色调值240的25度单位内，
• 最大调整量由gain至20百分比单位设定，
• 演示代码。真正的代码和调整值将根据具体情况改变，具体情况取决于颜色调整的原因和方式。

通过只随机化色调，速度会更快。
HSLA颜色由***色相、饱和度、亮度和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>

您可以通过使用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）都是灰色的阴影。改变的是你的灰色会有多浅。