hue

Well, I tried the simple math to create a middle child color by averaging the hue value of the two parents. But no such luck, I'm wondering if this needs javascript again.

The two backgrounds are moving slowly through the hue spectrum and different different period lengths. Occasionally they are they same hue.

The middle square is supposed to be the middle child all the time, but it's not. The left and right squares are supposed to be children closest to the background parent on each respective side.

The inspiration for this is: http://samesameordifferent.com (if you check this out keep trying "new" (then smoosh) until you've seen both same and different)

And the image attached done in illustrator gives an example of what it would look like if I had done the math correctly. I thought averaging the hues would get the middle child, but I can't sort out why it doesn't (all the time).

Any ideas?