Wow, that's a tricky one. I haven't seen a lot of good data on rel="alternate" hreflang="x" yet, other than general suggestions that it's worth trying and seems to sometimes work. Technically, Google would say that the green/red/yellow versions aren't true duplicates, but practically, I think the canonical here is a good approach.

My gut feeling is that the canonical will overpower the hreflang - adding the alternate language versions to the color variants won't hurt you, but it probably won't do anything. If it were me, I think I'd go with your first approach - just add the hreflang tag to the canonical version and leave it off the variants. Monitor that - see how it impacts your international rankings, and go from there.

It's possible that the canonical timing was just a coincidence and something deeper is going on, but I look at it this way - if it's easy to fix, fix it, and then you'll know for sure. It can be really tough to separate technical indexation problems from penalties.

Sorry, I could've sworn they recommended not using relative paths somewhere, but now I can't find that reference. I'd just make doubly sure they're resolving correctly. Given that these pages disappeared completely from the index, it's hard to believe the canonical tag addition was just an accident. You always have to start with what you know, and you know this changed.

I haven't specifically tested the impact of relative URLs, but to the best of my knowledge, all canonical tags should be absolute URLs (including "http://"). I would've figured Google would just ignore the incomplete tags, at worst, but it's certainly possible they're attributing them incorrectly.

Since you know you made the change and that they pages have de-indexed, I'd definitely fix the issue, even if it's on a few test pages (not sure how difficult the implementation is).

One note - this is probably just a typo in your question, but it's href="", not src="" in the canonical tag. Google's reference page on the tag is actually pretty good:

http://googlewebmastercentral.blogspot.com/2009/02/specify-your-canonical.html