What is the best way to average two colors that de

Question

If I have two colors defined by their RGB values, can I average the Red, Green and Blue values and then combine to define a third color that looks like a visual average of the two?

ie NewColor = (R1+R2)/2,(G1+G2)/2,(B1+B2)/2

EDIT1: Thanks for all the responses. For my current needs, I am only dealing with color pairs that are shades of the same color so I think that averaging them will work. However, I will try converting to Lab Space to make sure that assumption is true and the technique will be useful in the future.

EDIT2: Here are my results FWIW. Color1 and Color2 are my two colors and the two middle columns are the results of averaging in Lab space and averaging RGB respectively. In this case there is not a lot of difference between the two color and so the differences in the output from the averaging techniques is subtle.

Answer 1

I don't know whether taking a simple average of the components is the "best" from a perceptual point of view (that sounds like a question for a psychologist), but here are a couple of examples using simple component averaging.

The red-mustard-green one is ugly but the interpolation seems reasonable enough.

Answer 2

I think, the answer from arntjw goes in the right direction, and recognizes the logarithmic underlay, as mentioned by Dan W. However, the proper geometric mean is not sqrt((C1^2+C2^2)/2), but sqrt(C1*C2). So the average color would be:

NewColor = sqrt(R1*R2),sqrt(G1*G2),sqrt(B1*B2)

The resulting colors are closer to what we expect. You can generalize to more colors using higher order roots, and weight each color by adding an exponent to its components.

Answer 3

Several answers suggest converting to Lab color space - which is probably a good approach for more complex color manipulation.

But if you simply need a quick way to take the average of two colors, this can be done in the RGB space. You just have to mind a caveat: You must square the RGB values before averaging them, and then take the root of the result. (If you simply take the average, the result will tend to be too dark.)

Like this:

NewColor = sqrt((R1^2+R2^2)/2),sqrt((G1^2+G2^2)/2),sqrt((B1^2+B2^2)/2)

Here's a great vid which explains why this method is efficient: https://www.youtube.com/watch?v=LKnqECcg6Gw

Answer 4

Averaging in HSL color space might produce better results.

Answer 5

Take a look at the answers to this question.

Basically, you want to convert the colors into something called Lab space, and find their average in that space.

Lab space is a way of representing colours where points that are close to each other are those that look similar to each other to humans.

Answer 6

There's actually a much simpler way.

• Scale the image down to 1px by 1px.

  Color of the 1px is the average color of whatever you scaled