Turning RGB values into HSL values in a random Javascript

Question

I have a random color overlay on the media-boxes of this site.

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

I had some really good help from the mates here at stackoverflow wich resulted in this script:

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 link: http://jsfiddle.net/b5ZPq/3/

However, I would love to have more of the brighter colors and less of the greyish ones. I understand that it can be done with HSL values instead of RGB values.

So I tried to convert the css background rgb values to hsl values and also converted the script, but I didn't get it to work.

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/ (the fiddle, updated, working: http://jsfiddle.net/zolana/Kc9U4/9/ )

(I'm not looking for a script that converts all the RGB values to HSL values (I know there are scripts with that purpose) rather to have a solid script for this specific task.)

I don't get it... How are the colors represented in HSL brighter than those represented in RGB space? — ppeterka, Dec 28 '12 at 15:12
@ppeterka They aren't... but in some ways it's easier to get a brighter color using random values because the last parameter is L for lightness. — jeremy, Dec 28 '12 at 15:15
@Nile I'm familiar with the color spaces, and wanted to point out the poor choice of wording in the question - it is misleading to anyone uncertain about how representing colors works... (and lazy to use google or wiki to look after things - I think there are some out there...) — ppeterka, Dec 28 '12 at 15:28

jeremy · Accepted Answer · 2012-12-28T15:21:38.570

4

Remember that when you use HSL colors (and others), you need to separate each value with a comma and use the correct notation. In this case, it looks like the following.

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

You were missing a comma after the second argument (specifically right after the percent sign).

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

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

edited Dec 28 '12 at 15:21

answered Dec 28 '12 at 15:14

jeremy

9,965
4
39
59

Brilliant! Your sharp eye and a comma made my day. – fortes Dec 28 '12 at 15:34

score 1 · Answer 2 · answered Dec 28 '12 at 15:16

Check out this code I wrote:

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+")";
}

It generates a random Hue value, constant values for s and v. So this returns a random bright rgb color. Also the colors are bright and different because I have used the golden ratio. Try to use this and get back if you get any problems.

It looks really interesting and I've read about using the golden ratio for better variation. However, I'm really new to javascript and can't really understand how to implement your fantastic function into my script. — fortes, Dec 28 '12 at 15:44
I tried it. The difference was slight to my eye. Keeping it because i love the golden calculations behind it. — fortes, Jan 08 '13 at 15:50
Oh thanks. Try to play with the s and v values for more fun :) — GautamJeyaraman, Jan 08 '13 at 16:19

Turning RGB values into HSL values in a random Javascript

2 Answers2