Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

colors

rgb

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

like image 911
eft Avatar asked Mar 16 '09 06:03

eft


People also ask

How do you average two colors?

The typical approach to averaging RGB colors is to add up all the red, green, and blue values, and divide each by the number of pixels to get the components of the final color.

How do I find the average image RGB value in Python?

Use the average() Function of NumPy to Find the Average Color of Images in Python. In mathematics, we can find the average of a vector by dividing the sum of all the elements in the vector by the total number of elements.


2 Answers

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

like image 92
arntjw Avatar answered Sep 20 '22 22:09

arntjw


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.

like image 39
Blorgbeard Avatar answered Sep 18 '22 22:09

Blorgbeard