Introduction to Web Color

Color is always an important consideration for designers. With color added to a page, be it printed or electronic, come issues to be dealt with. Web color is no different. There are some important points to be reviewed by anyone beginning to design web pages. The following information should be informative and helpful to you as you begin to work with your page graphics, text, and tables.

There will be a "Review Questions" sheet that will accompany this lesson. Use the sheet as a study guide, but don't just answer the questions. Read the entire material contained here. Many students just try to answer the questions "out of context". That means they skim through the material to find only the answers to the questions. This is a poor way to approach this type of learning. Remember, you are the person responsible for learning this material. This can only be presented to you. You must be the one who takes advantage of it.

Web Color

There are basically two ways to deal with color when designing web pages and web graphics. The first way is to utilize "hexadecimal" colors. "Hexadecimal colors" are colors that are specified for use when coding page backgrounds, table backgrounds, text colors, etc. for a web page. This is a color code that is interpreted by the web browser software. It is simply the fastest way to place color into a web page and can be used for all the items specified above. The hexadecimal codes are entered into the HTML code for the page.

You may ask why this would be the "fastest" way to introduce color into a web page. Normally, designers who have begun designing using typical page layout programs, begin a page design by creating graphical images. If, for instance, the designer wanted a color rectangle across the top of a page, the rectangle would be drawn using a rectangle tool and filled with color from a color palette in the program. If the graphic were to then be placed on a web page, it would be necessary to save the graphic as a JPEG or GIF file, placed into the HTML page, and when the graphic were viewed over the Internet, would have to be downloaded to the user before it will display on the screen.

The proper way to place these types of graphics (like rectangles) is to create a table and indicate a background color through the use of a hexadecimal code. Therefore, the graphic is created on the users computer as it interprets the code. This dramatically reduces the time it would take to display the rectangle.

"Hexadecimal color codes" consist of a six digit number. The color is entered into the HTML code when the HTML is composed. For example: BGCOLOR = #006666. This tells the browser that the background of the table or page should be displayed a specific color. These codes can be found on the Internet at web development sites. One such area on the "Webmonkey" site is http://lynda.com/hex.html. Designers should download the graphics that usually accompany the information. Your instructor will be providing you with a color chart to use for developing your graphics.

The second way to use color for developing web graphics is the use of the "RGB palette". The use of RGB color is the basis of displaying graphics or pictures on television and color computer monitors. It works by using   Red, Blue and Green in different combinations to create other colors. When designing graphics in an image editor, the designer should use the RGB palette. In order to match RGB colors to hexadecimal color equivalents, a code is entered for each RGB component. In other words, if you want to match the color specified above (#006666) with an RGB color, you would have to specify R as "000", G as "102", and B as "102" in your color mixer or through the use of your color "sliders" in your image editor. This would create an RGB color that would perfectly match the hexadecimal color #006666. This is a very critical aspect of web designing with color. With this knowledge, the designer will be able to create pages that look good and match colors while also downloading quickly.

Color Palettes

Print designers deal with CMYK images, and spot color images, like Pantone colors. These palettes are great for designing images to be printed on paper, but can be a horror to work with in web design. Web color should be designed around the use of a specific "web-safe" palette of colors. This special palette is sometimes called the "Netscape" palette after the web browser software.

The term "web palette" can, however, be misleading. That is because there are designers who work on the Windows® platform, and also those who work on an Apple® (Macintosh®) platform. There is a distinct difference in the 256 color web palettes for each system. This may cause some problems for designers who use the 256 color palette, since users may not see the color exactly as the designer intended. The best bet is for users of either platform to use the "Netscape" 216 color web palette. This should eliminate any potential compatibility problems.

The use of the Web for commercial purposes has led to dilemma for designers. It is essentially the "who came first, the chicken or the egg?" syndrome. In other words, does a designer design for web use first or for print use? This is a question that must be answered emphatically in favor of designing with the web palette for new designs. In other words, if a client is developing a new business, one of the first considerations is how important the Web will be to the evolution of their business. If the business will be dealing primarily on the Web, then the designer should try to work up a corporate identity based on the web palette. It will be much easier to match a CMYK color for print to the colors off the web palette. The use of CMYK or Pantone colors for a web-based business is foolish, since the color will never be matched to the print color, and there will be display problems in the electronic colors.

Color Depth

The last issue to discuss in the use of electronic color, is that of "color depth". Any color graphic developed on the computer uses a color palette. These palettes are based on the ability to display variations in hue, chrominance, value, etc. The more extensive the palette, the more digital information is required to display the colors. Color depth is measured in "bits".

In order to understand color depth, it is necessary to review how computer graphics are created. A computer image consists of "pixels". Pixels are square or rectangular picture elements that are contained in the images. There are many pixels contained in an image. In order for the image to be displayed properly, each pixel carries information. That information is specified in "bits". The more "bits' specified for the pixel, the greater the color depth. A "1-bit" image would consist of just black and white. The 1-bit of information tells the computer that each pixel is either black or white. These images would be small in size, since there is little information to display. The typical computer user sets their display settings in Windows to display 16-36 bit color. This means that the display will be able to process up to 36 bits of color information for each pixel displayed on the screen. It doesn't take a math genius to figure out that that much information would result in a much larger file if 36 bit color were used.

Why is this information important to you as a designer? It's simple. If you are designing for the web, you must try to keep your graphic images small. GIF images use primarily 1-bit or 8-bit color. This allows for the creation of a smaller graphic file for  display or downloading on the web. JPEG compression works primarily by reducing the "color depth" of an image. This results in the compressed and smaller file.

That kind of wraps it up for what you'll be expected to learn about web color. This is quite technical and sometimes a "bit" confusing. (Pun intended!) But, I am confident that as you begin to create your images and put together your web pages, the importance of this information will become more apparent.

Return to Web Design Home Page / Return to Academy Home Page / Top of Page