An Introduction to Color Theory for Web Designers

Today we’re going to learn the importance of color in Web Design and how to choose a pleasing color scheme. This article is part of our Basix series, which is aimed at providing practical and concise explanations of design principles for those with little design experience… let’s get started!

Who this Article is Written for:

This article is written for people that are just starting to learn formal design principles. It is not meant to be a comprehensive study of how to apply color to a design (we’ll have plenty of those in the future), but rather, it’s an overview for those looking for practical advice that will help them approach color theory within the context of a web design project.

I’m writing this because I’ve always found it difficult to decide on a color scheme that works well for a project; it’s probably one of the toughest decisions that I have to make as a designer. However, by learning the basics of Color Theory and some excellent tools available on the web, I’ve been able to strengthen my designs and account for this weakness.

A Few Candidates for the Target Audience:

• A programmer looking for advice to help them create a visually appealing prototype.
• An aspiring designer who wants a brief overview of the subject
• Someone who doesn’t understand the difference between Web Development and Web Design.

In A Nutshell, What is Color Theory?

Color Theory actually covers a number of things, but at the most basic level it is the interaction of colors in a design through complementation, contrast, and vibrancy.

The interaction of colors in a design through complementation, contrast, and vibrancy.

While the first part of this definition is straightforward (and admittedly bland), it is the last 3 terms which define the basic Color Theory:

Complementation

Complementation refers to the way we see colors in terms of their relationships with other colors. When colors occupy opposite ends of the color spectrum, they lead people to consider a design visually appealing by establishing a happy medium the eye can reside in. Rather than straining to accommodate for a particular area of the color spectrum, the eye is provided a balance. There are two common uses of complementation: the Triadic and Compound color scheme that we will be discussing later. Complementation can take you to new heights of design sophistication when you can begin to master the intricacies of color combinations.

Contrast

Contrast reduces eyestrain and focuses user attention by clearly dividing elements on a page. The most apparent example of contrast is an effective selection of background and text color, as shown below:

If you’re ever in doubt, the best practice is usually to choose a very light color for the background, and a very dark color for the text itself. This is one area where color theory is crucial to the usability of a web design; In most projects, large text areas aren’t a place to try to be really creative – so keep it simple and legible.

Along with establishing readable text, contrast can also draw the viewer’s attention towards specific elements of a page. Think about highlighting a textbook: when you want to draw your attention to a specific portion of the page, you make the surrounding area look different than the rest of the text. The same principle applies to Web Design: Using a variety of contrasting colors can help focus the viewer’s attention on specific page elements.

If your website has a dark background, focus on the main content with a lighter color.

This principle also applies to Analogous colors (which we will discuss later):

Vibrancy

Not to sound silly, but vibrancy dictates the emotion of your design. Brighter colors lead the user to feel more energetic as a result of your design, which is particularly effective when you are trying to advertise a product or invoke an emotional response. Darker shades relax the user, allowing their mind to focus on other things. A great example of this is a comparison between CNN and Ars Technica:

CNN’s website features a stark red banner across the top, which leads to heightened emotions from users as they are stimulated by the vibrancy of the design (and the contrast between red, white, and black- the primary color scheme of the website).

Ars Technica utilizes a darker color scheme for its background and header to relax the user and focus their attention towards their content. By doing so, their technical and detailed writing is considered the forefront of the site. And more importantly, the user is allowed to transfer the mental energy traditionally reserved for responding to vibrant colors to understanding the article’s contents.

How Do I Select an Effective Color Scheme?

Here are 3 of the commonly accepted structures for a good color scheme: triadic, compound, and analogous:

Triadic Color Scheme

Composed of 3 colors on separate ends of the color spectrum. There is a very easy way to create a Triadic color scheme:

1. Take a color wheel, and choose your base color.
2. Draw an Equilateral Triangle from this point.
3. The three points of the triangle will form your tri-color scheme.

By using an Equilateral Triangle, you can ensure the colors have equal vibrancy and compliment each other properly.

Compound Color Scheme (aka Split Complimentary)

The Compound color scheme is based on providing a range of Complementary Colors: two colors are chosen from opposite ends of the color spectrum. By doing so, the designer is allowed more freedom in their design while also benefiting from the visual appeal of complementary colors.

Analogous

An Analogous color scheme is based on a careful selection of colors in the same area of the color spectrum. Usually the colors are differentiated by their vibrancy, and their contrast when compared to each other.

Two examples of an Analogous color scheme are:

1. Shades Yellow and Orange
2. A Monochromatic Selection (Shades of a base color)

Just the Beginning…

The beauty of where we are in history right now is that we can benefit from centuries of scientific and artistic color theorists. There are entire volumes that have been written about the minutia of color theory, so I’ll encourage those of you who really want to dig deep into the subject to find one of the numerous academic books available to harness some of the deeper concepts. We’ll also be releasing deeper articles on “color theory for web designers” in the future here on Webdesigntuts+ :).

Now let’s look at some great tools that you can use to experiment on your own:

Ways to Make Your Life Easier

Thankfully, there are a few tools at our disposal that make color selection extremely easy when utilized properly. And best of all, they will further our understanding of Color Theory.

By experimenting in a guided environment, we are able to learn how to apply these principles without becoming frustrated when things are not working perfectly. Think of these tools as a sort of “color theory safety net”, to help you explore your own creativity without ever needing to stray far from the established rules for pleasing color combinations.

Kuler

A tool developed by Adobe, Kuler is aimed at providing an intuitive way to create a color palette. Every color on the palette can be individually modified, or chosen as the base color, with a few simple clicks. Palettes can be saved and published, and there are a number of great community entries available on their site. Under each color, the export codes are provided (including hexadecimal). However, the interface can be cumbersome at times, adjusting the vibrancy of a specific color can alter the entire palette (I wish they had a “lock” feature which prevented other colors from shifting). Overall, I would recommend this tool for those with a decent grasp of the concepts and patience for when things don’t run as smoothly as they would hope.

Color Scheme Designer 3

This tool is quickly becoming my preferred choice for absolute beginners, those with little patience, or people on a deadline. By providing a very simple and controlled selector, Color Scheme Designer provides a very low barrier of entry, and its choice of color principles present a variety of options. While it doesn’t teach its users why the colors work well together (Kuler’s dynamic color wheel is much more effective in that regard), its results are great as a starting point or to finish a prototype.

Its more advanced options are very useful: features such as the ability to adjust an entire palette’s saturation and contrast, color blind overlays, and sample website previews are things I hope Kuler implements very soon. However, I feel this tool shouldn’t be the primary tool used by those who want to learn Color Theory- as it does too much of the work for the user and does not allow them to intuitively experiment while maintaining the basics of each color principle.

Yes, there are lots and lots of other sites where you can find great color schemes… and we’ll actually be rounding these sites up and analyzing them in the near future (search the site for our resource roundups when it comes out).

Case Study: Gamers With Jobs

To finish this article, let’s examine a website using some of the principles that we’ve discussed. Gamers with Jobs is a website devoted to a higher analysis of videogames, through its features, podcast, and forum.

• The grey page background with the white content background focuses the user’s attention towards the center of the website.
• The dark bar across the page (usually reserved for advertising) “frames” the user’s view into the content.
• The use of orange-red in the headers draws the user to the categories, feature titles, and aspects of the website.
• The neutral color scheme provides enough visual stimulation to keep the audience interested, while still allowing them enough mental freedom to enjoy the site’s content.

Closing Remarks and Summary

One of the hardest aspects of working with colors is that sometimes when colors have not yet been arranged in a design, they do not appear to work well together. However, once they are applied, their visual harmony usually becomes apparent. I’ve caused myself a fair amount of frustration by adjusting the colors chosen in Kuler before applying them to a design, only to find that the color scheme was altered just enough to be unappealing.

Trust in the theory! Apply the colors chosen through a color principle, and then adjust as needed. Doing so will save you a lot of time, and strengthen your design skills as you’ll begin to see color in more refined, artistic, and even scientific ways!

Summary

• Choosing colors on opposite ends of the spectrum creates a visual harmony for the eyes.
• A high contrast between elements makes text easily readable, and guides your reader’s attention.
• The brighter the colors, the more mental energy they will consume.
• Don’t be afraid to use tools such as Kuler and Color Scheme Designer 3, they only make your life easier and prevent you from becoming frustrated with the learning process.

Thank you for reading my first article, I had a ton of fun writing it. Please provide some feedback in the comments section if you feel so inclined, I want to make these articles as useful as possible.

Oh! And if you’re eager to read more, check out another great theory-based article that relates to what we just talked about: “Understanding Visual Hierarchy in Web Design”.