CODEWITHSUNDEEP
javascriptrandomcolors
valenz
valenz

Reputation: 311

Pseudo random colours generator in javascript

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

Upvotes: 2

Views: 1096

Answers (2)

el vis
el vis

Reputation: 1302

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 :)

Upvotes: 4

lurker
lurker

Reputation: 58324

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. :)

Upvotes: 2

Related Questions