javascript - 在随机 Javascript 中将 RGB 值转换为 HSL 值

Question

我在这个网站的媒体框上有一个随机颜色覆盖。

http://www.reportageborsen.se/reportageborsen/wordpress/

我在 stackoverflow 的伙伴那里得到了一些非常好的帮助，导致了这个脚本:

var getRandomInRange = function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};
$('.media-box').each(function() {
    var mediaBox = $(this);
    var mask = mediaBox.find('.mask');
    var hue = 'rgb(' + getRandomInRange(100, 255) + ',' + getRandomInRange(100, 255) + ',' + getRandomInRange(100, 255) + ')';
    mask.css({
            backgroundColor : hue,
        opacity : 0.7            
             });
    mediaBox.hover(function() {
        mask.stop(true, true).fadeIn();
    }, function() {
        mask.stop(true, true).fadeOut();
    });
});​

fiddle 链接:http://jsfiddle.net/b5ZPq/3/

但是，我希望有更多的亮色和更少的灰色。我知道可以用 HSL 值而不是 RGB 值来完成。

所以我尝试将 css 背景 rgb 值转换为 hsl 值并转换脚本，但我没有让它工作。

var getRandomInRange = function(min, max) {
    return Math.floor(Math.random() * (max - min + 1), 10) + min;
};
$('.media-box').each(function() {
    var mediaBox = $(this);
    var mask = mediaBox.find('.mask');
    var hue = 'hsl(' + getRandomInRange(0, 360) + ',' + getRandomInRange(70, 100) + '%' + getRandomInRange(45, 55) + '%)';
    mask.css({
        backgroundColor: hue,
        opacity: 0.7
    });
    mediaBox.hover(function() {
        mask.stop(true, true).fadeIn();
    }, function() {
        mask.stop(true, true).fadeOut();
    });
});​

http://jsfiddle.net/zolana/Kc9U4/5/( fiddle ，更新，工作: http://jsfiddle.net/zolana/Kc9U4/9/)

(我不是在寻找将所有 RGB 值转换为 HSL 值的脚本(我知道有用于该目的的脚本)，而是为这个特定任务寻找可靠的脚本。)

Answer 1

请记住，当您使用 HSL 颜色(和其他颜色)时，您需要用逗号分隔每个值并使用正确的表示法。在这种情况下，它看起来像下面这样。

hsl ( int hue , int saturation % , int lightness % )

您在第二个参数后遗漏了一个逗号(特别是在百分号之后)。

var hue = 'hsl(' + getRandomInRange(0, 360) + ',' + getRandomInRange(70, 100) + '%,' + getRandomInRange(45, 55) + '%)';

http://jsfiddle.net/b5ZPq/4/