How to get every valid hex code in javascript

Question

This is a small thing that I started working two days ago, thinking that it would be a small brain problem, and then I will return to eating my lunch again. However, it is difficult for them. I want to get an array of all valid hexadecimal color codes. No crashing is preferable.

This is what I came up with.

app.directive 'randomColor', () -> link: (scope) -> scope.colors = new Array col = 0x0 while col <= 0xFFF if (col > 0x111 && col < 0xFFF) scope.colors.push '#' + col col++ autocolor = (hexcode) -> colorChange = () -> $("#colorvomit").append("<span style='padding: 1px 10px 1px 10px;background-color: " +hexcode+";border: 1px solid black;'></span>") setTimeout(colorChange, 5000) _.each(scope.colors, autocolor) 

Don't forget that I use coffescript and angular js. Using the underscore library so I can use _.each.

So, I get this as a result

you can see that there are a lot of white squares below, and this goes on forever, because it returns with invalid hex codes like # 1223 (4-digit).

So, here is my question: what is the best way to get all valid hexadecimal color codes allows me to say that 6 long I have 3 long (FFF), because it crashes otherwise without receiving invalid codes. Appreciate all your help, and I think it will be an interesting question.

I did my research and did not find anything like it. Because we want all of them to be in order, as well as 111 112 113 ect ...

Answer 1

remember that 256 * 256 * 256 = 16777216, so it will take some time to complete.

 var result = ''; for(var i=0;i<256;i++) for(var j=0;j<256;j++) for(var k=0;k<256;k++) {r = i.toString(16); g = j.toString(16); b = k.toString(16); if(r.length!=1||g.length!=1||b.length!=1){ if(r.length==1)r='0'+r; if(g.length==1)g='0'+g; if(b.length==1)b='0'+b; }//will use 3 length color unless one of r,g or b is to digit then 6 length will be used. result += r + g + b + '<br/>'; } document.write(result); 

If you want it in an array, then:

 var result = []; for(var i=0;i<256;i+=16) for(var j=0;j<256;j+=16) for(var k=0;k<256;k+=16) {r = i.toString(16); g = j.toString(16); b = k.toString(16); if(r.length!=1||g.length!=1||b.length!=1){ if(r.length==1)r='0'+r; if(g.length==1)g='0'+g; if(b.length==1)b='0'+b; } //will use 3 length color unless one of r,g or b is to digit then 6 length will be used. result.push(r + g + b); } 

See DEMO

Here is a graphical DEMO with a reduced number of colors, as we cannot show millions of colors.

Answer 2

Instead of using a nested loop, I just converted the decimal code from / to hex. Not better, just different. The script below showing the operation.

* Edit: this code is modified to run all 16 million colors. The violin still uses 8 bits per color ( #000; brief notation), so it’s not forever

 var $cv= $("#colorvomit"); for(var col=parseInt("000000", 16); col<=parseInt("ffffff", 16); col++) { var hex = col.toString(16); hex = '0'.repeat(6-hex.length) + hex; $cv.append('<span style="background-color:#'+hex+';"> &nbsp; </span>'); } 

https://jsfiddle.net/4tm54u62/1/