Pseudo random colours generator in javascript

Question

Starting from this question : Random color generator in JavaScript and its first answer:

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

I'm asking: is there a way to avoid a certain range of colours?

Say I want to avoid C0C0C0 (silver) and all the similar shades.. I was trying to understand how the colours work here: http://www.w3schools.com/tags/ref_colorpicker.asp. I wrote C0C0C0 and I got all the similar colours but obviously the list is not complete because going up and down from C0C0C0 we have C6C6C6 and ADADAD but I would also avoid C0C0C1 which differs from silver only in the last bit.

I hope I explained myself. Can you do that somehow?

Thanks Cheers

"Similar" is a pretty fuzzy word. You first need to specify what is a similar color. — fero, May 28 '13 at 13:27
You can always generate the colour and discard it if it does not pass a certain condition. Otherwise, it depends on how you define 'similar colours'. — Stilltorik, May 28 '13 at 13:28
By "similiar" you mean the darker/ligther shades as presented by that color picker? Then just use random [HSV](http://en.wikipedia.org/wiki/HSL_and_HSV) values and exclude that color (hue) range in all its values. — Bergi, May 28 '13 at 13:29
I think the job would be easier if you defined a color as an array of 3 bytes or ints (0-255 each) instead of 6 characters. Then it's easier to write a little function called `close_to_gray(color)` which checks the spread of the 3 numbers relative to one another and rejects random selections where that function comes back true. You can then also parameterize how much "spread" you want to define for "close to gray", e.g., difference between any two primaries (r, g, b) is 1 or whatever. At the end, format the array of 3 numbers to #XXXXXX format. — lurker, May 28 '13 at 13:31
Sorry for the "fuzzy word" but I didn't really know how to explain the issue :). Thank you all for the answers. @mbratch I think your solution would do the job. As soon as I have some spare time I'll try it out and let you know here. — valenz, May 28 '13 at 13:43

el vis · Answer 1 · 2013-05-28T13:48:29.093

As somebody said similiar is fuzzy word :)

If that functionality is really important you can try to use CIE LAB color model that defines "color differences". L*a*b model

It has values: L, a , b

You can calculate ΔE = sqrt((ΔL)^2 + (Δa)^2 + (Δb)^2)

And model says that:

0<ΔE<1 - cannot see the difference

1 <ΔE < 2 - the difference can be seen by experienced observer

2 <ΔE < 3,5 - the difference can be seen also by unexperienced observer

3,5 <ΔE < 5 - the difference is distinct

5 < ΔE - both colors are totally different

So you would convert RGB to L*a*b (eg with that: http://www.easyrgb.com/index.php?X=MATH)and see if that are "different" colors

I have never done that, it's just idea :)

Wow, thanks but I have seen your answer too late. It's probably the best answer even though it could be a little bit too complicated for what I actually need. Interesting anyway! :) — valenz, May 28 '13 at 14:46

lurker · Accepted Answer · 2013-05-28T13:45:15.620

2

function get_random_color() {
    var color = new Array;

    do {
      for (var i = 0; i < 3; i++ ) {
        color[i] = Math.round(Math.random() * 255);
      }
    } while (close_to_gray(color));

    // Reformat the r, g, b binaries to #XXXXXX here, call it 'color_s'
    return color_s;
}

function close_to_gray(color) {
    var spread = 1;

    for ( var i = 0; i < 3; i++ ) {
      for ( var j = i+1; j < 3; j++ )
        if ( abs(color[i] - color[j]) > spread )
          return false;
    }

    return true;
}

Something like that. You can play with the spread value to your liking. :)

edited May 28 '13 at 13:45

answered May 28 '13 at 13:40

lurker

56,987
9
69
103

ok, I am trying this solution. I only have one question: the function close_to_gray(color), only checks if the components R, G and B of the input colour differ at least 'spred' to each other. Correct? How does this guarantee far-from-grey colours? Thanks for the explanation. – valenz May 28 '13 at 14:27
OK! I just found out that all the colours that present R,G and B close to each other are grey shades! So I was lucky that I only needed to go far from grey!! Nice :) Thanks. – valenz May 28 '13 at 14:35

Pseudo random colours generator in javascript

2 Answers2