Website Color Design Guidelines
Guidelines:
Browser-Safe Colors
People-Safe Colors
Brand Colors
Link Colors
Text Colors
Excessive 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.
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.
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.
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.
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.
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.