University of Rhode Island - Web Design Guide: Color

Web Publishing Help

Web Design Guidelines: Color & Graphics

Web Safe Color Palette

Many, if not most, Web users have computers that can display only 256 colors at once. How good an image looks on the Web depends entirely on the capabilities of each user's hardware and software. Netscape Navigator and Microsoft Internet Explorer use only 216 colors that are common to Macintosh and Windows operating systems to display images. The 216 colors that are shared between the browser palettes won't dither from platform to platform. Therefore, you should use these colors for all the flat-color areas of your Web graphics.

Web Safe Color Palette (216 Colors)

You may download the non-dithering Web safe color palette for Mac or Windows from Linda Weinman's Web site. You then load it into the Photoshop Swatches palette to use in your work. Visiting Color On the Web for more information on this topic.

Resources

General Design Guidelines

Web Design Guideline Home Page

Use Web Safe Colors for Text and Backgrounds

Web browsers use HTML to display colored text, links, and background colors. There are two ways to specify color in HTML, either with hexadecimal values (e.g., FFFFFF) or with color names such as red, or green. Unfortunately, few of the named colors are browser-safe, so it's best to stick to browser-safe hexadecimal values when specifying HTML-based color.

Use this table to translate from RGB value to browser-safe hexadecimal values :

RGB	Percentages	Hex
255	100	FF
204	80	CC
153	60	99
102	40	66
51	20	33
0	0	00

Recommended Color Scheme for URI Web Sites:

help_webcolor.gif (2200 bytes)

Recommended Color specification for Page Links:

Background color:	BGCOLOR=<"#FFFFFF">
Hyperlink color:	LINK=<"#330099">
Visited link color:	VLINK=<"#000066">
Active link color:	ALINK=<"#330099">

Web Graphics

The two main graphics formats that Web browsers can read are GIF and JPEG. Each is suitable for different types of images, so it's important to know which one to choose.

GIF vs.JPEG

GIF is a graphic format using a compression designed by CompuServe. They have the extension '.GIF ' and are best used for illustration, line art and simple graphics that have little or no shading. They support up to 256 colors and use a lossless compression which allows for all detail to be maintained during the compression process.Most clip-art and text-based images on the Web are of the GIF format.

JPEG is a graphic format designed by Joint Photographic Experts Group (JPEG). They have the extension '.JPG' and are best used for photographic images. JPEG files can support up to 16 million colors as compared to GIF's 256 colors. It uses a lossy compression which means certain parts of images are permanently thrown away so that the files take up less storage space. Most photographic images on the Web are of the JPEG format.

Limiting Image Size.

Making smaller images. Consider using only icons or similar type graphics on your page. If you must use large graphics, use clickable thumbnails to link to the larger version.

Compress your images by choosing the right format for your graphics. A good rule of thumb is to use GIF for illustration and line art images and use JPEG for photographic images.

Reducing colors in your images. The fewer colors you include in your image, the less information the image needs to keep track of, as a result, the smaller the image size becomes. For example, anti-aliasing, a technique that uses intermediate colors to blend edges in images, will increase your image size by 30% or more.