Kentucky Department for Libraries and Archives

 Catalog| Visitor Information| Service Directory| Staff Directory

 Home  > Library Web Help > Using Colors on Your Library's Website

Library Web Design - Using Colors on Your Library's Website

When selecting a color, always consider the variety of patrons who will visit your site. Patrons who are color-blind, have a visual impairment, or are elderly will find it difficult to read text on bright or dark colored backgrounds. For maximum readability, text should be black on a white background. Although colored text is a good way to emphasize certain content, refrain from using it within text blocks because your patrons will assume that the colored text is a hypertext link and click on it. Short pieces of text, such as section headings, or in the right or left columns of other pages may use different colors, depending on your design. However, always use strong contrast in color so the text can be easily read, and avoid using colors close to the default web link colors (blue and violet) for text not containing hyperlinks.

Another consideration - how will the page look when printed? Some printers alter, lighten or darken colors, according the color spectrum the printer can handle. For pages containing extensive lists or reference material that a patron may wish to have a hard copy of, make sure that the page will still be readable once printed.

Color Coding

Most primary colors can be listed by their names, however it is best to use the HEX code (# + a six digit code) of the color you wish to use.

#FCFEE2
#FFDFBF
#EEEEEE

When trying to match colors in clip art created in image editing programs such as Adobe Photoshop or CorelDraw, you can use a converter to match the RGB values to the web based HEX codes. One such converter can be found at DevelopingWebsites.Net: http://www.developingwebs.net/html/hexgen.php.

 

How Colors Affect Mood

Black

Black is a color that is shrouded in confusion.

It can be strengthening, calming to extremely sensitive individuals, or it can be depressive or aggravate mental conditions if used too much.

Black, throughout history, has been a controversial color. It symbolizes everything from demons, witches, mourning and despair to authority, power and reliability.

Some wear black because it gives feelings of formality, sophistication, and power. However, priests wear black to signify submission to God. Others wear black to de-emphasize body shape.

Many times, black is combined with red in adult websites to promote sensuality.

Blue

Blue represents solitude, sadness, depression, wisdom, trust and loyalty. Blue relaxes the nervous system; it has a sobering effect on the mind and can cause people to be more contemplative.

Wearing blue to a job interview indicates dedication and loyalty. Blue surroundings, if not too dark, increase productivity. Studies show that people retain more when reading information written in blue text.

Blue is the least appetizing color of the spectrum, and it thought to be an appetite suppressant. During experiments, when participants were give food dyed blue, most were repulsed, associating the color with mold or rot.

Brown

Brown is the color of earth and wood. It is solid and reliable, and helps to create a neutral, comfortable and open atmosphere. However, certain shades of brown can look worn and wistful. It communicates credibility, solidity, strength and maturity. Studies show that text written in brown is easier to comprehend.

Gray

Gray is a neutral color midway between wite and black, usually conveying the absence of color. Gray usually means unhappiness, depression, a lack of emotion or just downright meanness. Gray is used on many websites to be politically correct and not to offend.

Green

Green comes with many symbiotic meanings, among which the strongest and the most universal is nature. It also signifies life, youth, renewal, hope and vigor. Brides in the middle ages wore green to symbolize fertility.

Yellow greens, associated with sickness and nausea, are the least preferred colors of consumers; dark to medium greens are preferred, representing wealth, immortality, and of course, money.

Green is the easiest color on the eye and can improve vision. It has a calming effect on the nervous system, making it a popular color for hospitals and waiting rooms -- thus, the popularity of "green rooms" in television studios.

Orange

Orange is associated with warmth, contentment, fruitfulness and wholesomeness. It represents strength and generosity.

Orange, throughout history has been associated with the sun, having a warming and invigorating effect. Whereas red is stimulating to the body and blood, orange is stimulating to the emotions. It should be avoided by extremely emotional types of people.

It is also the color most associated with appetite and bravery.

Pink

Pink is the most romantic and tender color.

Studies show that pink induces calmness and tranquility. One study in Washington showed that prison cells painted pink lessend aggression in inmates, even in those who were color-blind. However, once the prisoners' bodies adjusted to the pink surroundings, they regressed to an even more agitated state.

Pink is associated with being soft-hearted, feminine, and young.

Purple

Purple is the color of royalty. It stands for luxury, wealth, and sophistication. It is also the color of passion, romance and sensitivity.

Purple is a rare color in nature, and produes mixed feelings. While some feel it brings an artistic flair to items, others feel it gives artificiality.

Red

Studies show that red causes the heart beat and blood pressure to rise, stimulating the brain. In the western world, red is a symbol of love and passion. Also, red is commonly regarded to increase appetite.

Studies also show that people working in a red enfironment work faster, but they also make more mistakes. It increases restlessness and nervous tension.

Red is the color that is most easily recognized, and the most visible in daylight.

Red is regarded as a hot, warm color and it symbolizes aggression and high energy. It is also a sign of warning, danger and error.

White

White stands for purity, chastity and innocence. It represents cleanliness. Medical staff wear whit eto imply sterility. White reflects light and keeps the body cool, the ideal color choice for summer clothing. In general, white creates a cool and refreshing feeling.

Yellow

A pure bright yellow is the most eye-fatiguing color; light is reflected by this bright color, resulting in excessive stimulation of the eyes. Text written on yellow background, such as legal pads, tends to not be retained.

Yellow has also been shown to speed the metabolism. Experimental studies found that yellow surroundings induced babies and grown-ups to have more tantrums.

Yellow is a spiritual color that is a symbol of the deity in many religions, and has many shades: pure yellow is the most cheerful and sunny of the spectrum. A soft yellow indicates youth and enlightenment. A dingy yellow represents caution, decay, sickness, or jealousy. Choice of shade is very important when it comes to yellow.

 

Types of Colors

The primary colors (those that can't be produced by mixing) are red, yellow and blue.

 
 
 

The secondary colors (a mix of the primaries) are orange, green and purple.

 
 
 

Tertiary colors, a mix of primary and secondary colors, are yellow-orange, red-orange, yellow-green, blue-green, blue-purple, and red-purple.

 
 
 
 
 
 
 

 

Coordinating Colors

Complimentary Colors
Complimentary colors are those which are directly opposite to each other in the color wheel. These colors stand out well when paired together.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Split Complementary Colors

Split complementary colors are softer than straight complementary colors; they are more balanced and a little easier on the eye.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Triad Colors
Triad colors are three hues equidistant in the color wheel. When you want a colorful and balanced scheme, triad colors are best.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

Other Color Combinations

Monochromatic

Monochromatic schemes are those that are one color with variations or tints of that color. Although they can sometimes be dramatic for print publications, most monochromatic color schemes are considered dull and monotonous for web publications.

 
 
 
 
 
 
 
 
 
 
 

 

Monotone Achromatic

A monotone achromatic color scheme is a monochromatic color scheme based on a neutral color, such as black or brown. Usually these schemes are considered boring, however when one bright color is used as a highlight, the combination can be very effective.

 
 
 
 
 
 
 
 
 
 
 
 
 

Resources for Color Use

Color Schemer Online, Version 2: http://www.colorschemer.com/online.html
This handy online color generator allows you to enter colors, by their RGB value, HEX value, or by clicking on a color swatch, and find out 16 color which coordinate it. The generator also lets you lighten or darken the scheme.

ScriptFX Online - Gradient Filter: http://www.scriptfx.com/transitions/gradient/gradient_filter.htm
Provides an online tutorial on creating color gradient effect on web pages, tables, and cells. The page also provides links to examples and scripts.

WebMonkey Reference: Color Codes: http://hotwired.lycos.com/webmonkey/reference/color_codes/
Features an online directory of web-safe HEX color codes and color swatches.

Lynda.com - The Browser Safe Color Palette: http://www.lynda.com/hex.html
Provides a tutorial on understanding how to choose color which are applicable cross-browsers (web safe). Also touches upon the differences between print and web color choice.

Glasshaus - Web Graphics for Non-Designers: http://www.glasshaus.com/samplechapters/1159/default.asp
A sample chapter from the book Web Graphics for Non-Designers, this "Using Color" section explains how to use color on websites. Also provided is a glossary of color terms.

Information Updated:05/12/2005