Using the RGB Color System to Design a Website

When building a website for a client, odds are the client will want you to match, exactly, the colors they use in their logo and other branded material. The secret to all the colors you see on your computer monitor, and how you can achieve exactly the color you want, is a system called RGB color.

This system uses just three colors (red, green, and blue) combined together to create all the colors (including black and white) on your monitor. Although this sounds like quite a feat, consider that the system works in a way similar to natural daylight. When the sun is up, you see white light. When the sun goes away, it’s pitch black outside. Only if you use a prism to break up the spectrum can you see all the colors contained within white light. Like sunlight, RGB color is an additive color process. The CMYK printing process, with its judicious use of Cyan, Magenta, Yellow, and a Key color (black), is a subtractive color process.

Subtractive and additive colors

When you mix two or more colors together to create a new color in any medium — whether it’s in print or on a computer screen — the method you use is either an additive or a subtractive process. These terms refer to the way you produce the color white.

In printing, you achieve the color white by mixing no colors at all. By removing (subtracting) all colors, you leave the color of the plain paper — which is presumably white — shining through. Therefore the print process is a subtractive color process. The way to achieve white is by printing nothing at all — subtracting all colors from the page.

Combining cyan, magenta, yellow, and black inks in various proportions creates all the other colors. The color perceived on the page is the result of the different spectral colors that the inks absorb.

At the other end of the spectrum (pardon the pun) is the computer’s additive process. To create white on a computer screen, the display mixes all three colors — red, green, and blue — together at full strength. Just as if you switched on a light bulb, all colors of the spectrum come together to make white. And just as if you turned off a light switch, removing all the RGB colors leaves you with black.

Gazillions of colors

How do you mix all the colors of the rainbow using this additive system of just three colors? As with the CMYK process, the answer is to use different amounts of the three component colors. The RGB color scheme contains 256 levels (variations numbered from 0 to 255) of red, 256 levels of green, and 256 levels of blue.

To generate (or mix) a color, you take one level of red and mix it with one level of green and one level of blue. For example, to make a nice turquoise color, you can mix red number 75, green number 199, and blue number 211.


If each of the component red, green, and blue colors has 256 possible settings from zero to 255, how many colors can you mix with the RBG system? Those of you who are mathematically inclined know that the number of colors is 256 x 256 x 256, or 2563. This number amounts to a whopping 16,777,216 different color combinations — many more than you can see with your eyes!


blog comments powered by Disqus

Inside Sweepstakes

Win $500. Easy.