Thursday, January 29, 2009

Color basics in computer-based color

Let's start with the knowledge that white is composed of all colors combined and black is the absence of all color.

Computer-based color is a little different than other more natural forms of color.

First of all, we are talking about a form of light called additive color. This is similar to when you take three colored lights and shine them at a wall and can be seen in projection boxes with separate red-green-blue projection lights. Even TVs have these colors: when you step close to a TV (about 8-10 cm), you can see the tiny RGB dots that make up color TV. Additive colors are typically composed by using Red, Green, and Blue. These are called the color primitives.

Additive color works by adding light to the 'scene'. The Sun generates this kind of light as do light bulbs. We can also find this additive light in Black Lights, Christmas Lights, and so on. Since white is composed of all colors, adding together red, green, and blue additive colors produces white. Turning off these lights produces no color, better known as black.

Print color typically uses subtractive color. Most things in the world are subtractive in nature. These things remove color from the 'scene'. The reason that a basketball is orange is not because it glows orange. Rather, when white light or near-white-light bounces off of a basketball, the basketball removes all colors that are not close to orange (and possibly red and yellow). To obtain black, you need to remove all color being reflected. To obtain white, you need to reflect all color.

The color primitives of subtractive color are Red, Yellow, and Blue. All visible colors can be composed using some combination of these. Printers typically use Cyan, Magenta, Yellow, and Black to obtain a better black than can be made by mixing the other inks. Basically, inks and paints work by removing visible color. Remove all color and you have black. Remove none and you have white.

Secondly, our eyes have a strong bias toward green. [Wikipedia] This means that we can see a lot more shades of green than we can of red or blue. We find that computers often produce colors in equal amounts: the same amount of red as green for example. This means that computers do not completely produce color the way that we see it.

Lastly, computers are capable of producing colors which do not naturally occur, but our eyes are still quite capable of viewing. Some of these include the color fuschia/magenta and cyan. These colors are often used in bitmaps as areas that artists want to be 'see thru' and so the computer can ignore them. These colors are also amazingly annoying to use on displays and backgrounds because our eyes are not adapted to viewing them.

The way that computer color is represented when writing software is either by coloring an area with small integers (range of 0-255) or floats (range 0-1). For the rest of this blog I will use the integer representation. A 'triple' is used to contain the color value so that red is (255, 0, 0), green is (0, 255, 0), and blue is (0, 0, 255). When reading these numbers, keep in mind that you are effectively controlling the dimmer on lights: 0 is closest to off and 255 is fully on. As you control the red channel from 0 upwards, you end up with black, then brownish, then dark red, then red, then bright red.

Common combinations of color also include:
White (255, 255, 255) note how all channels (colors) are fully on.
Orange (255, 128, 0)
Purple (191, 0, 191)
Yellow (255, 255, 0)
Pink (255, 200, 200) see how close it is to white
Cyan (0, 255, 255)
Fuschia/Magenta (255, 0, 255)

Those are the super basics but it should give you a sense on how to control color on web sites, displays, and in computer programming.

Good luck

No comments: