What is the best way to average two colors that define a linear gradient?

eft picture eft · Mar 16, 2009 · Viewed 24.8k times · Source

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.

visual comparison of color averaging techniques

Answer

arntjw picture arntjw · Apr 11, 2015

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