Color Theory

April 5, 2013

Color is a great way to make your website beautiful while enhancing its usability.

Color plays an important role in design in general. However, you have to be more mindful of color when you use it on the web, as there are a lot of usability problems that can arise from its misuse.

I won’t get too scientific, as I want to keep this relevant to web design. Let’s go over some of the basics of color theory.

Color theory is a body of practical guidance to color mixing and the visual effects of specific color combination.

Color Wheel

The Color Wheel

In 1666, Sir Isaac Newton developed the first circular diagram of colors. The color wheel, based on red, yellow and blue, is still the basis for most color theory.

There are 3 important sections of the color wheel:

Choosing Colors

Choosing colors is extremely important and worth the effort to consider them carefully. Colors carry different meanings around the world.

Red is the color of fire and blood, so it is associated with energy, war, danger, strength, power, and determination. It can also represent passion, desire, and love.

Red also symbolizes prosperity and happiness in China, and mourning in South Africa. Red is used in many US-based AIDS awareness campaigns in Africa. Just remember that your audience may interperet colors differently.

Blue is the color of the sky and sea. It is often associated with depth and stability. It symbolizes trust, loyalty, wisdom, confidence, intelligence, faith and truth.

In India, blue is assocated with the Hindu deity Krishna, and is considered a holy color in Judiasm. The 8th Light logo uses a darker, subdued blue. It’s a smart choice, considering blue is one of the safest colors to use internationally.

While there are no set rules when selecting colors, it’s important to be mindful of your choices. Do some research! For further reading, I suggest reading Cameron Chapman’s wonderful article on Color Theory for Designers: The Meaning of Color.

Here is her quick reference guide for some common meanings of color that I find really helpful:

Using Color in Web Design

Color can be a great tool to enhance user experience and improve usability. Using color for links and buttons is a great way to communicate to the user that an action is available. Links should be obvious and clearly defined or the user might miss them entirely. For this reason, I typically use bright colors, like red, green, purple or orange, for links.

For buttons, you can use colors like green, blue and orange for submitting and saving. They stand out more and help the user navigate the page more easily. Take Twitter’s sign up page, for example:

Twitter Login

Colors like red and gray can be used for deleting, closing and archiving. Red is often assoicated with actions with repercussions, like the admin section of a Github repository:

Github Danger Zone

There isn’t a right or wrong answer here. I have seen plenty of websites break the rules and still work. The point is to stay consistent so the user can easily recognize what color is associated with what action.

Color Tools

There are a lot of great resources to help you pick color palettes. I use these all the time for inspiration and to help me find matching or complimentary colors:

While there is a science behind color theory, it’s also very much an art. Learning to use color in your designs takes practice and a bit of innate taste. I’m still learning about and playing with color, but I really love its meanings and I’m fascinated by how easily it can change a design.