¿Por qué el navegador agrega colores azulados y marrones a un color de fuente sólido?

Se llama representación de subpíxeles o suavizado de subpíxeles. Microsoft hace algo similar para la mayoría de las aplicaciones de Windows.

Su pantalla consta de colores que están uno al lado del otro. Si realiza un suavizado simple basado en una muestra, no obtendrá el mejor resultado posible. Pero al aprovechar el conocimiento de cómo se distribuyen los píxeles, puede obtener mejores resultados. Como está trabajando con menos de un píxel de datos.

Sin embargo, debes tener cuidado con esto. Diferentes monitores tienen diferentes arreglos para la emisión de color (de ahí el sintonizador mencionado por @PaoloGibellini). Por lo tanto, si está preparando capturas de pantalla de muy alta calidad, podría ser una buena idea desactivar la visualización de subpíxeles, o obtendrá un error 2 veces*. Del mismo modo, si toma capturas de pantalla para imprimir, es mejor desactivar esto o su texto se verá como un arcoíris manchado.

^{*Una vez por el monitor, que tiene un orden y otra por la foto que tiene otro orden}

Esto se denomina representación de subpíxeles . Los diferentes colores solo son visibles porque la imagen ha sido ampliada. Será más fácil dar un ejemplo de blanco sobre negro.

Imagina una línea blanca de un píxel de grosor. En la mayoría de las pantallas LCD de escritorio, los colores de los subpíxeles individuales están dispuestos horizontalmente. Siempre que los tres píxeles de color estén activados, veremos una línea blanca de un píxel de grosor; no importa en qué orden estén los colores. Esto es lo que muestran las dos primeras filas. El uso de la representación de subpíxeles aumenta tres veces la resolución horizontal de la pantalla, lo que es especialmente útil cuando se lee texto horizontal.

Pero cuando toma una captura de pantalla y la amplía, en lugar de ver los subpíxeles, ve los colores que se combinan para producir. Cuando nuestra línea de un píxel está alineada con los píxeles, solo verá una línea blanca de un píxel. Pero si no es así, verá una línea de dos píxeles de grosor formada por dos colores. Puede ver esto en persona si está lo suficientemente cerca de su pantalla para poder ver los espacios entre los píxeles; si está lo suficientemente cerca, es posible que sus ojos no resuelvan los píxeles divididos juntos, y verá que la línea es dos píxeles de ancho. Pero si la resolución de la pantalla es lo suficientemente alta, la representación de subpíxeles puede funcionar muy bien y solo se notará cuando amplíe las capturas de pantalla.