Website Color Design Guidelines

Browser-Safe Colors

Use the browser-safe colors:

• Where practical, only use the 216 browser-safe colors that are defined in the browser-safe color look up table (CLUT).
• Clearly define these colors using some form of the RGB notation.
• If more colors are really needed, simulate them by combining multiple pixels of different browser-safe colors.

Rationale:

• Browser-safe colors:
  • Are directly supported by the major:
    • Graphic browsers (e.g., Internet Exployer, Netscape, and Mosaic).
    • Operating systems (e.g., Macintosh and Windows).
    • Hardware platforms (e.g., IBM, HP, Dell, Gateway, etc.).
  • Will therefore not change unexpectedly when porting from one browser, operating system, and platform to another.
  • Will not cause dithering (i.e., spotty colors that approximate the unsupported colors) on displays that are set to 256 colors.
• RGB notation is standard and likely to be supported across all graphic browsers, whereas English names (e.g., seashell instead of #FFF5EE) are more likely to be supported neither widely nor standardly.

People-Safe Colors

Use people-safe colors:

• Do not rely solely on colors to differentiate different kinds of text.
• Do not place visually-conflicting primary colors (e.g., red and green) next to each other.
• Avoid using different primary colors with the same saturation.

Rationale:

• Conflicting colors cause eye strain and are difficult to read because the lens of the eye cannot focus on them simultaneously because of their differing wavelengths.
• Such colors are difficult for color-blind persons to read because they lack the necessary contrast to make up for the missing hue information.
• Some people still use black and white monitors.

Brand Colors

Use the brand colors:

• Use text, image, and background colors that are compatible with the brand colors of the website owner.
• Do not use the brand colors of the major competitors of the website owner.

Rationale:

• This re-enforces the brand of the website owner.

Link Colors

Consistently use different colors to differentiate:

• Headers from text.
• Different kinds of links.
• Links from normal text.

Rationale:

• This makes context and navigation more understandable.

Text Colors

Limit the number of colors used for text.

Rationale:

• Colored text is often harder to read that black text on a white background.
• Colored text can confuse normal text with colored links.
• To much colored text can look garish and unprofessional.

Excessive Colors

Limit the overall number of colors used.

Rationale:

• Too many colors can be distracting if you are not building a website that sales paint.
• Just because there are 256 browser safe colors does not mean that you have to use all of them.