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

问题描述：

我正在构建一个简单的网站，当我点击一个按钮时会给出一个随机的报价，并随之改变背景颜色。问题是有时背景颜色太暗，字体是黑色的，因此人不能读取报价。如何在Javascript中生成随机柔和（或更亮）的颜色？

我的问题是，如果有任何方法可以使用鲜艳的颜色或柔和的颜色创建随机颜色代码？

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

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

非常感谢你提前。

使用'hsl（）'颜色并在找到最佳饱和度和亮度值后随机化色调https://jsfiddle.net/sva8ckpy/ – pawel

我猜''＃'+（（1 sh1

答

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

hsl(hue, saturation%, lightness%)

其中hue是在范围0-360度没有单位标记，并且两个saturation和lightness是具有尾随%符号的百分比。

注

所有的 “亮” 的颜色有100％的饱和度值和50％的亮度值：

色调0 - > < - 顺360
所有颜色与白色混合 - 并变得更加“柔和”，如亮度增加。无论色调和饱和度的值是多少，100％的亮度值都会产生白色。
所有颜色与灰度混合作为饱和度减少并根据饱和度得到多少而变得更“米黄色”或“灰色”。
所有颜色与黑色混合作为亮度减少。无论色调和饱和度值是多少，0％的亮度值都会产生黑色。

作为该设置体背景与饱和度的随机柔和的色调范围在25-95％，并且在亮度范围85％-95％的例子：

var cssHSL = "hsl(" + 360 * Math.random() + ',' + 
 
       (25 + 70 * Math.random()) + '%,' + 
 
       (85 + 10 * Math.random()) + '%)'; 
 

 
document.body.style.backgroundColor = cssHSL;

非常感谢你！这有助于很多！ – Zzeks

答

通过使用rgb适当设置背景颜色属性，您可以选择较亮的颜色。
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）都是灰色阴影。你的灰色将会发生怎样的变化。

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

相关推荐