It's called subpixel rendering (there are different solutions on different platforms). Microsoft's one is called ClearType, just google for it, Wikipedia has a nice description.
Earlier, simple edge smoothing was used, antialising, that resulted in gray pixels added to the jagged lines to mask them, and although it technically created a more blurred outline, due to the way our brain works, we perceived the resulting forms more pleasing, more natural, easier to read.
Colored subpixels arrived when monitor technology moved from CRT screens to LCD where the RGB components making up a pixel are much more uniform. Very simply put, we treat our monitors as having thrice as many pixels horizontally than they actually do. When we render a character glyph, the body will be black, so no difference there. But if we calculate to need just a subpixel more to the left of a complete pixel, we will use that extra subpixel. Similarly, if we need to go just a subpixel to the right, we will use that.
But, using these individual subpixels rather than full pixels as with antialising, we will have color fringe inevitably because these subpixels are physically colored. Just look at your sample: all left edges have the same color fringe, yes, because that's the color of the last subpixel of the previous pixel. And right edges, similarly, have the color of the first subpixel of the next pixel.
What you can see in the screenshot is that the display sent to the monitor is pre-manipulated with the anticipation of the colored subpixels and displayed accordingly. Pixel colors are modified so that when they light up on the monitor screen, only those subpixels will be lit that are required by the calculations.
Monitors might be different and, more importantly, individual sensitivity to this effect is different from person to person. Apple, using only their own monitors and in line with their usual stance of "we tell you how to use it", only offers a way to switch this effect on or off in their user interface (although there is a way to select from a limited list of three different settings using the Terminal app and appropriate commands).
In Windows or Linux, where the hardware selection is much broader and people don't normally accept to be allowed only a single way, ClearType can be adjusted to your individual needs. Depending on the settings you selected, the actual color fringes will be very different.
This is just a compromise. In order to display text to be more legible, we sacrifice chrominance for luminance. Differences in intensity are more noticeable to the human brain than differences in color. So, even if it introduces color variations (which is absolutely not the intention but an inevitable consequence of the subpixels being colored), what we really see are the intensity differences. In simpler words, most of us will only perceive at that resolution and physical viewing distances that there is an extra subpixel, not that it has a different color.
And as to the final question of why gray in some places and colored in others, it's very probably a software issue. The browser you mentioned might have its own graphics rendering engine that simply works differently from what you normally have in the operating system. It's quite possible that it doesn't use the operating system's services to render text but renders everything by itself, pictures and texts as well, as a complete image and uses its own settings and techniques in the process.
