Introduction to Color theory

Cover image by Sharon Pittaway on Unsplash

Colors are everywhere, you'll find them naturally occurring in nature, on the streets, in our homes just to name a few. Color is a visual experience that cannot be verified by other senses.

The study of colors dates back centuries ago, the likes of Plato and Aristotle, Newton, Goethe, and Schopenhauer wrote about color. Towards the end of the seventeenth and eighteenth centuries, there were writings on the subject of colors and the influence of these writings persists to this present day.

The writings focused on two things — the search for a perfect color-order system and the search for laws of harmony in color combination — these have converged in the field of study known as color theory.

Now you might ask: What is color theory?

Let's find out.

When you are browsing the internet there is a high probability you'll land on a website that will leave you stunned by its beauty and awesomeness, if this is the case, the designers did their homework on the use and combination of colors.

Have you ever wondered why you found the said website appealing? that's because colors have a great impact on our mood and behavior. Most users decide if they like a product or website based on the color if the color is off, the users are off.

The theoretical approach on how to mix color to achieve a visually appealing effect has its roots in color theory. Interaction Design Foundation defines color theory as:

a term used to describe the collection of rules and guidelines regarding the use of color in art and design, as developed since their early days.

To create good design and employ colors more effectively, you need to understand how colors are formed and how they relate to each other. We'll begin with the color wheel.

Color Wheel

The color wheel helps you understand how different colors relate to each other and how they can be combined. It is made up of:

• Primary colors (red, green and blue)
• Secondary colors (created by mixing two primary colors)
• Tertiary colors (created by mixing primary and secondary colors)

The history of the color wheel dates back to 1666 by Sir Issac Newton over the years it has evolved but still remains the main tool for color combinations.

Now, the question is: How do you mix colors? The answer lies in color models.

Color models

A good understanding of color models is required before mixing colors. The color models are:

• Additive color model
• Subtractive color model

Additive color model

The additive color model considers red, blue, and green as primary colors so it’s also known as the RGB color system. As a designer, you should know this model is the basis of all colors used on the screen.

Substractive color model

As the name implies this model obtains colors by the subtraction of light. It consists of two color systems they are:

• RYB (Red, Yellow, blue); this is also known as artistic system
• CMYK (Cyan, Magenta, yellow and black); this is used in printing

The major difference between these two systems: additive is for digital screens and subtractive for print media. When you are designing a website that's meant to be printed, remember the color you see on the screen will look different when printed.

In CSS you can target print media with the following media query:

@media print {
   /* Code for print media here */
}

After combining colors using the color models, you have to arrange them to achieve harmony in your designs. Harmony in this context means "orderly" and "pleasing". The form of arrangements is categorized into five color schemes. They are:

• Analogous
• Complimentary
• Split-complimentary
• Triadic
• Tetradic

Analogous

This is based on three colors located next to each other on the color wheel. This type of color scheme is used for the background of web pages.

Complementary

This can be a single color or one or more pairs of colors that produce high contrast when combined. They are placed in front of each other on the color wheel.

Split-complementary

It involves the use of more colors as it combines analogous and complementary schemes.

Triadic

This involves the use of three colors that have equal distance between them on the color wheel. The need for this color scheme always arises when the design requires more color.

Tetradic

The use of this color scheme involves the use of two sets of complementary colors.

Another consideration when using color in design is color temperature i.e how to know the difference between warm, cool and neutral colors.

Cool colors contain blue or green and steps between them. Warm colors are reds, oranges, yellows, and steps between them. Neutral colors include brown, gray, black, and white.

These color groupings can evoke emotional responses in people based on their gender, experiences, cultural associations or other personal factors.

Researching the traits and expectations of a target audience is vital for not only fine-tuning the positive impact of color used in design but also preventing design failure (source).

Color theory is a science on its own and it takes more than one blog post to learn. However, it's best to understand the basics so that you can create an effective design.

Further reading

Here is a list of recommended readings on this subject:

• Understanding Color: An Introduction for Designers 4th Edition
• What is Color Theory
• Color theory overview
• Color theory
• Color Theory: Brief Guide For Designers

We've come a long way in this series. Up next we'll give some reference materials and we'll proceed to our Final Project.