将RGB值转换为随机Javascript中的HSL值

我在此站点的媒体框上具有随机颜色叠加层。将RGB值转换为随机Javascript中的HSL值

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

我从队友一些很好的帮助，在这里计算器至极导致此脚本：

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(); 
    }); 
});

小提琴链接：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/ （小提琴，更新工作： http://jsfiddle.net/zolana/Kc9U4/9/ ）

（我不是在寻找所有的RGB值转换为HSL值（我知道有脚本与脚本）

来源

2012-12-28 fortes

我不明白...... HSL中的颜色比RGB空间中的颜色更亮吗？ – ppeterka

@ppeterka他们不是......但在某些方面，使用随机值可以更容易地获得更亮的颜色，因为最后一个参数是L表示亮度。 – jeremy

@Nile我对颜色空间很熟悉，并且想要指出问题中措辞不当的错误选择 - 任何人都不确定代表颜色是如何工作的......（并且懒惰地使用google或wiki来查看事后 - 我认为有一些在那里...） – ppeterka

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

HSL（INT 色调，诠释饱和％，诠释亮度％）

你是对后失踪的第二个参数之后逗号（专百分号）。

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

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

来源

2012-12-28 15:14:23 jeremy

太棒了！你的敏锐的眼睛和逗号使我度过了美好的一天。 – fortes

@fortes没问题。 – jeremy

看看这个代码，我写道：

function randomColor(){ 
    var h = Math.random(); 
    var s = 0.99; 
    var v = 0.99; 

    h = h + 0.618033988749895; 
    h = h % 1; 

    var r, g, b; 

    var i = Math.floor(h * 6); 
    var f = h * 6 - i; 
    var p = v * (1 - s); 
    var q = v * (1 - f * s); 
    var t = v * (1 - (1 - f) * s); 

    switch(i % 6){ 
     case 0: r = v, g = t, b = p; break; 
     case 1: r = q, g = v, b = p; break; 
     case 2: r = p, g = v, b = t; break; 
     case 3: r = p, g = q, b = v; break; 
     case 4: r = t, g = p, b = v; break; 
     case 5: r = v, g = p, b = q; break; 
    } 

    return "rgba("+Math.floor(r*255)+","+ Math.floor(g*255)+","+ Math.floor(b*255)+","+ 0.2+")"; 
}

它生成一个随机的色调值，常数的值和v因此，这将返回一个随机的明亮的RGB颜色。此外，由于我使用了黄金比例，所以颜色明亮且不同。尝试使用这个，如果你有任何问题，请回来。

来源

2012-12-28 15:16:51 GautamJeyaraman

它看起来非常有趣，我已阅读使用黄金比例更好的变化。然而，我真的很新的JavaScript，并不能真正理解如何实现你的梦幻般的功能到我的脚本。 – fortes

http://jsfiddle.net/Kc9U4/10/选中此项。 – GautamJeyaraman

试试吧。它给出更多随机和明亮的颜色。 – GautamJeyaraman

将RGB值转换为随机Javascript中的HSL值

回答

相关问题