Introduction to Color theory
Tags: beginners, color
Published: 2020-02-12 13:53:38

---
title: Introduction to Color theory
published: true
description: A brief introduction to theory
tags: beginners, color
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/pztjf0f2tszugap4uibn.jpg
series: FrontEnd Development Zero to Hero
---
> <b>Cover image by [Sharon Pittaway](https://unsplash.com/@sharonp) on [Unsplash](https://unsplash.com/)</b>

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 &mdash; the search for a perfect color-order system and the search for laws of harmony in color combination &mdash; these have converged in the field of study known as _color theory_.

Now you might ask: What is _color theory_?

Let's find out.

<hr>

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](https://www.interaction-design.org/literature/topics/color-theory) 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)

![Color wheel](https://dev-to-uploads.s3.amazonaws.com/i/5qymzgx115wfwkpoc4o3.png)<figcaption>Color wheel &copy; <a href="https://tubikstudio.com/">Tubik studio</a></figcaption>

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](https://dev.to/ziizium/css-media-queries-14fa):

```css
@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.

![Analogous color combinations](https://dev-to-uploads.s3.amazonaws.com/i/mpk2ntbwmhx8sokci4y3.png)<figcaption>Analogous color combinations</figcaption>

###__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.

![Complementary color combinations](https://dev-to-uploads.s3.amazonaws.com/i/qsisygzvih0qov5lfvro.png)<figcaption>Complementary color combinations</figcaption>

###__Split-complementary__

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

![Split-complementary color combinations](https://dev-to-uploads.s3.amazonaws.com/i/6mlfw5goip1b1nb08jub.png)<figcaption>Split-complementary color combinations</figcaption>

###__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.

![Triadic color combinations](https://dev-to-uploads.s3.amazonaws.com/i/etrefnum5454dpg8dpbg.png)<figcaption>Triadic color combinations</figcaption>

###__Tetradic__

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

![Tetradic color combinations](https://dev-to-uploads.s3.amazonaws.com/i/ahtmjnp1h28g4d88it8j.png)<figcaption>Tetradic color combinations</figcaption>

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](https://www.interaction-design.org/literature/topics/color-theory)).

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
](https://www.amazon.com/Understanding-Color-Introduction-Linda-Holtzschue/dp/0470381353)
* [What is Color Theory](https://www.interaction-design.org/literature/topics/color-theory)
* [Color theory overview](http://www.worqx.com/color/index.htm)
* [Color theory](https://www.ndsu.edu/pubweb/~rcollins/242photojournalism/colortheory.html)
* [Color Theory: Brief Guide For Designers](https://tubikstudio.com/color-theory-brief-guide-for-designers/)

<hr>

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_.