Working
with color for Web Pages:
Basic Color Information
Color Formats
Both print and computer graphics work by mixing a few colors in different proportions to get all the colors you can see.
Printers use a method called CMYK (cyan, magenta, yellow and black). These are the 4 colors of ink that can produce all the colors needed for printing. This method is subtractive: when you mix, or add, multiple colors you'll eventually end up with black and when you subtract colors you'll eventually end up with white.
Computer screens (and also TV sets) use a method called RGB (red, green and blue). These, of course, are the colors that when mixed together produce all the colors needed for images on the screen. This method is additive: the greatest possible amount of each color produces white, the complete absence of all the colors produces black.
On the RGB scale there are 256 possible variations of each of the 3 colors, numbered from 0 to 255. Each color is fully described by giving its RGB number, which is always in that order: Red, Green, Blue. For instance, 255,255,255 is the RGB value for white (the greatest possible amount of all three colors). 0,0,0 is black; 0,0,255 is pure blue and so on.
HTML uses a hexadecimal (base-16) number system for color codes, the digits being 0 to 9 and A through F. An RGB number is given as a 6-digit code: the first two digits for Red, the next two for Green, the last two for Blue.In this system, 0,0,0 becomes 000000 (black), and 255,255,255 becomes FFFFFF (white). Pure blue would be -- you guessed it! -- 0000FF. Paintshop Pro 5 gives the color in both systems, but older graphics programs only give the RGB code and it could be a real hassle to work out what the HTML code was for a color used in a graphic which you wanted, for instance, to use also in a text header.
Graphics programs also refer to colors in terms of hue, saturation and luminance (or brightness). This is just another way of looking at the RGB value for a particular color in terms of the overall values of all 3 components (red, green and blue) together:
- Hue means the same as color: changing it will move the color through all the different color values.
- Saturation is the amount of color: increasing it will increase the color, and decreasing it will reduce the color until you get a shade of grey.
- Luminance, or brightness, is self-evident: the greater the luminance, the brighter the color.
Color Depth
Since 256 x 256 x 256 = 16.7 million (approximately) there are a total of 16.7 million different colors you can display on a computer screen. Not all screens, however, can display them all. VGA screens can only display 256; you need at least a SVGA screen to get the full range (also known as "true color" and "24-bit color").
A picture or graphic contains, obviously, a selection from the possible full range of colors. Whether this "full range" is 256 colors, 16.7 million colors or a figure in between depends on the color depth at which the picture has been prepared. This is also called the palette size. A graphic with a palette size, or color depth, of 256 colors cannot be displayed in 16 million different hues no matter how good your hardware is. Of course it also works the other way around: a picture with a color depth of 16 million colors will be displayed using only 256 if that's the maximum your graphics card is set to display (or capable of displaying).
The different color depths were originally set by the amount of memory used to store the color information by various graphics standards. The most common hardware standards are 8-bit (256 colors), 16-bit (64,000 colors), and 24-bit (16 million colors).
Number of bits |
Number of colors |
8 |
256 |
16 |
64,000 |
24 |
16.7 million |
Even if your hardware is capable of displaying the full range, Windows 95 resets the graphics card to a mere 256 colors. You can reset it with the following procedure:
- Right-click on the desktop to get the pull-down menu
- Choose Properties
- From the Display Properties window, choose Settings
- Change the setting for color mode. You can also change the screen resolution (see below).
However, most people don't know how to do this, so the sad fact is that most people are looking at the Web with 256 colors only, even though their hardware can support 16 million. This is one reason why the prevailing standard for Web graphics is to use a palette of only 256 colors.
Resolution
Resolution is the number of pixels your monitor can "resolve" or display. The higher the resolution is the better the picture quality. I'll also use the word resolution when talking about color. Again a higher color resolution will result in more colors being displayed.
A computer screen displays a rectangular array of dots (in computer jargon, "pixels") in a fixed set of numbers. The screen resolutions most common at the moment are 640x480, 800x600 and 1024x768. The more dots or pixels displayed, the better or higher the resolution. The resolution depends on the graphics card, not on the size of the screen: the same screen can display with a resolution of 640 x 480 or 1024 x 768 if it has a graphics card that supports those formats. At the higher resolution, therefore, each pixel will be smaller, since there are more of them for the same screen size. So the same graphic will be smaller at a higher resolution than at a lower one, on the same screen.
The best rule for Web graphics work is to design for a 640 x 480 screen, since that is what most people have (and again, Windows 95 resets the graphics card to that resolution when you install it, even if the card can support better resolutions). This is because a higher resolution screen will display the graphics smaller so there will be more white space on the screen, which is often attractive and at worst acceptable. If you design for a high resolution, a 640 x 480 screen will not fit the graphics into the width of the screen and the user will have to scroll sideways to see the full width of the page, which is unacceptable.
Image types
There are more formats for storing graphics files than there are graphics programs! Every program has its own special format, and in addition there are "standard" formats. The type of image is shown by the file extension. The important ones for Web work are:
- BMP files ("bit-mapped",
extension .bmp): the native format of Windows, in
which all the Windows icons, wallpapers etc. are
saved. Therefore also the native format of the
Paintbrush programs that come with Windows. Web
browsers cannot display BMP files so you
need to convert them to another format before you can
use them in a Web site.
- GIF files (extension
.gif): use a 256-color palette, which is included in
the file itself, i.e. every image in this format
contains in its file a complete description of every
color in its palette, whether or not that color is
actually used in the file. The file is stored in a
compressed format and re-generated without loss of
data (in graphics jargon, this is a "lossless"
format). It's suitable for most Web graphics work,
but is not suitable for photographs, half-tone images
and other pictures in which you need a fine gradation
of color rather than definite boundaries between
different colors.
- JPEG files: (extension
.jpeg or .jpg or even .jpe): can accommodate 16.7
million colors, and store the color information for
each pixel (screen dot) with that pixel. Potentially,
therefore, a jpeg file can be very large and slow to
download. The jpeg format therefore uses a much
higher degree of compression than GIF (and you can
choose how much); but some information is lost when
the file is re-generated for display (i.e. this is a
"lossy" format). Suitable for photographs
and other files where you do need fine color
gradations.
- PNG files: a new format developed specially for the Web: combines the best features of both GIF and JPEG files but is not so far in very wide use since earlier browsers cannot display it.
Indexed graphics
PaintShop Pro and many other graphics programs treat files with a limited 256-color palette, such as GIF files, by numbering each color (from 0 to 255, of course). A color's number is called its index, and a color can be referred to by its RGB value or its index number. The colors are numbered in the order they appear in the palette, and therefore the same color can have a different index number in 2 different pictures. Its RGB value, of course, will be the same in both. It's just a convenient shorthand to be able to refer to a color as "index no. 17" rather than "RGB 255,0,0" (which as you can probably work out is pure red).
Now you can go on to the second color tutorial or back to the contents page.
|
 |
 |
 |
 |
