All RGB colors in one image | Hacker News Reader

All RGB colors in one image

joco.name

The SE thread linked in the post is really worth the read: http://codegolf.stackexchange.com/questions/22144/images-wit...

There's actually a community of all-RGB pic creators: http://allrgb.com/

This is one of the most bizarre things I've seen in a long time.

Very psychedelic, I'd say.

haha..years ago when I used to do Win32/MFC development I was in the habit of writing code that painted random pixel colors on my windows desktop...you get the psychedelic effect if you don't do bit-block transfers but paint directly to the screen...it was always a fun time wasting activity.

I sometimes like to violate the browser canvas element in my spare time:

Chromium Version: http://webspekt.de/paintgen-client

node.js Version: http://webspekt.de/paintgen-server

My Server is pretty bad, so when in doubt, don't click.

Bizarre and very interesting. A lot of those look like an extreme version of dithering.

Would be cool to re-apply all the algorithms to HSV space and see what comes out.

HSV is just a straight-forward transformation of RGB https://en.wikipedia.org/wiki/File:Hsl-and-hsv.svg

The set of “all colors” is exactly the same.

(Note, HSL/HSV are not suitable representations for almost any purpose, especially not for human user interfaces; it’s a tragedy that they are in such wide use.)

Whjy do you say that? I find them much more intuitive. For example, getting actually brown browns with RGB is tricky...with HSV it's trivial.

A rule of thumb if you have to find brown in RGB: use a bit of red, slightly less green, then a tiny bit of blue.

That kind of proves the point. How many of those rules of thumb are you going to have to formulate to express in RGB what's trivial to find in HSV?

Unfortunately I've already formulated them after working so much with RGB in low-level graphics code, pre-hsv() CSS, and some image editing software.

Actually, that sounds kind of like a fun challenge game: name a color, then try to guess RGB values for that color.

I've gotten pretty good at doing the reverse operation(given an RGB value, guess the color) because I'm red-green colorblind and that's how I figure out what color something is :)

The converse game exists: http://yizzle.com/whatthehex/

Edit: Actually, so does the “guess the RGB given the colour” direction, but I don’t find it as fun: http://mallory.jemts.com

jacobulus might have been referring to certain color spaces that are optimized for human use instead of for computer manipulation, such as HUSL (http://www.boronine.com/husl/). HUSL gives you a slider that actually changes the apparent brightness of a color to your eye: whereas HSL thinks that bright green is just as “light” as dark true blue, and HSV/HSB thinks that true blue is just as “bright” as white, HUSL colors with the same “lightness” actually do look equally light. Another human-optimized color space is CIELUV (https://en.wikipedia.org/wiki/CIELUV).

A color space is good for transforming colors along lines orthogonal to its axes. In RGB, you can't easily find another shade of a given hue. In HSV, this common task is trivial.

I was going to comment that HSL/HSV can be useful for generating colors that work well, but... the real problem is not luminance as much as the HSL values we commonly use. See http://en.wikipedia.org/wiki/HSL_and_HSV#Disadvantages where CIELAB L* is shown as a better representation. Though it's not perfectly matched to the human eye even so.

> See http://en.wikipedia.org/wiki/HSL_and_HSV#Disadvantages

Yeah, I wrote that. :-)

The mapping is not one-to-one though - for example when S is 0, all values of H give the same resulting colour, and worse when V is zero both H and S are useless. So an image exploring the full HSV space should look different, probably with a lot more of the grayscale.

I too have misgivings about HSV, the discontinuities created when generating hue ramps being particularly cruel. Using a rotation about the luma axis in YCbCr space gives much smoother rainbows but sadly not ones which hit all six primaries and secondaries. It's frustrating problem that perceptually H, S and V or L are what we think of when specifying a colour, but mapping them smoothly to RGB displays is so tough.

Eek, looks like this one is crumbling under our load too!

God dammit! We kill every site we stumble upon; maybe there should be a delay to show links/comments based on time-zones, that way we don't DDOS any site by mistake.

This solution proposed by jcs would work: https://lobste.rs/s/g0nxrf/we_have_the_ability_to_cache_and_.... (He’s not talking about HN, but it would work equally well for HN.)

The idea is to use the free CoralCDN (http://www.coralcdn.org/). HN could solve site-killing by prefetching every link with CoralCDN, so that the CDN would cache a version of the page. Then, if HN detects that a site (e.g. http://allrgb.com/) is down, it would link to the Coral version (e.g. http://allrgb.com.nyud.net/) until it’s up again. Or alternatively, instead of detecting when sites are down, it could show a control to replace any given link with the CoralCDN version and ask the user to toggle it if the link doesn’t work at first.

Very cool suggestion!

Would a really simple way to do this be to make a 4096x4096 square image, with 0,0,0 at the top left and 255,255,255 at the bottom right, then just go along from left to right incrementing by one (in base-256, essentially)?

Yeah, but it's not interesting or challenging to do that.

The start of the video shows a very similar approach.

Site is 508'ing. Here's a partial mirror.

http://archive.is/nZwxl

Embedded youtube video:

https://www.youtube.com/watch?v=OuvFsB4SLhA

I was able to get it to load, and pull it down. Here's a temporary mirror on my own webserver:

http://b.enjam.info/rgb

While the site's down, here's all the RGB colors in one book:

http://i.imgur.com/kae66HY.jpg

('RGB Colorspace Atlas' by Tauba Auerbach)

Server seems to be down but found the Google cached version: http://webcache.googleusercontent.com/search?q=cache:ghZGR0R...

Some of these images in their most basic form are strikingly beautiful. It reminds me of some algorithmic art Joshua Davis produces. ( http://www.joshuadavis.com )

The OP might consider a more art based context with a potential for high priced prints and gallery showings.

Reminds me of some of the art in demoscene productions too. Since each image containing all RGB colours is just a different permutation of the same pixels, it might make for an interesting effect to animate pixel-swapping to transform one into another.

Unfortunately at present there's no single monitor that can show all the pixels of a 4096x4096 image individually...

Server seems unavailable :(

There was a challenge a friend of mine and I had a while back: take an image, and represent the entire RGB colorspace within that image, without reusing any colors.

It was a REALLY fun challenge, and I encourage everybody to try it as well.

The way that I ended up winning (ha) was to represent the RGB colorspace as a 3D array, and then unravel that 3D array into a 1D skip-list.

The script read the pixel value at (n,n) of the image, "decide" where this would exist if RGB was unraveled into 1D, go that that spot, and then either set the color in the "new" image (if that color was unused) the value in the array, or read the "skip" destination: the place where the closest unused color was located.

I believe this was the site that inspired us: http://allrgb.com

Yep, I posted this link downstream a little bit ago. The processes different people use are interesting.

What's fun is that we are so tuned to color differences that a slight change in the algorithm — what color it "resorts to" if the desired one is used — might produce a small absolute difference (distance-wise on the table) but a massive perceptual difference, or create a much greater effect far down the line when greens were exhausted early or unused bright reds are speckling a neutral zone. Certainly an interesting exercise!

I’m wondering how much of the visible color space is represented here. 100%? 80% 50%?

35.9% - look up sRGB for more info.

(!00% of what a monitor can do, but 35.9% of what the human eye can see - especially greens are lacking.)

Have a look: http://www.skytopia.com/project/illusion/2illusion.html

I remember being in a computer vision class some years ago where the professor was explaining to us how RGB fails to capture a wide range of colors. I was annoyed that his presentation didn't show any examples of these other colors, and then I realized how I was an idiot.

If your school had invested in compatible projectors, he could have just installed the plugin:

http://www.negativland.com/archives/015squant/plugin.html

A professor can provide materials beyond that displayable on a computer screen.

Almost on.

Given that the RGB image is likely not tagged with colorspace information, the colors represented are a direct byproduct of the primaries of whatever display you view them on.

That is, if your display happened to have the original CIE RGB color primaries, the 3D volume of colors would cover a greater volume.

Of course, this too ignores the "stepping" between colors (bit depth) and also ignores the wider luminance gamut that a standard observer is capable of seeing.

So the slightly more accurate answer to the original question is "Depends on what the primaries are of your display. Typically this is roughly sRGB, but if you are on a wide gamut display or projector, it will be larger."

I'd guess closer to zero... as I understand it, the visible light spectrum is continuous rather than discrete.

https://en.wikipedia.org/wiki/Continuous_spectrum

There's a limit to the ability of the human eye to distinguish similar colors. That limit means that each "point" color in the image can be considered to span some range of the visible spectrum.

Very true - but I suppose that'd be answering a different question! What if you were writing software for a tetrachromatic organism?

Such an image is smaller than you might think. Uncompressed it's 50.33MB.

It's time to move to 48 bit images.

How well will it compress if every pixel in the image is used only once and is different?

Pretty well if it's a regular layout, depending on algorithm, since almost every successive pixel is different from the last by exactly one level in one channel.

Sounds like another fun bit of code golf if some of the more aggressive compression algorithms aren't already picking up on the bit level changes (I believe they do).

with PNG it's 59kb: https://upload.wikimedia.org/wikipedia/commons/c/c4/All_24-b...

You can use the program that generated the image as a "decompresser". Only 100kb but takes 4 days!

There's this iOS app that generates very similar images, but with some interactivity. https://itunes.apple.com/app/rgb-petri/id423126001?mt=8

I'm getting a 508 error...

But somewhat related, and I think was on HN at some point: http://corte.si/%2Fposts/code/hilbert/portrait/index.html

It's very interesting how our eyes and brain processes colors differently -- for example, I see a lot of green and blue, but less red (though this is probably due to having a mild case of Protanomaly I suppose).

You think the fact that you see less red is probably due to having a genetic defect that results in poor red–green hue discrimination?

the growth process is similar to something i hit upon a while ago, although i wasn't trying to present all possible colors:

https://vimeo.com/699396

implementing it was kind of my new language self challenge, so i ended up putting it in the appstore while learning objective-c:

http://itunes.apple.com/us/app/rgb-petri/id423126001?mt=8&ls...

Looks the OP used Diffusion Limited Aggregation (DLA)?

You might also like: http://www.reddit.com/r/glitch_art

Man, that video was really cool! I wish the author had released the source code for this though, I'd love to know how this was made.

The source code was posted here. http://code.google.com/p/joco-tools/source/browse/RGBGenerat...

Oh, awesome, thank you for posting the link! I missed it because I didn't look past the "TODO"... Whoops.

If we could make this as a square, could we not create transforms to perfectly replicate any filter e.g Instagram, as a map of colours?

I was worried my head might explode with a colour overload, but in the end I was fine. Pretty cool though

Reply on news.ycombinator.com