RGB Color Comparison: Find Closest Matching Color

[DavidSnider]

Say you had a color picked out and a list of different colors that you wanted to find the closest matching color from.

Is anyone aware of some formula to do this for computer RGB colors?

 

[russ_watters]

Computer RGB colors are typically values from 0-255 for each of the three colors, so you could just read-off the values and find the color that matches them the closest. I suppose you could just take the average of the three numbers.

 

[nbo10]

The RGB color will also depend on which color space that is used.

 

[rcgldr]

Computer RGB colors are typically values from 0-255 for each of the three colors, so you could just read-off the values and find the color that matches them the closest. I suppose you could just take the average of the three numbers.

That would be 24 bit color. Many PC based video cards support 30 bit color (0 to 1023 for each of the 3 colors), but most digital monitors do not support this, just CRT's and some high end digital projection systems.

 

[m.e.t.a.]

One way is to imagine that you plot all the colours (RGB) in Cartesian coordinates: red (0-255) on the x-axis; green (0-255) on the y-axis; blue (0-255) on the z-axis. This forms a kind of "colour cube".

You can then plot your discrete set of Listed colours inside this "colour cube". For some arbitrary colour for which you want to find the closest Listed match, you would plot the arbitrary colour inside the cube. Whichever Listed colour the arbitrary colour lies closest to within the cube is the closest match. (Or, at any rate, one interpretation of the closest match.)

This is just my idle guess. There may well be a better/more universally accepted method of defining the "closest match" between colours that I am unaware of.

 

[DavidSnider]

The reason I am asking is because I'm trying to come up with a program to do those "photo collages" where a larger photo is composed of smaller photos that resemble sections of the picture.

An average of the three numbers probably wouldn't work too well visually. 255,0,0 and 0,0,255 would register as equivalent. You'd probably be able to make out the image, but it would be almost like looking at a greyscale image with each "chunk" of the image having a random color.

m.e.t.a's idea sounds interesting. I'll have to test that to see how it looks.

 

[DrGreg]

One way is to imagine that you plot all the colours (RGB) in Cartesian coordinates: red (0-255) on the x-axis; green (0-255) on the y-axis; blue (0-255) on the z-axis. This forms a kind of "colour cube".

You can then plot your discrete set of Listed colours inside this "colour cube". For some arbitrary colour for which you want to find the closest Listed match, you would plot the arbitrary colour inside the cube. Whichever Listed colour the arbitrary colour lies closest to within the cube is the closest match. (Or, at any rate, one interpretation of the closest match.)

That would work as a first approximation, but it doesn't take account of the fact that the human eye is much more sensitive to G and much less sensitive to B. So a better method would involve weighing the RGB values to account for their perceived brightness. For example, you could multiply the G values by 0.59, the R values by 0.30 and the B values by 0.11 to get your xyz coordinates.

The best results of all would probably involve transforming to another colour space such as YIQ space or some more modern alternatives, but that might be an overkill for what you want.

 

[DavidSnider]

That would work as a first approximation, but it doesn't take account of the fact that the human eye is much more sensitive to G and much less sensitive to B. So a better method would involve weighing the RGB values to account for their perceived brightness. For example, you could multiply the G values by 0.59, the R values by 0.30 and the B values by 0.11 to get your xyz coordinates.

The best results of all would probably involve transforming to another colour space such as YIQ space or some more modern alternatives, but that might be an overkill for what you want.

Good info! Thanks.

Could you elaborate on why certain color spaces work better than others?
[Edit: Nevermind, it's in the wikipedia article.]

 

[K^2]

The problem of RGB values to represent a real color is incredibly complex.

First, you have the actual spectrum P(f). Then you have the eye's response functions S(f), M(f), L(f). And finally, you have the spectra for RGB components, R(f), G(f), B(f). Your goal is to find such a set of positive numbers r,g,b that the following holds.

$$\int_{0}^{\infty} S(f)P(f) df = \int_{0}^{\infty} S(f)(rR(f)+gG(f)+bB(f)) df$$
$$\int_{0}^{\infty} M(f)P(f) df = \int_{0}^{\infty} M(f)(rR(f)+gG(f)+bB(f)) df$$
$$\int_{0}^{\infty} L(f)P(f) df = \int_{0}^{\infty} L(f)(rR(f)+gG(f)+bB(f)) df$$

Naturally, there is no general solution, but you can usually find a decent approximation. Of course, for that, you'd ideally need to know S(f), M(f), L(f), which, being physiological, aren't even the same for everyone, but there are some descent approximations out there.

You can probably start with this article and work up from there.

I had to dig through a lot of that stuff when I was writing some code to simulate the stars in the sky realistically, or at least believably, based on spectral types. Converting from temperature, to spectrum, to RGB was a major pain.

 

[DavidSnider]

I did a quick proof of concept of M.E.T.A's suggestion, and it works pretty well:
http://jsbin.com/ozome3/2

 

[K^2]

Oh, wait, you are comparing an RGB color to an RGB color? That's a lot easier.

You shouldn't even need to do this in 3-dimensions. Your brain will process chroma and luma separately, so you can match them separately. Try converting your RGB colors to the YCrCb space, and construct the CrCb square like you constructed RGB cube.

I think that would make it easier to pick colors, and you can separately emphasize the luma match and chroma match depending on application.