Every single possible colour

September 13, 2013 9:35 AM

allRGB is a repository of images that contain one pixel each of every possible colour in the RGB colour space.
posted by alby (35 comments total)

A lot of these images seem to reinforce that disappointing lesson you'd learn over and over as a kid with a box of crayons: when you end up using all the crayons in the box, thinking you'll make a riotously colorful display, you end up making a dull khaki mud pool.
posted by yoink at 9:42 AM on September 13, 2013 [5 favorites]

And we killed it.
posted by starvingartist at 9:43 AM on September 13, 2013 [2 favorites]

The google cache and wayback machine work, kinda. You can't get to the detailed views.
posted by zsazsa at 9:47 AM on September 13, 2013

Practically speaking, how would you do this?
posted by leotrotsky at 9:49 AM on September 13, 2013

It's probably old news to graphic design people reading this, but I was recently surprised to learn that there are colors that can't be reproduced in RGB. For example international orange.
posted by paper chromatographologist at 9:49 AM on September 13, 2013 [3 favorites]

leotrotsky, from the descriptions it seems that they're using algorithms and code.

I particularly like this one, for all its cheaty patches.
posted by forgetful snow at 9:50 AM on September 13, 2013

Every possible color? That's assuming you are using IEEE-754 floating point numbers to track RGB values (i.e 2²⁴).

If you define the RGB colorspace to consist of 3 64-bit integers, then there's a whole lot of colors missing.

Or, if you're like me, you define the RGB colorspace as 1 bit, then there's a whole lot of duplication in those images.
posted by blue_beetle at 9:58 AM on September 13, 2013

Hrm. There's a Lenna, but no teapot.

Dammit, now I might have to spend my afternoon cooking up a contribution.
posted by atbash at 10:01 AM on September 13, 2013 [1 favorite]

Every possible color? That's assuming you are using IEEE-754 floating point numbers to track RGB values (i.e 224).

If you define the RGB colorspace to consist of 3 64-bit integers, then there's a whole lot of colors missing.

But they're not - they're defining it as the normal XRGB colorspace your monitor is using.
posted by atbash at 10:02 AM on September 13, 2013 [1 favorite]

Practically speaking, how would you do this?

For any of the photographic ones, here's the simplest (but not best) way:
1) make sure your photo is 4096x4096 pixels
2) construct a list of all of the possible values
3) for each position in the photo, pick the closest value to its value in the list
a) use that value as that position's value in your output image
b) remove that value from the list
4) repeat #3 until you're out of pixels.
posted by atbash at 10:06 AM on September 13, 2013 [2 favorites]

Ha, this is awesome! I did something in a similar programmatic veing years, ago, rebalancing images to embed custom self-similar histograms, but these are decidedly more elaborate. I might have to give it a go myself.

Practically speaking, how would you do this?

Coming up with an idea for redistributing your collection of 2^24 pixel colors so that each one is a relatively good match to some pixel in your source image isn't too hard by itself. The devil is in the details.
posted by cortex at 10:06 AM on September 13, 2013 [3 favorites]

This is very awesome.

I don't need another project I don't need another project I don't need another project I don't need another project I don't need another project I don't need ano....
posted by seyirci at 10:12 AM on September 13, 2013

It's probably old news to graphic design people reading this, but I was recently surprised to learn that there are colors that can't be reproduced in RGB. For example international orange.

What do you mean? Your own link defines it as #FF4F00 in aerospace, #BA160C in engineering, and #C0362C for the color of the Golden Gate Bridge.
posted by kafziel at 10:19 AM on September 13, 2013 [4 favorites]

> Practically speaking, how would you do this?

Use one of those photo mosaic applications, only instead of making a picture of Cinderella's Castle collaged out of stills from Disney movies, use a whole lot of 1x1 pixel colors as your pool of images.

There are ways to DIY this at an algorithmic level to make it a hell of a lot more efficient, but I assume you're asking how you could do this in the comfort of your home with minimal technical experience.
posted by ardgedee at 10:32 AM on September 13, 2013 [1 favorite]

Every possible color? That's assuming you are using IEEE-754 floating point numbers to track RGB values.

They are not using IEEE-754 floating point numbers to represent anything. The number 16,777,216 comes from using one 8-bit integer to represent the level of each primary color.

(There are systems that use more bits, and use floating-point numbers)
posted by mkb at 10:37 AM on September 13, 2013 [2 favorites]

I too am confused by the notion that 24 bits of precision implies floats. Besides the fact that it's just not the case, it wouldn't make sense from either a semantics or a performance perspective.

cortex: "Ha, this is awesome! I did something in a similar programmatic veing years, ago, rebalancing images to embed custom self-similar histograms, but these are decidedly more elaborate. I might have to give it a go myself."

There's probably an obvious example that just isn't occurring to me, but I wonder, if we take this idea to its extreme and assuming a representation of histogram creation as a function of a bit string, say H(x), if that function has any fixed points.
posted by invitapriore at 10:50 AM on September 13, 2013

cortex: "Coming up with an idea for redistributing your collection of 2^24 pixel colors so that each one is a relatively good match to some pixel in your source image isn't too hard by itself. The devil is in the details."

One plausible additional critieria is to minimize the color error when allocating a new color to each pixel in the original. I'm pretty sure this is an intractable problem, but I'll leave the proof of it as an exercise to the reader.

On the heuristics front, you could put together a dither method that would totally violate the error minimization constraint but look a hell of a lot better because human vision.

I guess another element of the challenge is selecting source material; you want something that plausibly contains multiple colors. A blank green screen, for example wouldn't translate well, and no dithering can compensate.
posted by pwnguin at 10:52 AM on September 13, 2013

One plausible additional critieria is to minimize the color error when allocating a new color to each pixel in the original. I'm pretty sure this is an intractable problem, but I'll leave the proof of it as an exercise to the reader.

Well, you probably want to determine some criteria (maybe an edge detection or somesuch) to determine which pixels are most important, and assign them from values in your gamut first. Which I guess is exactly what you're talking about in the line after the one I quoted.
posted by atbash at 10:56 AM on September 13, 2013

I see you've found my screen-printing customers. No, we cannot "print it in RGB."
posted by Devils Rancher at 10:57 AM on September 13, 2013 [4 favorites]

For any of the photographic ones, here's the simplest (but not best) way:

An easy way to improve the output of such a method is to pick the input pixels in a random order rather than going row by row (or column by column). For many natural source images that include large swathes of similar colors, proceeding systematically will result in all the "good" pixels getting used up early on, such that the image will steadily deteriorate towards the bottom (or side). Randomizing the inputs is a simple way to distribute the error.
posted by jedicus at 11:06 AM on September 13, 2013 [2 favorites]

> A blank green screen, for example wouldn't translate well, and no dithering can compensate.

Seems to me that trying to replicate a flat even surface (to a human eye) would be an interesting challenge. Not a particularly entertaining one for viewers, admittedly.
posted by ardgedee at 11:08 AM on September 13, 2013

What do you mean? Your own link defines it as #FF4F00 in aerospace, #BA160C in engineering, and #C0362C for the color of the Golden Gate Bridge.

I think he means Safety Orange.

It's even harder to achieve intense orange hues in CMYK. I recall a long time ago I did some prepress work for a for a Florida orange grower, they wanted to use CMYK plus a "touch plate" of just orange ink. This is a common way to get intense colors that can't be achieved in CMYK. You just make a separate plate of the intense orange ink and print it over the CMYK. But this is very tricky to make color separations, you pretty much have to mask it off manually to only the areas that need the brightest orange. This is relatively common in fine art printing (I've seen prints that have more than 100 solid colors). But it is uncommon in commercial printing processes, except special applications like flexography on packaging. For example I just looked on the bottom of a pack of Northern toilet paper, it has a registration pattern showing all extra colors of purple and green, which are colors that can't be achieved with CMYK. Actually, I don't think that design uses CMYK colors at all except cyan, it's a very strange printing job.

Intense hot colors are always tricky. I remember one case in particular. My local university museum has an early Mark di Suvero sculpture, it was purchased right around the time I was a freshman art student. Here is a photo as it was originally installed. It was painted in bright, shiny enamel paint, I remember the vivid colors and described the red as "fire truck red." di Suvero said he used standard yellow and red colors used on equipment like fire trucks and construction equipment, because it was cheap and standardized. And of course the sculptures are refences to big construction equipment.

The sculpture was hugely controversial for stupid reasons. Of all the nerve, paying $30k for a sculpture made of junk! My kid could make that, if he knew how to weld! They are dangerous as all hell because they have steel pieces weighing hundreds of pounds, dangling off cables. If a kid played around with them like would probably happen eventually, they could get smashed to bits. So the sculpture was eventually removed from public display.

A few years ago, the sculpture was restored and put back on display. I went to go see it, and I was appalled. The colors were all wrong. The red was too pale, it almost looked pink, and the yellow looked washed out. And worst of all, the paint job was matte and not shiny. So I immediately went into the museum and asked to see the curator. I asked him, what's the deal with the colors on the restored sculpture? They're the wrong colors. He said, "well how do you know that?" Well, um, because I saw it when it was brand new. He said they went to great pains to get the right colors. I asked if he called Mark di Suvero, he would have given you the color specs. He looked stunned like that had never occurred to him.

But it doesn't matter now, because the museum was destroyed in a flood and all their artworks are in storage. The museum will not be rebuilt for a long time, and the works might not go back on display in my lifetime (or di Suvero's). And now that cheap $30k sculpture slapped together from iron beams, steel plates, and off-the-shelf enamel paint, is easily worth $500k, maybe close to $1M.
posted by charlie don't surf at 11:09 AM on September 13, 2013 [19 favorites]

But this is very tricky to make color separations, you pretty much have to mask it off manually to only the areas that need the brightest orange.

Select by color range... choose Select sampled colors from the popup, (click the orange or whatever, adjust the slider to your liking) > create new spot channel. I will usually adjust these down to a max. 50% saturation so as to not kill the detail.

It's the only way to survive half the cmyk jobs I get here for T-shirts. We add 2 or 3 touch plates on some jobs, not counting highlight & underbase whites.

If you don't explain gamut carefully and patiently to each & every new client, The client gets a bill for 7 colors, and they call & whine "I thought it was 4 color process!

But yeah, you see it all the time in packaging. I have brought graham cracker & Ritz boxes to work to show the color swatches under the flaps to employees and clients both. as a means of demonstrating that it is necessary to create touch plates a lot of the time.
posted by Devils Rancher at 11:19 AM on September 13, 2013 [2 favorites]

Do they have one of RG3 in RGB?
posted by The 10th Regiment of Foot at 11:40 AM on September 13, 2013

actually, this carpet would go well in my living room
posted by 5_13_23_42_69_666 at 12:08 PM on September 13, 2013

A few years ago, the sculpture was restored and put back on display. I went to go see it, and I was appalled. The colors were all wrong. The red was too pale, it almost looked pink, and the yellow looked washed out. And worst of all, the paint job was matte and not shiny. So I immediately went into the museum and asked to see the curator. I asked him, what's the deal with the colors on the restored sculpture? They're the wrong colors. He said, "well how do you know that?" Well, um, because I saw it when it was brand new. He said they went to great pains to get the right colors. I asked if he called Mark di Suvero, he would have given you the color specs. He looked stunned like that had never occurred to him.

I wonder if the issue was that it had never been repainted? So they went to great pains to match the color of weathered, faded firetruck red and safety orange. (My neighborhood has fire alarms scattered about and when the red paint fades, it definitely goes pink. Here's a similar example in SF - you can see it starting to go pink.)
posted by maryr at 12:14 PM on September 13, 2013

An easy way to improve the output of such a method is to pick the input pixels in a random order rather than going row by row (or column by column).

Although the resulting image if you went in order might be kind of pretty; the colors would get more and more garbled as you progress through the image... I'd rather like to see that, actually.

Seems to me that trying to replicate a flat even surface (to a human eye) would be an interesting challenge. Not a particularly entertaining one for viewers, admittedly.

This one comes close...
posted by ook at 1:22 PM on September 13, 2013 [1 favorite]

ook: "Although the resulting image might be kind of pretty; the colors would get more and more garbled as you progress through the image... I'd rather like to see that, actually."

You can actually see this with JPEG glitches (try messing around with the bars at the top), since the encoding scheme results in later pixels being rendered in ways that are dependent on values that occur much earlier in the file.
posted by invitapriore at 1:26 PM on September 13, 2013 [1 favorite]

I'm tempted to implement various versions of this algorithm using SQL to store the pool of color choices. Which means I've been playing with SQL too much but it also occurred to me that it'd be neat to see variations on the systematic approach (visualize slide transitions) vs. randomization and other methods I'd be capable of implementing. Hmm
posted by lordaych at 2:44 PM on September 13, 2013

Do they have one of RG3 in RGB?

Doesn't meet WC3 standards.
posted by Devils Rancher at 5:29 AM on September 14, 2013

maryr: I wonder if the issue was that it had never been repainted? So they went to great pains to match the color of weathered, faded firetruck red and safety orange. (My neighborhood has fire alarms scattered about and when the red paint fades, it definitely goes pink. Here's a similar example in SF - you can see it starting to go pink.)

That is entirely possible. But then, these are curators in a museum of an art school full of people who are supposed to know about paint and fading.

I recall seeing the sculpture in rather faded condition, like your fire box (hey my old neighborhood!). Some enamel paints can oxidize on the surface and they become more matte. Then the paint fades a bit, and instead of light reflecting off the shiny surface, it goes into the paint and some subsurface scattering happens. Result: pink. This is why people wax their cars, a good wax job will polish off the oxidized layer and it's shiny and bright.

Devil's Rancher: But yeah, you see it all the time in packaging. I have brought graham cracker & Ritz boxes to work to show the color swatches under the flaps to employees and clients both. as a means of demonstrating that it is necessary to create touch plates a lot of the time.

LOL only printing geeks look at the color bars on printed packaging, let alone know what they mean. A real print geek will examine them for registration.

BTW, it was a lot harder to make touch plates in Photoshop 2.0. And it is especially tricky to make them work in transparent inks in offset printing, especially rotary offset. Sheet fed, you can always let it sit and dry before another pass, but offset usually runs through all the stages at once, so you hit saturation limits easily.
posted by charlie don't surf at 2:09 PM on September 14, 2013

Yeah, thank the deities that you can saturate the fuck out of a T-shirt. I will actually put a dark color down first because I get a lot of my saturation through absorption. So, if I need a deep red, I'll print magenta then yellow, so that the wet yellow doesn't repel the magenta. I set my ink limit at 350% a lot of the time. Also, flash cures.
posted by Devils Rancher at 3:52 PM on September 14, 2013

What do you mean? Your own link defines it as #FF4F00 in aerospace, #BA160C in engineering, and #C0362C for the color of the Golden Gate Bridge.

I think he means Safety Orange.

What do you mean? Yow own link defines it as #E87600
posted by radwolf76 at 9:05 PM on September 14, 2013

Words are on that page too! Words you can read!

Note that this CIE color point is outside the gamut of common color spaces like sRGB or Adobe RGB. The closest CIE color point that is still in the sRGB gamut is x = 0.54091, y = 0.40869, Y% = 30.05, corresponding to the sRGB-255 coordinates (232, 118, 0) [...] The Adobe RGB color space is larger than the sRGB color space; the closest "safety orange" CIE color point that is still in the Adobe RGB gamut is x = 0.54467, y = 0.41424, Y% = 30.05, corresponding to the AdobeRGB-255 coordinates (206, 118, 0).

#E87600 is the closest in-gamut approximation of the color, not the exact color.
posted by ook at 8:44 AM on September 15, 2013 [1 favorite]

There is some code for making your own allRGB images here.
posted by alby at 9:39 AM on September 18, 2013