Doc Steve
Web Coding Service

Fully Accessible Web Code, Custom Written by Hand
Specializing in html, xml, css, and U.S.§508

Ideas on Good Site Design

[ Web Color (Technical Notes) ] [ Design Pages Home ]

Working with Color

Page Index
[ Skip Index ]
[ The Nature of Color ] [ Color Schemes Based in the Nature of Color ] [ Color Schemes Based in Culture ] [ Developing a Color Scheme ] [ References ] [ Other Key Links ]

The Nature of Color

In nature, the rainbow is made of six pure colors, the three primary colors, red, yellow, and blue, and the three secondary colors, which are made of combining the two of the three primaries: red plus yellow is orange, red plus blue is violet, and yellow plus blue is green (N.B., in electronics -- television, computers -- the three "primary" colors are red, green, and blue, and they combine as red and green to form yellow, while blue and green form cyan: nevertheless, the human eye percieves them the same way, and Piet Mondrian's masterpieces just would not look the same with green substituted for yellow).


Artist's Palatte
Primary Colors
ff0000 ffff00 0000ff
Secondary Colors
ff9900 009900 9900ff


Electronic Palatte
Primary Colors
ff0000 00ff00 0000ff
Secondary Colors
ffff00 ff00ff 00ffff

Modern computers identify these colors by six place hexadecimal numbers, which are actually three two-place hexadecimal numbers, each one of the three specifying a saturation level (or intensity) for one of the three primary (electronic) colors, red, green, and blue. The two-place hexidicimal numbers range from 00 to FF (i.e., in decimal, 0 to 255); so, for example, the color ff0000 is pure red: red is fully saturated (ff), while green and blue are zero. Hexidecimal counts from 0 to F, with A equal to the number 10 in base 10, B equal to 11, and so forth to F, which is 15: 10 in hexadecimal is 16 in base 10, thus hexadecimal is base 16. Using the RGB system in two-place hexadecimal gives the possibility for specifying 16,777,216 different colors (256*256*256).

Many early personal computers (i.e., up through the end of the 1990s) were limited in how many colors they could display (both a software and hardware issue), and were effectively limited to 216 colors (the "standard" 6*6*6 color cube). A detailed discussion of the "standard," non-dithering colors continues at W3C Standard Colors, "Standard" Palette, and Name/Number Crosswalk (but this is a concept that should now be, but really is not completely, obsolete). This page continues with ideas about how to choose colors that work well together. First and foremeost, as it noted elsewhere (and repeated here), insure that the selection of colors does not limit accessibility to the information on the page:


[ TOP ]

Color Themes Based in the Nature of Color

Color themes are the stylistic foundation for the web site designer. The following examples of themes may serve as a guide to developing a characteristic "look and feel" for a web site. The color theme may be a way to classify data, identify links, or give emphasis.

Rainbow Theme

ff3333 ff9900 ffff33 009933 0033ff 9900ff


ff3333 ff9900 ffff33 009933 0033ff 9900ff

Not tremendously popular, but if colors alone were the only criteria, this might be a no-brainer; however, it generally appears confused because it lacks subtlety, or -- put another way -- lacks a way to present information with subtlety and then emphasize what is noteworthy. When used, the rainbow theme looks good with a white or a black background, and any one of the colors could also be used as the background.


Pastel Theme

ff99cc ffcc99 ffff99 99ff99 99ccff cc99ff

The pastel theme is basically the whitened version of the rainbow. Using crisp white as the background and then adding white to each color creates a washed out version of the rainbow. Pastels are easy on the eye, but suffer from the opposite problem of the rainbow: everything is subtle, and there is no good way to have something jump off the page without completely breaking the theme.


Day-Glo Theme

ff0000 ff6600 ffff00 00ff00 0000ff 9900cc

The day-glo theme is basically the brightened version of the rainbow: nearly identical, each color is in its most saturated version (the differences are the saturated green, the saturated red, yellow and blue without softening by shading, and the enhanced violet & orange). It suffers from all of the same problems with nothing else good to bring to the table. Using crisp white or one of the other colors as the background creates a very stark version of the rainbow. Many find this an unattractive rendering, and even on ski slopes -- where visibility against a white background is generally considered to be a good thing -- the theme is heard, "just say not to day-glo": snowboarders may find this an appealing pattern.


Monocromatic Themes
ff0000 ff3333 ff6666 ff9999 ffcccc
ff6600 ff9900 ff9933 ffcc66 ffcc99
ffff00 ffff33 ffff66 ffff99 ffffcc
009900 009933 339933 669966 99cc99
00ffff 33ffff 66ffff 99ffff ccffff
0000ff 0033ff 3366ff 6699ff 99ccff
ff00ff ff33ff ff66ff ff99ff ffccff
000000 333333 666666 999999 cccccc

Monochromatic themes are by far the most popular on the internet: they define the ambiance of the web site. Monochromatic means "one color." Many people believe that monochromatic means black and white, but that is only one option: the base color can be any color. A monochromatic scheme is made up of using shades of a color (adding black), tints (adding white), and/or tones (adding gray). White or a contrast color may also be incorporated (e.g., using red or pink with a blue theme). The related

uses the brown-hued theme below:

333333 993300 996633 ffe7ad ffffcc

which appears like this on the page (including white):


         


N.B., this theme uses a color outside of the 6*6*6 palette; the same pattern in the 6*6*6 palette would look something like this:

333333 993300 996633 ffcc99 ffffcc

[ TOP ]

Color Themes Based in Culture

Color themes may be based in commonly recognized aspects of culture. Page structure or highlights may be intended to call to mind a geographic area, a period of time, or some national or organizational setting. It is necessary to keep in mind that these associations may not be apparent to all viewers, so use with caution. A number of these themes are from the web site Skeins of Ideas Crochet, which does indeed deal with crochet.

Southwest Theme

996600 cc9900 009999 ffcc99 ff9966 cc6600

Inspired by the colors of the U.S. desert southwest, these are dirt and chamois with turqoise, sand, clay, and terra cotta on a white cloud background. With the exception of the signature turquoise, this is a typical warm, earth-toned scheme.


Harvest Theme

663300 996600 336633 ffffcc ffcc00 cc6600

Autumn brings to mind football and these colors: dark, medium and rusty browns, pale and golden yellows and the last vestiges of green. The background should be black, a dark brown or a dark green.


Victorian Theme
ccbb99
660066 003366 336600 cc9900 cc6600 990000

A Victorian theme is made of royal colors and gemstone jewel-tones. Royal purple, Sapphire blue, Emerald green, Gold, Copper, and the red of a red spinel (yes, the "Black Prince's Ruby" that currently adorns the Imperial State Crown in the British Crown Jewels is actually a 170-carat red spinel: see references below). These colors rest well on a light brown background. (N.B., That background is the only color on this theme that is not part of the 6*6*6 pallette: if that is a problem, try using cccc99 - - a bit green but not too bad.)




Country Theme

666699 336699 336666 cc9999 cc6666 993333

A country theme is the muted or dusty tones of pure colors with a gray background. Periwinkle, colonial blue, gray green, dusty rose, dark rose, old barn red.


[ TOP ]

Developing Color Schemes

  1. Ambiance: Earth tones? (browns); Thinking of Ireland? (greens); The Pennsylvania Railroad? ("Tuscan Red" and other dark colors); Generally blues? Generally reds? A rainbow of colors? (pastels or day-glo?)

  2. Background: After the general ambiance, how should it be layered? If the site is mostly text, light backgrounds are still the easiest on the eyes (remember, books and newspapers are still printed on white paper). Generally, a light, neutral shade of the ambiance is best, along with white. Black, or gray are also possibilities, but while yellow text on a dark red background may at first seem rakish or look like the side of a it will just be hard on the eyes after the novelty wears off.

  3. Main Color: Maybe the background, maybe a main border or header color, maybe the text: choose from the theme, and if text will be overlaying it make sure it has sufficient contrast for easy readability.

  4. Text: Generally related to the main color, make sure it has sufficient contrast with the background to be easilly readable.

  5. Accents and Contrasts: Use these for emphasis (beyond bold and italic), for headings, for setting off links, etc., generally a lighter or darker shade in the theme, as appropriate.


Balance

More words of wisdom from the above cited Skeins of Ideas Crochet:

Value and intensity are important to the over all balance in a color scheme. Lightness or darkness measures the VALUE of a color, while INTENSITY is the brightness or dullness of a color. Sometimes a plain pattern merely needs the color values adjusted to make it gorgeous. And a bright pattern may need to have its intensity toned down a bit in order to be more pleasing to the eye.

It is not necessary to match colors exactly, but you need to make sure that the colors you choose do not conflict with each other. A good rule of thumb is to think of your dominant color as a parent color. By using the exact same red when you add yellow to make orange or white to make pink, will result in colors that complement each other rather than conflict with each other.

If you are substituting colors in an established color pattern, make sure that you balance out the changes. Perhaps you are substituting bright white for antique rose in a floral motif. Make sure that you switch the order of the other colors in the scheme so that you do not have too much light or too much dark together. The difference can be phenomenal.

A person's favorite colors should be considered when starting any project, but a costly mistake that many people make is that of choosing all their favorite[s] . . . and trying to match them up in one piece. An obvious hint would be to make sure that your colors for the project are complementary to each other. Another hint would be to use only one dominant color and then add bits of other colors strategically placed for accents.


[ TOP ]

References

-- Skeins of Ideas Crochet
-- Gem by Gem

[ TOP ]

Other Key Links

-- W3C Standard Colors, "Standard" Palette, and Name/Number Crosswalk

Document: http://
Revised:
TOP ]
HOME ]

Made with Cascading Style Sheets  | Valid CSS!  | Valid XHTML 1.0!  | Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0  | Bobby WorldWide Approved AAA

Copyright © 2002 - 2004

Steve Sconfienza, Ph.D.

All Rights Reserved