Creating Consistently Colorful User Experiences: Part 1, Theory

April 23rd, 2009

Written by

Andrew Maier

Cofounder, Advisor

Published on

April 23rd, 2009

How does the color in this photo make you feel? Are these fireworks happy?

Photo by expressmonorail.

Color is one of the most important parts of your website. However, far too often color enters the equation as an afterthought, or worse, not all all. This isn’t adequate. Color helps define how users perceive information. To add to the complexity of this issue, most of the judgements people make about your site’s color schemes are subconscious. They may not provide any feedback about your site’s color, but they’re always thinking about it.

Perhaps you can remember a site based upon color. If I ask you to name a website that uses the color purple well, what comes to mind? Perhaps Yahoo!. Their brand is defined by a number of things: one of these is the color purple. You might ask: what does color theory have to say about purple?

In this series of articles, we will give a (more or less) comprehensive view of colors and their treatments in web design. In this first article, we explain color basics: How does color work? How does an artist use color? How does color affect our mood? In our second article, we’ll cover how the web renders color, the ways you can code color into your stylesheets, and what’s new with color in CSS3. In our third and final article, we’ll cover how you can pick and implement colors in your layout, and what “gotchas” exist in the world of color.

First, let’s briefly cover physical color theory. Next, we’ll discuss psychological color theory: what emotions do our site’s colors convey, color moods, and how can we use that to our advantage in creating our experiences. Lastly, we’ll discuss how theory starts to become practice as we use colors on the web.

Physical Color Theory

Reflective Color

Color exists all around us. Physical objects, when struck by light (the visible kind, see electromagnetic radiation), will reflect back certain wavelengths of light to your eyes. For example, if pure white light hits an apple, all colors (wavelengths of light) are absorbed except for red (700–630 nm). Red is the only color reflected back towards you, and therefore, it is the color you attribute to the apple. Funny that—because it’s the only color the apple doesn’t absorb. However, color in this regard depends on one important idea: wavelengths of light are subtracted as they are reflected off of an object.

Additive Color

Monitors display color in a much different way. Because they generate their own light, they must generate their own color as well. Generally, the three “primaries” used to create colors are red, green, and blue. Because computer monitors have a very high density of pixels, they do not use “additive” color per say. If a computer monitor displays cyan, it actually lights up both blue and green pixels in a given area. In this regard, a computer display uses a form of dithering to display colors.

Color Theory as it pertains to Design

The standard color wheel

Contrasting/Complimentary Colors

Try this experiment: stare at a color for about a minute and then close your eyes. What color do you see? Most likely, you’ll see what’s called the “contrasting” color. This color is generally the “opposite” color on this nifty thing called a “color wheel.” How does all this hogwash apply to reality?

If a doctor stares at blood all day (dark red) and closes his eyes, he’ll see the “opposite” of that color. In this case, that would be a light green. For this reason, the common color of hospital scrubs is a light green. While it may not be rocket science, this kind of “complementary” color system actually calms our visual system. If the people engineering the color at a hospital can derive benefit from color theory, then web designers certainly can!

The use of complementary colors is an important aspect of aesthetically pleasing art and graphic design. This also extends to other fields such as contrasting colors in logos and retail display. When placed next to each other, complements make each other appear brighter.

Because art/zen/life is all about balance, it’s important that your website has a good color foundation. Never over stimulate your audience —unless of course, that is your bag, baby.

Analogous Colors

My simple color “Triad,” with a fourth color.

Analogous colors are the safest bet when choosing colors for your designs. The easiest way to do this is to start with a primary color: in this case, I’ll go with green—hue 120; The next color I’ll pick is going to be related to that color. I begin by choosing colors related to hue 120, mathematically. I pick hues 60, 45, and 33. You’ll notice that the amount that I’m moving the hue decreases each time—that’s intentional, and yet completely arbitrary. Typically, designers will choose colors like this in groups of three; this practice is known as selecting triads.

Rectangular Color Schemes

Rectangular color schemes are not only the most complex, but the hardest to work with. Picking the colors for these is fairly straightforward, one simply draws a rectangle over the color wheel; each of the corners anchored to a particular hue. Pay attention to variation, however. It’s easy to have your scheme look like a rainbow if you aren’t careful. Make an effort to favor one color over the others, and keep your palate as concise as possible. I find it easier to work with multiple colors if they are relatively unsaturated.

Psychological Color Theory

Color is an important tool that you can use for non-verbal communication. Let’s go over what people naturally think of when they see different colors.

Emotions and Feelings Associated with Colors

Each color has a lightness and emotion associated with it.

Warm Colors

Warm colors “pull forward” more than cool colors. In this way, a dark version of a warm color will appear to be the same brightness as a mathematically lighter version of a cool color.

Red: Energy, Power, Passion, Love
Orange: Happiness, Enthusiasm, Attraction, Success
Yellow: Cheerfulness, Stimulation, Attention-seeking,

Cool Colors

Cool colors “push backward” or recede more than warm colors. In this way, a light version of a cool color will appear to be the same brightness as a mathematically darker version of a warm color.

Green: Refreshing, fresh, prestige, cooling, calming,
Blue: reliable, trustworthy, dependable, restful
Purple: spirituality, ceremony, mystery, transformation, royalty

Color Neutrals

Color neutrals have a less emotional impact and are therefore considered for more objective presentation. However, used well, color neutrals can have their implications. “Pure” black and “pure” white are our ideal “bright” and “dark” colors on the spectrum, respectively.

Black: Sexy, mystery, submission, danger
White: Purity, innocent, refreshing, neutral, sterility

Color Tints, Shades, Tones

Keep in mind that colors are more than just a hue. The saturation and lightness of light also affect our perceptions. While traditional color theory tends to shy away from the saturation and lightness of colors, artists are traditionally called upon to understand their subtleties.

Almost assuredly, you’ve seen the use of selective chromacity: an artist will take a photo and remove color from everything except the area of focus. The difference here affects how we perceive the subject matter. The artist can bring life into an otherwise lifeless area of a photo.

Explore the most popular works of art on sites such as Deviant Art. Do they have anything in common? Make sure to explore the complementary colors as well as the saturation thereof. What mood do you wish to convey? IF you wish to draw attention to a particular element, have you considered selective chromacity?

How does this photograph make you feel?

Photo by midnight digital

After applying color in my designs, I have found it difficult to add black and white treatments to various areas; in accordance with the idea of selective chromacity, they now grab too much of my attention!

Once you’ve gotten an idea of how color and tone affects your website, use it to your advantage. Just as bright, colorful and happy language (as found on Flickr.com, for example) can make a website more personable, so can bright happy colors. An otherwise boring subject can be brought to life, so to speak, by a more “lively” color scheme. Remember, it’s all about feelings with color. There is no black and white science (pun intended) to perception.

Conclusion: Picking Colors that Fit the Experience

That’s about it for theory. If you’re interested in adding and enhancing your use of color in your layouts, a concrete knowledge of the theory behind colors and color schemes is essential. It’s just one part, though. As experience designers, we are responsible for many different elements. It’s important to note that we are not to become masters of any particular area, but that we must have a working knowledge of all of them.

Obviously, I can’t give the full details of each of the concepts I touched upon above, or this article would be about 8 times as long. Take the time to look these concepts up in the related links, or peruse one of the related books. If that’s not enough, give yourself some inspiration: pay attention your favorite sites and artists. How have they used color? Don’t pay attention to form or copy or effects: just pay attention to color. If you can concentrate on each part of the experience indiviually, you’ll be well on your way to orchestrating the moment. Did something stand out? Share your thoughts in the comments!

In our next installment

Theory is one thing, but what about practice?

The purpose of this article was to set the foundation. Now that we’re all on the same page, I’m going to take this concept one step further. In my next article, I’ll explore how the web renders color (what sRGB means), various ways to code color into your style sheets, and what’s new with color in CSS3.

Related Books

Resources