Hello red, blue and green. Turns out that’s all you need. It’s everywhere, phone, watch, washing machine, heck even a toothbrush.

Pixels lie, they do all the time. You see them, but you don’t see them for what they truly are, unless you have a microscope or something. A simple pixel looks like this, 3 rectangles making a square.

It’s interesting how these are not always 3 stripes. Sometimes they make blue larger than others and use them at lower power so they don’t burn out quicker. Sometimes they reuse red and blue across pixels and so on. It just depends on the display technology, I digress.

Why RGB?

You’ve heard of the basic light composition. Black is absence of light and white light is made up of VIBGYOR. But why are only 3 out of 7 colors enough for our brains to interpret any color? It has to do with our eye’s spectral sensitivity. We have cones in our eyes that respond to Small, Medium and Long wavelengths, which roughly pick up blue, green and red light.

As you can see, there are overlaps. Sometimes 2 diff colors can excite cones the same amount. And that’s called metamerism. Now you can combine colors like red and green and that excites cones to think it’s yellow.

Averaging

Our eyes can only see detail to a certain size. Anything beyond the threshold gets averaged. Colors get averaged, ergo mixing.

Averaging can sometimes bring about detail too, like especially in shapes. Let’s assume we have a diagonal line. Lines are straight, but there’s nothing straight about joining pixels diagonally. So if we average the surrounding pixels, it looks better for our eyes. And that’s anti-aliasing.

Games use anti-aliasing quite a bit, and fonts use it too.

CSS lets you enable anti-aliasing for font rendering. Actually, it lets you do it for anything that has edges like SVGs, canvas shapes, CSS border radius and so on, but let’s focus on fonts for now.

.text {
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
  -webkit-font-smoothing: antialiased;
}

Averaging is truly profound. Averaging pixels smooths shapes, averaging colors makes new ones, averaging photos gives us video. Everything you see is a lie your eyes tell you, a beautiful one. Strange universe we live in. I digress.