Creating Consistently Colorful User Experiences: Part 1, Theory

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 help 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.

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

About the Author

Andrew Maier

Andrew is a lifelong student of the design community, who co-founded the design publication UX Booth in 2008 to share his journey. He currently serves as its Editor-in-Chief. When he's not heading user-centered design initiatives for clients, Andrew dabbles in civic design. He lives in Seattle's Capitol Hill neighborhood.

Related Articles

26 Comments

  • Fire G Reply

    Great read Andrew. You always offer the most in depth articles, really enjoy them.

    I find it strange though that you didn’t mention Adobe’s Kuler under resources as a way to create complementary color swatches.

    Looking forward to the Practice installment. Would like to see a color breakdown of various sites and how certain types of websites primarily use certain colors.

  • orangeguru Reply

    What a terrible article! How can you start colour theory without first explaining the basics of seeing, different perceptions and colour range of devices.

    Also your “list” of association as basically western ones (that have been dragged from one bad article / book) to another. Red doesn’t mean the same to all cultures.

    Since colour is so differently perceived by many cultures, one should ask himself/herself why. Well, then you would find out that seasons and the sunlight are a bit different based where you live – that also changes perceptions. For example in some African Nations people wear “brutally” bright colour, most Europeans wouldn’t touch – not even as costumes for carnival.

    A designer must know about such things – and an article about colour should reflect that.

  • Raymond Selda Reply

    Please don’t check the colors on my blog! Hahaha! I’ve shared a tip on how to generate colors using images on my blog and for most of the time I use ColorSchemeDesigner in choosing colors.

    I love your article and looking forward to the next installment. Thank you.

  • hot Reply

    orangeguru: shut up

  • Ethan Gardner Reply

    @orangeguru: If this encompassed all the information you mention, it would be a book and not a series of blog articles. Personally, I am a fan of posts that trend toward the scientific or theory side of things and can’t wait for the other articles in the series.

  • Mike van Hoenselaar Reply

    @orangeguru:

    I think you are right, but he mentions the variety of meaning and associations to color. This is a Usability blog, so perhaps the goal of the article is to make it usable. And therefore explain the basics instead of doing a 40 pages article on color. There are lots of books for that ;-).

    I understand your criticism, but looking at a wise perspective I personally think this is a very good article that explains a lot you should know to design for the web.

  • SuperCars Reply

    I’m impressed with your article I’ve been looking for combinations for quite some time and I must say you just clear the path with this Article now I sort of understand which color to pick for my product.

  • Glamour shots Reply

    I think (Green and Orange) (Violet and Yellow) are perfect combinations when you want to bring out the color in them

  • Frank Reply

    As a web developer who enjoys design work at times I often find my two weakest points are finding the right colours and choosing good fonts.

    For someone who’s profession is based on logic and numbers I find it difficult sometimes to let that creative flow run wild and articles like this really help.

    I’m really looking forward to the next part, keep up the great work.

  • Dr. Pete Reply

    Nice article, Andrew – you guys are really doing great work over here. I have to admit that one of the frustrations I have about color theory, even as a psychologist, is that we have a lot of individual perceptual pieces but haven’t really worked out how they fit together in real-world puzzles. For example, red has been associated with aggression (in the Western world) and we also associate it with “stop”. It could be argued, then, that calls to action probably shouldn’t be in red. On the other hand, red draws attention, so a red button on a neutral gray or muted green website would stand out and possibly drive strong click-throughs.

    Not really an argument against any of this, just a comment that I hope we as an industry start to gather more complex, real-world data. I know the standard argument is “that’s why you do testing”, and I’m a huge proponent of testing, but we also need to build more complex models and perceptual theories.

    @orangeguru What a terrible comment! How can you start a comment without exploring the rich history of commenting and the evolution of language across the globe? Seriously, it’s easy to be an armchair blogger. Why not go out and write your own article about how color is perceived in different parts of the world? Personally, I’d find that fascinating.

  • Andrew Maier Reply

    @Fire G: Trust me, Adobe Kuler is going to get it’s mention! I’m trying to be as thorough as possible without losing any readers (the ones who don’t need to read/want to read a book online). I will make a point to include examples of color schemes on various websites. Perhaps a fourth part of the series.

  • Andrew Maier Reply

    @orangeguru: I appreciate your feedback, though I’m sorry the article wasn’t to your liking. Do you have any insight you’d like to add, or links to contradictory information? I try and do in-depth research before writing my articles and many of my sources (listed under the heading “Resources”) confer with me. I am certainly open to writing again about how color is interpreted differently among various cultures.

  • Andrew Maier Reply

    @SuperCars: @Frank: @Johnny MAck: Thanks for the feedback guys. I have worked in website design and development for a number of years and I’m only beginning to articulate my understanding of color schemes.

    On a nerdy note: while it’s certainly not as easy as programming, it’s all numbers in the end. I have done little research into how “hue” values (0 – 360) relate mathematically and if there is anything to be gained from their numerical relationship. (Ie: if hue 0 and 225 look good together, does due 0+30 and 225+30?) Obviously, that concept is a bit too farfetched and certainly under-researched for this blog.

    With that said, I’m happy the article was helpful for you and hope you all come back and read what I have to say in parts two and three.

  • Catherine Reply

    Thank you for bringing some humor into my day. “Complimentary” colors, eh? Does Red say to Blue, “My, what a beautiful hue you are”? I think you mean “Complementary” (with an e not an i). Remember this little adage, “I to ingratiate; e to extend”, and you will never make this amusing mistake again.

  • Retail Display Student Reply

    Wow, this article just made me realize how much I still have to learn about colors….my brain hurts :-)

  • foreigner Reply

    Hi,

    there is title “Contrasting/Complimentary Colors”. Shouldn’t it be “Complementary” not “Complimentary”?

  • Rob Busby Reply

    Andrew,
    Thanks a great deal for this information. Although I have been in Web Design / Development for a few years, I have recently started to finally think out of the box, sort of speak. I have been desperately searching for a common ground of understanding color techniques as well as new design perspectives and your Blog information has given me just that.

    In short, your simple but intuitive approach of visual communication about color has actually helped me a great deal. I can appreciate your interest for design and I look forward to reading your next articles.

  • marek Reply

    The question is if getting the “right” colours are the right thing to do by designer. Maybe if you do something against, your work will be more visible ?

  • Philip Hodges Reply

    Nice article, cheers. I recently heard that Orange apparently has a really high conversion rate when used for call to action, and that Amazon had done a lot of research into this. Does anyone know if this research (or similar) has ever been posted anywhere?

  • web hosting texas Reply

    Thanks for the detailed article about color theory. I always prefer blue for my websites. It gives a professional look.

Leave a Comment on This Article