Please note: This content has not been updated since Spring 2004!

All color is relative.

Beyond subjectivity, a color can influence the interaction.
Colors can 1) stimulate activity, or 2) be perceived passively


Choose colors that reflect the message you are communicating.
Ask what the feeling/mood of the color is.
Is it on brand? Does it support your collective message / statement?
Warm colors (more vibrant, higher contrast, more saturated) indicate excitement
Cool colors add dignity (muted tones, ambient, less contrast)

Consider relationship to the content (comic, serious?)

Think about what is going to be on the page (images, text)
Will it complement the images, can you read text on it?
Does it fit with the subject matter? http://www.superficiel.org/

Consider user's perceptions of your intention.
Is the site credible, is it worth my time, money, commitment?

While a certain conservation palette of blues often signals financial stability (see any bank website as an example), eBay retains user commitment and trust with a playful color scheme.

Jennifer Sterling's website uses muted tones to great effect, and check out once upon a forest for subtle color shifts to alter the mood.

Love your colors! super/ficial
For vivid colors: Vivian lives for lifestyle content in context, claus.com and Plastelina games match saturated colors with younger themes, and the all-age, invigorating Lego Mindstorms (robots are cool)


Color Coding: Color should always have meaning. Colors already do have meaning to users, but the color must also represent something in the visual and information design.

Great simple coding at Eames Demetrios' site
On L.L. Bean, color coding might be helpful to distinguish the massive catalogue content like at Gymboree.

Be consistent with your color palette throughout the whole site.

Convention for specifying dynamic type in a browser:
text: High contrast (follows a book type metaphor)
link: Similar value to the text, noticable, not too like the text color and must be in contrast with the bg color
vlink: Lower contrast with the page, but in the same family as the link
alink: Same color as your background, or a brighter color (your choice)

Orange has a very limited palette for great effect, and as a result, they "own" the color orange. Compare with Cingular which has less punch.
According to the Pentagram website, the brand's colors are black (and any variation of) and fire-engine red.

Consider the user's energy level: Fatigue on the eye.
Consider user tolerance (if a serious or long process, use subtler tones).

Consider proximity to other colors.
Select colors with enough contrast for legibility.

Experiment
When you begin designing and you've chosen a direction,
Experiment with making a palette that will fit the sensory experience you are aiming for.
Try new combinations, push yourself and your design.
Spend time at Purusdesign to see the power of color values.


Color gains impact when used it is used selectively.
It loses impact when it is overused.


Background color
The screen background is the largest single area of color and it will look different than the sample swatch color/canvas background. Test your coded page to accurately gauge the effect. If brightness of background and text are similar, readability will be reduced. These are called harmonic combinations.

Don't contrast primary colors over large areas (too colorful, glaring, flickering).


In the non-natural world, in general: Dark colors recede easily / Light colors come forward

Consider gamma: PC | MAC
PCs display much darker (2.2 gamma)
MACs are lighter (1.8)
Consumer level computers are most often the darker PCs.


About Color

Additive Colors (made from light > computers, tv, lights in a theater)
Basis for screen use: uses red, green, and blue to make all the colors. These are the primary colors and to make any other color, different intensities of each color creates. The secondary color (makes all other colors besides RGB in the additive color system). RGB together in equal intensity make white.


Subtractive Colors (made from pigment > clay, paint)
Basis for printing: consists of the primary colors cyan, magenta, yellow, and these three together in equal intensity make black.

Color on screen is shown by variations of light, not pigment. The screen cannot show intensity and saturation as well as printed documents.

Complementary colors are 180 degrees opposite from each other on the color wheel.
Split complementaries are equi-distant from one end of a complementary and the other side of the complementary.
Triatic colors are 3 colors at equal angles.
Duotones contain black and one color. See Intershop for an example.

Primary colors: RGB (the purer a color, the more sparingly it should be used)
Secondary colors: different intensities of primary colors
Tertiary colors: result from mixing primary with secondary, or two secondaries


Biology
Light-sensing organs in your eye.
Rods in your eye see value (the 3 rods are RGB) - the degree of light to dark, white to black gray scale
Painters and illustrators (and graphic design, especially those doing logos or identities) often work first in black and white to see the positive and negative relationship, to see the integrity of the shape.

Cones in eye see hue ­ hue refers to frequency and wavelength of light.

The eye naturally recognizes certain colors and contrast; perception of other colors require intellectual shifts of attention.
See what you respond to with Luscher's color test.



©1998-2004 www.valcasey.com