Full-text blog feedAll 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.
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...)
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).
57 Comment(s):
At 10:29 AM,
Anonymous said…
neat!
At 10:55 AM,
David Naylor said…
Heh, thanks.
At 10:49 AM,
Steven said…
Hey that's awesome man!
At 12:08 PM,
Anonymous said…
Well I just counted them and you are actually 1 short!
At 1:40 AM,
Anonymous said…
Sweet dude. I think he is two short.
At 1:41 AM,
randy apuzzo said…
I say three.
At 1:42 AM,
Mark Gukov said…
I'm really not sure about it: my IrfanView was able to count only 16,777,215 unique colours!
At 1:55 AM,
Anonymous said…
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 ;)
At 1:57 AM,
Anonymous said…
I counted them too and he is not one short. I think you just missed the one cause it's all black
At 2:10 AM,
Anonymous said…
Yup, all 16,77,216 are there.
Nice work! :-D
At 2:37 AM,
Anonymous said…
I thought this would have been better if it was an actual image of something using all the colors. This is just boring.
At 2:42 AM,
Anonymous said…
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.)
At 2:55 AM,
kyelewis said…
If i scroll from left to right, I can clearly see a change, moving from dull to more intense.
At 3:00 AM,
Anonymous said…
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!
At 3:20 AM,
Onomax said…
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.
At 3:28 AM,
Anonymous said…
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.
At 3:29 AM,
Me said…
I lost count after 20.. no more digits...haha
At 4:44 AM,
Anonymous said…
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.
At 4:49 AM,
Anonymous said…
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.
At 4:50 AM,
Anonymous said…
cool.... but surely someone could write a program to do this?
At 9:50 AM,
TastySheriff said…
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.
At 9:53 AM,
TastySheriff said…
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.
At 10:38 AM,
Scorp said…
Great, all 16777216 are over there!
At 12:36 PM,
Anonymous said…
Sorry my earlier count that resulted in it being 1 short was incorrect. I found a dead pixel:-)
At 12:38 PM,
Kyle Pattrick said…
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!
At 12:38 PM,
David Naylor said…
@TastySheriff
I 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.
:-)
At 1:15 PM,
web design uk said…
Wow! Great stuff. I wonder how they did it
At 2:10 PM,
AdiG said…
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.
At 2:13 PM,
Anonymous said…
Cool! If you stare at the randomized picture long enough you can see a 3D sailboat.
At 2:37 PM,
David Naylor said…
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...
:D
Not even Google will do it...
At 2:46 PM,
MakTheYak said…
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.
At 2:48 PM,
David Naylor said…
I think you made the same mistake as I did when first reading adig's comment.
It says: 1 / 16,777,216 !
! = faculty
4! = 4 x 3 x 2 x 1
7! = 7 x 6 x 5 x 4 x 3 x 2 x 1
etc.
At 3:41 PM,
Dave said…
1 / 16,777,216
That 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,216
This 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.
At 12:02 AM,
Anonymous said…
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...x16777216
Just 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 1024x768 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^(1024x768). ^ 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)
At 12:40 AM,
Anonymous said…
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. :)
At 4:22 AM,
Rong said…
Generating these in Python is surprisingly easy. The first one:
from PIL import Image
d = [(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 Image
import random
d = [(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")
At 5:00 AM,
Heather said…
That is really cool
At 1:27 PM,
Anonymous said…
Would be more interesting mapped onto the classic horseshoe gamut.
At 1:50 PM,
Anonymous said…
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 0
else output 1 followed by input image unchanged.
At 1:57 PM,
David Naylor said…
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.
At 3:49 PM,
Anonymous said…
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.
At 10:49 PM,
Anonymous said…
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
At 6:18 AM,
Anonymous said…
fyi google can do factorials up to 170 which has over 360 digits
At 6:59 AM,
Anonymous said…
imagine that just one of those dots is the milky way galaxy
At 4:00 AM,
Anonymous said…
Will this cure cancer?
At 12:02 AM,
Kevin L said…
@Anonymous #15
Whats cool is that after looking at it correctly, I really did see a boat :p
At 4:25 PM,
Anonymous said…
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-5565708
Which is fairly small.
At 12:26 AM,
David Naylor said…
LOL! Anyone with a bit more RAM?
:D
At 5:48 PM,
Anonymous said…
It absolutely amazes me the things that I stumble upon sometimes. What is this new squant color all about?
At 12:20 AM,
David Naylor said…
Squant seems to be a hoax cooked up for Slashdot...
At 8:14 PM,
Anonymous said…
Another approach to the problem: http://www.tbray.org/ongoing/When/200x/2004/05/19/RGBPlane
At 5:36 PM,
Anonymous said…
The approximate value of 1/2^24! is 1.2174221e-113924436.
At 5:39 PM,
Anonymous said…
The approximate value of 1/2^24! is 1.2174221e-113924436.
At 8:49 PM,
ACJ said…
Hey there. Some time ago, I started a little project called allRGB. So far I have posted 11 creations myself (see entries), and I was wondering if you would be willing to contribute. Cheers!
At 4:48 PM,
Anonymous said…
If you open the randomized picture in photoshop and use a gaussian blur at maximum blur you get exacly 50% black.
Later.
At 4:49 PM,
Anonymous said…
If you open the randomized picture in photoshop and use a gaussian blur at maximum blur you get exacly 50% black.
Later.
At 2:26 AM,
Nathan said…
The number of combinations there are is 16777216_P_16777216 = 16777216! / (16777216-16777216)! = 16777216!, so yes, 1/16777216! is the probability of getting the ordered example (since the randomized image has no repeated colors)
stirling's approximation of 16777216! is: sqrt(2 pi 16777216) (16777216/e)^16777216
(using the help of logarithms to approximate the second term)
which is approximately 10267 * (8 * 10^113924433)
which is 82136 * 10^113924433
which is 8.2136 * 10^113924437
so the probability is (approximately):
1/(8.2 * 10^113924437)
which, i must say, is incredibly tiny (the smallest amount time possible, planck time, is 1/(5.39 * 10^44) )
Post a Comment
<< Home