All RGB colors combinations in Javascript

Question

I want all RGB colors in Javascript. I have made this schema;

R   G   B
0   0   0
255 255 255
0   255 255
255 0   255
255 255 0
0   255 0
0   0   255
255 0   0

And I made this in Javascript: click

Do I have now all possible combinations with the RGB colors?

Answer 1

I'm a little late to the party, but... Had the same issue. My approach was as follows. All agree need to display 255^3 (16777215) colors. Was building a contrast scanner to match foreground and background colors and wanted it to be visual. The property values are stored in HEX (e.g. #C4E921). Used the setInterval and captured its id so I could stop either when done or when contrast baseline was exceeded. Essentially, grab the current hex value and convert to decimal

const decClrVal = parseInt(hexClrVal, 16);

Add one to the decClrVal and save to new variable. Convert new value back into 24bit hex rangeElemTxt.value = ('000000' + newVal).slice(-6).toUpperCase();

). One could use an input[range] for the millisecond parameter for the setInterval function to control the speed. I also used a range for the displayed colors so I could start from a predefined color and not always from the beginning.

Lastly, which may not be needed but it helped me in displaying the RGB values... (this code is not mine, kleened from google search, but it worked perfectly, as is, for my needs, my apologies to the owner for not also capturing the reference, but my eternal thanks will have to suffice. :))

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

Hope this helps. Good Luck! :)

Answer 2

No, your code only shows 1,786 colors. There are (256 ^ 3) == 16777216 total possible combinations.

The problem in your code is that values are either ascending/descending together, or they're holding steady at 0 or 255. So you never see, for example, three values for R, G, and B that are different "distances" from 0/255.

Cool visual, though!

Answer 3

If you want to iterate through all 16,777,216 possible 24-bit RGB colours, this can be achieved quite simply with one loop:

for( i=0; i < 1<<24; i++) {
    r = (i>>16) & 0xff;
    g = (i>>8) & 0xff;
    b = i & 0xff;
    colour = "rgb("+r+","+g+","+b+")";
}

In your code, at an interval of 100, this will take almost 20 days to run through a single cycle.

If you're okay with fewer colours, try this:

for( i=0; i < 1<<12; i++) {
    r = ((i>>8) & 0xf) * 0x11;
    g = ((i>>4) & 0xf) * 0x11;
    b = (i & 0xf) * 0x11;
    colour = "rgb("+r+","+g+","+b+")";
}

This will basically reduce your colour range to 4 bits per channel, giving you #000000, #000011, #000022 and so on. Rutime at 100ms interval will be 41 seconds, and span 4,096 colours.