Everything we look at has color. We love color. Everyone has a favorite color or two. And there is a technical reason why we like certain colors and color combinations. It’s called color theory. It is a system of guiding principles for mixing colors and for specifying color combinations to evoke a visual effect. It includes the color wheel, complementary colors, warm/cool colors, achromatic colors, tints and shades, and more. Did you get all that? Yep. Me, too.

 

For the purpose of this article, let’s take a simple approach to color theory for web design. Rather than analyze all the technical aspects, let’s look at some guiding principles that even a beginner will be able to apply in their next web design.

 

Competitive Shopping

Before you make a purchase, you more than likely looked around before settling on the right product for you. It should be no surprise then that the first step to picking the right colors for a web design is to look around at what everyone else is doing. Look at websites created for your competitors. Look at websites that are speaking for a similar industry. All this research will be invaluable when it’s time for you to settle on the right colors for your project.

 

Helpful Principles

Colors are Emotional

How does a color scheme make you feel? Notice how the brighter and warmer colors are energizing. See how the darker and cooler colors have the opposite effect. Which effect do you want for your web design? Which effect is right for the audience of your design? Are you wanting the viewer to be alert and take action? Perhaps red, yellow, or orange should be in your design. Do you want your customer to be calmed? Consider cooler colors like blue, purple, or green.

Do this: Google “color” plus the emotion you want your web design to cause.

 

Some Colors are More Popular

Just as fashion affects your choice of clothing, it affects which colors people want to see. Don’t focus only on what you like. Consider what your audience will like. The internet has a variety of guides that show what colors are on trend right now. And remember that you can shift the color tint (adding white), shade (adding black), or tone (adding gray) so that it fits your audience.

Do this: Google “color trends” plus the current calendar year. You’re going to be overwhelmed by the number of websites ready to give you insight into the right colors for the season. You might also consider refining your search with other terms such as your industry or audience.

 

Start with an Anchor Color

You likely have an idea of what color you want in your web design. That’s great. It will give you a starting point to selecting the right colors for your design.

Do this: Look at your competitors. Think about the other principles in this list. Pick that color that your design just can’t live without.

 

Certain Colors Play Well Together

Typically a design has a set of colors that interact well together. A safe way to look at color combinations is to take the stair-step approach. No all steps in a staircase can be at the same height, right? Neither can all your colors.  For example, let’s say you are picking three colors for your web design. Consider picking a dark color (such as brown), a medium color (such as tan), and a light or bright color (such as mint green).

Do this: Google “color schemes.” You might even refine your search to just view image results. There are infinite color schemes available.

 

Get the Right Tools

Are you still feeling a bit overwhelmed with what colors work well with others? No worries. There are some excellent tools on the internet to get the job done.

Do this: Google some keywords such as “color scheme tools.” One result that will likely come up is Adobe Kuler. It’s a color wheel/scheme tool that enables you to drag dots on the wheel until you reach an anchor color. The rest of the colors shift accordingly. It’s not only useful, it’s fun!

 

Know Your Color Numbers

Since you are working to get a color palette for a web design, you are going to need to know the RGB values for each color. Some of your internet tools will already list the values, but some may not. Most of the time these values will come in a six-character set such as “FF9933.” They may also come in a set of three number values corresponding to R (red), G (green), and B (blue). An example of this is “165, 42, 42.”

Do this: Write your color values down! Save them in a safe place. Keep them handy. You won’t regret it.

 

Applying these simple ideas regarding color theory will definitely boost the effectiveness of your web design. Don’t rush through them. Take your time. Once you’ve picked a color scheme, go back and compare it again to the principles discussed in this article. It will be worth the effort, I promise you.