RGB and Web Color by Bev Harcus
Visible light comprises a very small part of the electromagnetic spectrum. Within this small band lie all the colors we are capable of perceiving. Light can be broken down into three primary colors: red, green and blue. These colors cannot be created by mixing other colors of light. From the combinations of red, green and blue light come all other colors of visible light.
The red, green and blue colors of light are called additive color, because when they are added together, they form white light.
When sunlight falls on a colored object, some of the sun’s wavelengths are absorbed (or cancelled out), and others reflected, the result being that only those reflected colors are visible. On a yellow ball, for example, all the short (blue) wavelengths are absorbed and the long (red) and middle (green) wavelengths are reflected. This results in the color yellow.
Colors can also be painted on objects, or printed using printing inks. Paints and inks are based on subtractive colors, cyan, yellow and magenta, which are actually equal mixtures of any two of the primary colors of light. For instance, cyan consists of equal parts of blue and green. When light shines on a cyan object, the blue and green wavelengths are reflected. The red wavelengths are absorbed. Similarly, yellow consists of red and green light; magenta consists of red and blue light.
Cyan, yellow and magenta are called subtractive primaries (these colors cannot be created by other pigment colors) because when they are added together they subtract light, and form black (theoretically. In reality, pigments are not pure and so they actually produce a dark muddy brown).
Color monitors work by combining percentages of red, green and blue to create the appearance of millions of other colors. In the RGB system, the red, green and blue components of each pixel (picture element) are assigned a number between 0 and 255.
Bit depth is important in understanding web graphics. Bit depth refers to the number of colors an image can display, or the number of colors a computer monitor can display. Bit depth is calculated by figuring that 1-bit equals two colors (e.g. black or white, on or off). Multiply by 2 to arrive at each higher bit depth.
The number of colors in a particular bit depth is arrived at by the power of 2, for instance 32 bit color is 2 to the 32nd power, or 16 million colors. 8 bit is 2 to the 8th power (2x2x2x2x2x2x2x2).
Most web designers have monitors capable of displaying millions of color (24 bit), but the average computer user will likely have a monitor capable of viewing only 256 colors (8 bit).
Using color on the web becomes a little more complex than using color for normal artwork. HTML is the basic programming language for web graphics. Colors must be recognized as HTML code, and HTML code describes colors using base 16 mathematics (this goes way back to 1st generation programming, Assembly language, or machine language). Here is a breakdown of base 16 math compared to what we are more accustomed to as base 10 math:
Base 10: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Base 16: 0 1 2 3 4 5 6 7 8 9 A B C D E F
Base 16 math is also called Hexadecimal. All colors used in HTML programming are based on hexadecimal codes.
To further complicate matters, not all colors are safe for viewing on all computers, or across platforms or browsers. The web designer must also keep in mind that a large percentage of Internet users have systems that are not capable of viewing all 16 million colors. Most users are capable of viewing at least 256 colors. So why are there only 216 web-safe colors?
This has much to do with viewing colors across platforms. Each platform (PC, Mac, SGI, etc.) uses specific colors (about 40) for its own system colors. These vary across platforms, or in other words, each platform uses different colors for its system. This now leaves us with 256-40=216 colors that can be viewed similarly on any platform.
A web-safe palette has been constructed that delineates these 216 colors, and shows how the codes work. Basically, the web-safe colors are a combination of the following colors:
Any color mixture consisting of these components should be “safe” to use in web graphics.
THE WEB WHEEL
The Web Wheel shows all 216 web-safe colors, and has the RGB values and Hexadecimal codes printed on each color. This makes it fairly easy to locate a color, and use its hexadecimal code in your graphic.
You can also use the wheel to choose color schemes, or colors that work well together. Say, for instance, that you want to make a web site that consists of all “blue” colors. Turn the wheel (side A) so that the blue colors are visible, and then choose the desired hex codes to input into your layout. The following is a breakdown of how you can find color schemes using the Web Wheel.
Side B of the wheel gives you a hint as to what analogous colors are. These are combinations of 2 or more colors that lie side by side on the color wheel. Turn the top wheel so that the Analogous colors slot encloses three full colors. These colors can be used together in a design to a) give the effect of a gradient, or b) to blend nicely together. Analogous color schemes create a “soft”, calm feeling, as there are no jarring differences in color.
Triads comprise one of the most basic of color schemes. RGB and CMY are triad color schemes. Triad colors are a set of three colors that are equidistant on the color wheel. Any colors that are visible in the triad windows (whether they line up precisely or not) can be used as a basic color combination.
Outer RGB bands
Still on side B, locate the band of red, green and blue surrounding the outside of the wheel. These colors are displayed in increasing and decreasing quantities, showing how much of that particular color is used in the coded colors underlying it. For instance, the Green band shows full green over the green swatch (00FF00). The hex codes for green are defined as follows: 00=0 red; FF=255 green; 00=0 blue. Notice that there are two alphanumeric characters for each color. In between the green and red, we have a muted yellowish-green color (CCFF00, or 204 red, 255 green and 0 blue). This shows that there is almost as much red as green in this color, and it contains no blue. The color next to it is yellow, showing equal amounts of green and red.
You may notice that the colors on side B appear brighter than those on side A. Side B colors contain mixtures of only two colors each. Look at all the color codes on side B. You will notice that in the RGB values, at least one of the colors on each swatch contains 000, or no color. These colors are therefore a bit more pure than the colors on side A.
On side A of the wheel, a value scale is placed on the top wheel component. This can be used as a reference, to judge how bright or dark your chosen colors are. When creating web graphics, you want to be sure that there is enough of a value change between text and the background. This is very important, as text is extremely hard to read when its value is similar to the background color. You can place text on a background with similar colors (hues), but the text will not be easy to read unless the values differ greatly.
These areas show colors that lie opposite to each other on the color wheel.
Complementary (opposite) colors show the mathematical beauty and perfection of the color wheel. I described earlier how light is reflected off, or absorbed into, an object, thus defining that object’s color.
Colors always absorb the color opposite them on the color wheel. For instance, cyan is opposite, and thus a complement of, red. Cyan reflects blue and green light, and absorbs red light.
When two complementary colors are mixed in equal amounts, they produce mid-gray. An additive primary (red, green or blue) always opposes a subtractive primary (cyan, magenta, yellow).
Complementary contrast (two complementary colors used in a single image) is used frequently in graphic design, especially in advertising. These colors, when placed together, create an intensity that draws the viewer to them. For instance, blue and yellow (complements) are very dynamic together. Not only are they complements, but yellow is the lightest color in the color wheel, and blue is the darkest. Blue and yellow are used a great deal in advertising, because of their high visibility.