Mixing colors - end up with wrong color

Hello,

I followed this guide https://medium.com/@kevinsimper/how-to-average-rgb-colors-together-6cd3ef1ff1e5 to learn how to mix colors.

I have a white color at first. First step I add another color, eg yellow by code below. Second step I add another color, eg blue, by code below. This should result in green but it doesnt, instead it becomes purple.

I get the same problem if I just use Color.lerp(oneColor, theColor, 0.5f);

What am I doing wrong?

Code (CSharp):

1.         colorOne = GetComponent<SpriteRenderer>().color;
2.  
3.         //Calculate average red
4.         colorOne.r = colorOne.r * colorOne.r;
5.         theColor.r = theColor.r * theColor.r;
6.         mixa.r = colorOne.r + theColor.r;
7.         mixa.r = mixa.r / 2;
8.         mixa.r = Mathf.Sqrt(mixa.r);
9.  
10.         //Calculate average blue
11.         colorOne.b = colorOne.b * colorOne.b;
12.         theColor.b = theColor.b * theColor.b;
13.         mixa.b = colorOne.b + theColor.b;
14.         mixa.b = mixa.b / 2;
15.         mixa.b = Mathf.Sqrt(mixa.b);
16.  
17.         //Calculate average green
18.         colorOne.g = colorOne.g * colorOne.g;
19.         theColor.g = theColor.g * theColor.g;
20.         mixa.g = colorOne.g + theColor.g;
21.         mixa.g = mixa.g / 2;
22.         mixa.g = Mathf.Sqrt(mixa.g);
23.  
24.         mixa.a = 0.8f;
25.  
26.         //theColor.r*colorOne.r;
27.         GetComponent<SpriteRenderer>().color = mixa;

 

I dont work with colors a lot, but i believe the one thing wrong here is your expectations. When talking about colors, there is a difference between additive and subtractive colors. The difference is that you either have things like a monitor that adds together certain colors to create new ones (emitting light), creating brighter colors the more you add, or you have things like paintings where having a red color means that the material absorbs all other wavelengths (subtracting light), creating darker colors when adding them together. That's why mixing all colors on a computer gives white, but on a painting it would be black.

You can use this to experiment around a bit:
https://www.w3schools.com/colors/colors_mixer.asp

So really, yellow plus blue should result in a grey'ish tone. If you picked a strong blue and a light yellow tho, then it may result in a light purple. Which may or may not have been the case for you.

 

let me refactor your code:

Code (CSharp):

1. public static Color GetAverageColor(Color a, Color b, float alpha)
2. {
3.     Color result = new Color();
4.     result.r = CalculateColorPartAverage(a.r, b.r);
5.     result.g = CalculateColorPartAverage(a.g, b.g);
6.     result.b = CalculateColorPartAverage(a.b, b.b);
7.     result.a = alpha;
8.  
9.     return result;
10. }
11. private static float CalculateColorPartAverage(float a, float b)
12. {
13.     return Mathf.Sqrt((a * a + b * b) / 2);
14. }

Now you can easily test if the math works by passing static colors:

Code (CSharp):

1. GetComponent<SpriteRenderer>().color = GetAverageColor(color.yellow, color.blue, alpha: 0.8f);