7.1: RGB: Red, Green and Blue
LCD screen magnified 60x. The white square (A) encloses one pixel. Each red, green and blue element (B) within the pixel is called a primary pixel.
The computer screen is made up of tiny square picture elements, or pixels. Screens usually have 72 pixels per inch, although large displays will sometimes have 96 pixels per inch. The typical computer screen is 1,024 pixels wide and 768 pixels tall, for a total of 786,432 pixels.
Be aware, though, that some users have screens with fewer pixels, as small as 640 by 480. Users also can set the resolution using the monitors function, and many people like the enlarged but tighter view of 640 by 480.
Each pixel is supported by memory on the computers video board. The amount of memory assigned to each pixel determines the number of colors a monitor can display:
This image was saved as a GIF with a limited number of colors. The browser is dithering the image to simulate more colors that are really present.
How to specify RGB colors
- Each color is represented by three numbers, one each for the red, green and blue channels.
- Each channel can display 255 shades of its color, plus white.
- Black = 0 0 0
- White = 255 255 255
- Using these colors in combination, you can create 16.7 million colors, but some monitors are limited in what they can display.
RGB color often is called 24-bit color: each red, green and blue channel equals 8 bits, and 3 x 8 = 24. If your display can handle only 8-bit (256 colors) or 16-bit (65,536 colors), then it will try to match the color you asked for as closely as it can by dithering. The image to the right is dithered; differerent colored pixels are arranged in a mosaic that the eye mixes into solid colors.
Although you can specify colors using RGB numbers, the standard way in CSS and HTML is to use hexidecimal codes. A hex code begins with a pound sign (#) followed by six numbers or letters. Counting in hex code goes like this:
So each place has 16 possible characters, 0-F. A six-place hex code can represent 16,777,216 colors. For web-safe colors, use multiples of three for your hex codes: 00, 33, 66, 99, CC, FF. This gives you 216 possible combinations.
On CSS pages, you can use three places for web-safe colors. So, #000 would be black, #000 would be white, #F00 would be pure red.
Early Macintosh and Windows computers used differing “system palettes” of 256 colors. The web-safe palette contains 216 colors that were the same on these early Mac and Windows systems. Web designers limited their colors to those 216 to ensure that their pages would display the same on either platform.
Today, with computers all coming with 24-bit True Color, a web designer has the freedom to use any of the 16.7 million colors available. But by limiting themselves to the web-save palette, they simplify the design process.
Browser-safe palettes are available in Adobe Illustrator and PhotoShop, as well as many other web-building applications, including the full version of BBEdit. The web-safe palette above is a color-wheel-like arrangement by Visibone.