Subpixels tutorial out of nowhere!


This image might look like an ordinary white box on a black background, but let’s enlarge it 3x!

Notice that it’s actually made of many colors – cyan and red on the left, and blue and yellow on the right. It appears as white at 1x, though, because of subpixels.
Each pixel on the screen is made of an even smaller red, green, and blue pixel (in that order) – and mixing those three colors together produces the color white. If you look really really close at your screen, you’ll see that each pixel is actually made of red, green, and blue thirds.
So, the usual pattern for pixels is RGB. But does it have to be? Take two pixels. If the one on the left only had green and blue at 100%, and the one on the right had red at 100%, that’d still be green, blue, and red at 100%, generating the color white. That’s what’s happening on the left side of the image above. And on the right, the converse, blue, red, and green, is happening. On the tops and bottoms, well, any combination of that is happening, because it’s continuous. Red, green, blue, red, green, blue, red, green, blue…
One way that text is smoothed on the screen is using this method. Microsoft ClearType, as an example, uses subpixel rendering – it uses thirds of pixels to make text even sharper than pixels seem to allow. It works as a very nice illusion unless it is enlarged or magnified, wherein it appears as a jumble of seemingly random colors, like in the enlarged image above.
Okay I’m done.

3 comments

Leave a comment

Your email address will not be published. Required fields are marked *