將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值

回答

相關問題