Monday, February 21st 2005

All 16,777,216 RGB colours

A while back, having nothing better to do, I set about creating an image with all the RGB colours. Yes, that’s right. All 16.8 million.

This little show of lunacy also turned out to be a great demonstration of the powers of the PNG image format: The graphic, being 16.8 million pixels and 24 bit colour, ends up a modest 50 MB uncompressed. The PNG format produces a 58.0 kB file.

Before you take look at this (truly) colourful piece of art, I warn those with slow computers. Don’t let the light download trick you – the graphic packs a nice punch to the CPU if you’re on something like 400 MHz.

All 16,8 million RGB colours

Update: Per popular request, I have now created a version of the image with all pixels randomized… (This time it’s a bit more than 58 kB…)

All 16,777,216 RGB colours, randomized.

And how about a little mathematical challenge: What are the chances that, by randomizing the pixels in the (randomized) image above, I would get the (ordered) version at the top? 🙂

Update 2: I created another version of the ordered image, with the squares laid out along the diagonal of the image instead. This one (78 kB) didn’t compress quite as well as the first one (58 kB).

All 16,777,216 RGB colours, with tiles ordered along the diagonal of the image.

Edit 2011-06-30: Was inspired by one of the comments to try and compress the 58 kB png file. IzArc can create a 7z file which is only 705 bytes large! That is 1/71436th the size of the uncompressed image in Tiff format. That’s pretty impressive stuff!

No Responses to this post:

  1. Anonymous says:

    neat!

  2. David Naylor says:

    Heh, thanks.

  3. Steven says:

    Hey that’s awesome man!

  4. Anonymous says:

    Well I just counted them and you are actually 1 short!

  5. Anonymous says:

    Sweet dude. I think he is two short.

  6. randy apuzzo says:

    I say three.

  7. Mark Gukov says:

    I’m really not sure about it: my IrfanView was able to count only 16,777,215 unique colours!

  8. Anonymous says:

    Hmm, it should be pointed out that only people with a 16.7 Mexapixel or better display will actually be able to see all of those colours on screen at any one point in time 😉

  9. Anonymous says:

    I counted them too and he is not one short. I think you just missed the one cause it’s all black

  10. Anonymous says:

    Yup, all 16,77,216 are there.Nice work! 😀

  11. Anonymous says:

    I thought this would have been better if it was an actual image of something using all the colors. This is just boring.

  12. Anonymous says:

    I’m no expert, but this graphic looks wrong to me. For example, I can see that in each column of boxes, the boxes gradually change. But in each row of boxes, they all look the same to me. For example, the bottom row. It just looks like 16 repeating squares. (And I doubt it’s just so subtle I can’t tell that they’re different.)

  13. kyelewis says:

    If i scroll from left to right, I can clearly see a change, moving from dull to more intense.

  14. Anonymous says:

    i love watching people post responses to subjects they have no knowledge of – go learn about color theory and then color theory applied in digital formats before you start bitching – good work!

  15. Onomax says:

    I was rather impressed, myself – true that the last row looks similar, but there are subtle differences. Remember too that CRT color depth is greater than LCD’s at present.

  16. Anonymous says:

    Well I see most of the boxes as the same, but I’ll take your word that all 16.8 million colors are there, since I’m not going to sit around and count them.

  17. Me says:

    I lost count after 20.. no more digits…haha

  18. Anonymous says:

    I’d like to see every other column reversed left-to-right, and every other row flipped top-to-bottom at the same time. That would create a completely different visual feel, smooth and countoured instead of blocky and discontinuous.

  19. Anonymous says:

    I’d like to see every other column reversed left-to-right, and every other row flipped top-to-bottom at the same time. That would create a completely different visual feel, smooth and countoured instead of blocky and discontinuous.

  20. Anonymous says:

    cool…. but surely someone could write a program to do this?

  21. TastySheriff says:

    Ok, for those who dont quite get how this works, and in spite of those who insult people, rather than informing them, heres whats going on here:The Red and Blue values are being changed in the smaller boxes; the farther right you go in a given smaller box, the higher the blue value, and the farther down you go in a given box, the higher the blue value.Thy yellow values are being changed throughout the entire image. Each smaller box has a different yellow value, with 0 in the upper left hand side, 15 in the upper right hand corner, and 255 in the lower right hand corner (Basically increasing left to right, top to bottom.) And yes believe it or not there are 256 smaller boxes in this picture (16*16)Normally i wouldnt explain this, but i hate it when people generally express curiosity and then other people fire insults back at them rather than explaining things to them. Hope this was enlightening.

  22. TastySheriff says:

    Haha, and after my rant i screw up the explanation, the second paragraph should read: the farther right you go in a given smaller box, the greater the RED value, and the farther down you go in a given box, the higher the blue value.

  23. Scorp says:

    Great, all 16777216 are over there!

  24. Anonymous says:

    Sorry my earlier count that resulted in it being 1 short was incorrect. I found a dead pixel:-)

  25. Kyle Pattrick says:

    Clearly each box of colour is different. Nicely done!Although one could say millions of colours in technical computer terms, it’s more like millions of tones. Of course, thats why you said RGB colours though. ;p So excuse my rambling!

  26. David Naylor says:

    @TastySheriffI think you mean to say that the GREEN value increases for every sqare, from the top left to the bottom right.RGB has no yellow.:-)

  27. web design uk says:

    Wow! Great stuff. I wonder how they did it

  28. AdiG says:

    The probability to get the ordered picture when pixel color is random is: (1/16,777,216)^16,777,216 if each time you can pick from all colors, or 1/16,777,216! if after you pick a color you exclude it from the set of remaining colors.

  29. Anonymous says:

    Cool! If you stare at the randomized picture long enough you can see a 3D sailboat.

  30. David Naylor says:

    I believe you’re right: 1/16,777,216!I have yet to find a calculator which will turn that into a real number though…:DNot even Google will do it…

  31. MakTheYak says:

    If the pixels are being randomised then each would only be used once. But 1/16,777,216 is far to large a number – that would be the probablility of picking any one particular pixel out of the whole lot. You have to factor in picking the correct next pixel 16,777,216 times over (although the remaining pixels to be picked would decrease by one each time making the probablility of picking the right one better each time). Unfortunately my maths isn’t good enough to provide a solution or equation for that but I think the principal is sound.

  32. David Naylor says:

    I think you made the same mistake as I did when first reading adig’s comment.It says: 1 / 16,777,216 !! = faculty4! = 4 x 3 x 2 x 17! = 7 x 6 x 5 x 4 x 3 x 2 x 1etc.

  33. Dave says:

    1 / 16,777,216That would be the chance of, let’s say you picked a color, one specific color, out of the whole lot. The chance that you could randomly pull that color out of a bag (of colors) would be 1 / 16,777,216.1 / 16,777,216!That would be the chance of getting the entirety in it’s proper order without being able to repeat colors. If you picked out of your bag of colors and set everything down and did not put the color back in the bag. The reciprocal would be a huge number, to put in perspective, 70! is over 100 digits long, or over a googol. This can be explained as, the first time you choose, there’s an equal chance you could pick out any color with equal chance, and therefore have 16,777,216 possibilities when you need just the one. The next choice, you have 16,777,215 possibilities, and the chance of picking out the first two in order would be those number multiplied. Keep doing this with all 16,777,216.1 / 16,777,216^16,777,216This would be the chance that you could pick out the entire proper order, but after every color you picked out, you threw the color back in the bag and therefore it was a possibility again.

  34. Anonymous says:

    The math question.say you got 3 different colors, that’s 3! (3 factorial) number of different combinations. 3!=1x2x3…So 16 billion colors will be 16777216 factorial. 1x2x3x4…x16777216Just type in your calculator 16777216! If your calc can’t do that, try 9! and see how big that is.I had a theory that if we were allowed to repeat colors when randomizing and if randomize enough in to a 1024×768 mega pixel image, we’d be able to get every picture known to man kind and other unknow pics. the calculation for that would be 16,777,216^(1024×768). ^ meaning “to the power of”. That is a even bigger number than factorials. To get an idea how big, just go 16777216 x 16777216 x 16777216….. do that 16777213 more times.So the chances of us getting a useable picture is next to almost nothing. (nova9)

  35. Anonymous says:

    If you open the image in photoshop and use the eyedropper to sample the color you can clearly see that the image is correct. Good job. 🙂

  36. Rong says:

    Generating these in Python is surprisingly easy. The first one:from PIL import Imaged = [(r, row*16+g, b) for row in range(16) for b in range(256) for g in range(16) for r in range(256)]img = Image.new(“RGB”, (4096, 4096))img.putdata(d)img.save(“all16777216rgb.png”)The random image:from PIL import Imageimport randomd = [(r, g, b) for for r in range(256) for g in range(256) for b in range(256)]random.shuffle(d)img = Image.new(“RGB”, (4096, 4096))img.putdata(d)img.save(“all16777216rgb-scrambled.png”)

  37. Heather says:

    That is really cool

  38. Anonymous says:

    Would be more interesting mapped onto the classic horseshoe gamut.

  39. Anonymous says:

    You provided the randomized image and say that it is larger, but you should really say how much larger (48 Mb – little compression at all!)Your post claims that the original image shows how good png is – but just coming up with one synthetic image that compresses well is no test of a compression method. A method is good only if it compresses well *on average* over typical images. I can come up with a compression method that compresses your initial image to 1 bit:if input image == your initial image, the output 0else output 1 followed by input image unchanged.

  40. David Naylor says:

    Chill man. I never meant for this to be some kind of real life test of the PNG format. Obviously, this image is nothing but a huge pattern, and PNG manages to find that pattern.I thoght the irony was clear when I said that the second image was “a bit more than 58 kB”… Anyone reading this should be well nerdy enough to work that one out. It was hardly an attempt to hide (obvious) facts about the PNG format.

  41. Anonymous says:

    TastySheriff, Thanks for the explanation! :)Also, you may have enough suggestions of this sort, but I might suggest reversing every other row of 16 squares, so the “gradient” does a snake pattern from top-to-bottom rather than reading like a book. That would have cleared it up visually (and immediately) for me, at least. Very cool.

  42. Anonymous says:

    A similar image has been rendered in the MNG format in only 468 bytes. See the PNG book:http://www.libpng.org/pub/png/book/chapter12.html

  43. Anonymous says:

    fyi google can do factorials up to 170 which has over 360 digits

  44. Anonymous says:

    imagine that just one of those dots is the milky way galaxy

  45. Anonymous says:

    Will this cure cancer?

  46. Kevin L says:

    @Anonymous #15Whats cool is that after looking at it correctly, I really did see a boat :p

  47. Anonymous says:

    I typed 1/(16777216!) into Maple (math calculating software). On my 2Ghz PC it ran for 6 minutes before it ran out of memory. At this point it was eating 350MB of memory.For comparison, 1/1,000,000! = 0.1210077766e-5565708Which is fairly small.

  48. David Naylor says:

    LOL! Anyone with a bit more RAM?:D

  49. Anonymous says:

    It absolutely amazes me the things that I stumble upon sometimes. What is this new squant color all about?

  50. David Naylor says:

    Squant seems to be a hoax cooked up for Slashdot…