Basics of Color Theory (Part I)

How people perceive color is influenced by many things like preference, culture, and prior experiences, making it one of the most subjective areas of web design. Studying these affect people has become a career for some. Knowing the basics of color theory gives you practical knowledge you need for your website to communicate the desired effects.

So let’s get started.

Primary Colors

When it comes to designing for the web, the three primary colors are red, green and blue (or RGB). From there, all the other millions of colors are made by different combinations of these three. This is different from print, which uses cyan, magenta, yellow and black (CMYK) inks to create colors.

The distinction is an important one. Unlike what we’ve been taught in elementary school where you start with a blank white page, RGB is based on light. By adding the primary colors together, the resulting color gets lighter and lighter.

On a practical sense, this helps visualize the color codes you often see on tools on the web. But we’re getting ahead of ourselves. The HTML color codes is a concept for another article.

Warm vs cool colors

Warm colors run the swath from red through orange to yellow (and everything in between). These are the colors of sunrises and sunsets, of energy and passion. Warm colors create a feeling of enthusiasm and happiness.

Cool colors, on the other hand, are the calming and peaceful hues of blues and greens. They are often more subdued and often invoke nature, water, the night and increasingly technology. Cool colors give a sense of calm, professionalism and expertise.

Brands have studied this for years and it’s no coincidence that their colors reflect their core values.

header

Let’s see how these colors affect web design.

Red

Red is sizzling hot. It’s often associated with the intense emotions of love, anger, and passion. It’s attention grabbing often with danger signs, blood and stop lights and as a result is often the color of importance. Think of red carpets at important events or the classic red ‘power tie’.

In eastern culture, red is the color of prosperity and good luck, which is why Chinese restaurants trend towards reds.

Red makes a good accent color, as too much of it tends to overwhelm.

Orange

Orange is a fun, vibrant color and is used to show energy. It is friendlier and much more cheerful than the dangerous red and oftentimes playful.

Green

Green is the color of nature. It symbolizes growth and new beginnings. Popular with environmental companies, green is also used for companies that want to communicate ‘freshness’.

Blue

Blue generally symbolizes calm, serenity and water. The meaning can vary due to its context and shade. Darker blues denote strength and expertise. It is no wonder it is a favorite for large corporations and technology companies alike.

Yellow

Yellow is often considered a highly energetic and bright color. It is associated with happiness and the sunshine, but can sometimes be associated with danger (like a warning sign). On websites, yellow tends to be used as an accent color to bring energy and attention to things.

Purple

Purple is the color of wealth, luxury, and royalty. As a combination of red and blue, it takes the attributes of both, with an air of mystery and is sometimes associated with romance.

Hopefully, this gives you a broad overview of how colors are generally used to invoke feelings. In our next article, we will discuss how to choose multiple colors that would be pleasing to the eye!

Read Part 2

Comments