top of page

Color theory

Color is one of the most noticeable elements of design. This is mainly because of its ability to grab a viewer’s attention, evoke a certain emotion and be used as a method of communication. Depending on the location, culture and context, each color often has a unique meaning which should always be considered by the designer when he or she decides to use it.

Additionally, different colors, as well as different color combinations can trigger certain emotional responses or reactions from the recipients. With this in mind, it is obvious that every good designer should understand these traits and properties in order to make an adequate choice when it comes to color. The best way to do so is to learn about color theory.

What is color theory?

Color theory is a set of guidelines and principles regarding individual colors, color combinations and their overall visual effects. The role of color theory, in the context of art and design, is to categorize different colors based on their features, as well as to explore their relationships. A basic tool used to achieve this is the color wheel, developed by Sir Isaac Newton in 1666.

Color categorization

The color wheel consists of primary, secondary, and tertiary colors. According to traditional color theory, primary colors are the three pigment colors (red, yellow, and blue) who cannot be formed by mixing any of the other colors. Secondary colors are formed by mixing two primary colors and include green (a mix of blue and yellow), orange (a mix of red and yellow) and purple (a mix of red and blue). Finally, tertiary colors are the result of mixing the primary and secondary colors placed next to each other on the color wheel.

unnamed (10).png

(source: Wikipedia)

Primary, secondary and tertiary colors within the color wheel
(source: Wikipedia)

The color wheel can be further divided into warm and cool colors, where red, yellow, orange, and all of their variations are considered warm, while all the blues, greens, and purples are considered cool.

Warm colors are usually energetic and are often used to reflect happiness and positivity. As one of the most widely used colors, red can be associated with passion and love, but it could also indicate danger or importance. Depending on the shade it can be lively or elegant. Orange is a bit more vibrant and represents movement, creativity, and vitality, while yellow is considered to be bright and cheerful.

unnamed.png

Warm colors

Cool colors on the other hand are usually more peaceful, relaxed and reserved. They represent water and nature, as well as the night skies, so are often used in order to give a more calm or professional aesthetic to a design. Green, mostly associated with nature can represent growth, healing or stability, while blue is the calmest among the cool colors and represents wisdom, responsibility and peacefulness. Purple is frequently associated with wealth and ambition, but it is used for soft, romantic and creative designs as well. 

unnamed (1).png

Cold colors

Black, white, gray and often shades of brown and beige are considered neutral. Depending on the design they can be either used as a background in which the other colors stand out, or as a part of elegant, sophisticated and minimalistic designs that consist only of neutrals.

unnamed (2).png

Neutral colors

Hue, saturation and value

Primary, secondary and tertiary colors form the basic version of the color wheel, but as we already know, there are plenty more variations. All of these additional colors are a result of three attributes: hue, saturation, and value.
Hue is the simplest one amongst them since it is essentially another term for color. For example, blue, red and green are all hues. However, in painting color theory, hue is defined as a pure pigment, one without a tint or a shade.
 

Saturation refers to intensity, meaning that it defines whether the color feels more vibrant or subtle. The lower the saturation of a color, the closer it gets to a shade of gray, thus setting a darker mood, whereas highly saturated colors create a more lively atmosphere. However, if all the colors of a design are overly saturated, the design becomes difficult to look at, so it is best used for highlighting an area of interest or emphasizing certain elements.

Value is a term used when defining a color’s brightness, ranging from black to white. A mixture of a color with white is called a tint, increasing its lightness, while a mixture with black is called a shade, increasing its darkness. Additionally, a mixture with gray results in a different tone. Values of high contrast are often used to draw attention to certain elements.
 

So, while tints, shades, and tones affect the color’s lightness or darkness, they do not affect its intensity, since that is defined by the amount of saturation.

unnamed (3).png

(source: Wikipedia)

Color harmony and color schemes


The categories and attributes mentioned above are an important aspect when it comes to choosing a color palette for your design. Additionally, all designs should aim towards achieving color harmony, which is a property that defines a certain color combination as aesthetically pleasing. 


According to color theory, there are certain color schemes that achieve such harmony, those being:

• Monochromatic
• Analogous
• Complementary
• Split complementary
• Triadic
• Tetradic

unnamed (4).png

(source: Wikipedia)

A monochromatic color scheme consists of only one color (or hue) and its different variations which are the results of using saturation and value. It is considered the simplest way to achieve harmony since all the color variations are from the same hue 

and are almost always guaranteed to match.

unnamed (5).png

Monochromatic Illustration by Au Aranas
(source: behance.com)

An analogous color scheme contains colors that are placed next to one another on the color wheel. For example, it could consist of reds and oranges, as well as blues and greens, while also using different shades, tints, tones, or levels of saturation. This color scheme is proven to be very comfortable and soothing for the viewer since we often see it in nature. For example, we see different tones of green in trees and grass in combination with the blue skies.

2ed0ddedd7af5bedc466025fd0e6d73d.jpg

Design by TRINH HUY HUNG
https://dribbble.com/trinhhuyhung

A complementary color scheme consists of two colors placed opposite of each other on the color wheel. For instance, each primary color has a complementary secondary color, those being red and green, blue and orange, and yellow and purple. Even though complementary colors are naturally pleasing to look at, they should be used carefully. The design should never consist of an equal amount of both colors, but rather predominantly use the weaker (cooler) one, with splashes of the stronger (warmer) color to emphasize certain details.

unnamed (1).jpg

Editorial illustration by Alina Bohoru
(source: behance.com)

Split complementary, on the other hand, uses the two colors placed on both sides of a complement. It allows more creative freedom and variety and it often results in more joyful designs. Same as with complementary color schemes, the weaker colors should dominate, while the stronger should be used for focus points.

unnamed (6).png

Illustration by Abdo Mohamedl
(source: behance.com)
 

Triadic color schemes consist of three colors which are evenly spaced on the color wheel, forming a perfect triangle. These are often very playful combinations and can be used for cartoonish or surreal designs.

unnamed (2).jpg

Hello Hollard by The Kinetic
(source: behance.com)

Similar to the triadic, the tetradic color schemes use two complementary color pairs that form a rectangle on the color wheel. Harmony can be best achieved by letting one color dominate, while using the other three for accents and details, or if one pair of complementary colors is used for the foreground and the other for the background.
When the four colors of the tetradic color scheme are equally distanced on the color wheel, the scheme is called square. 

unnamed (3).jpg

NON October 2017 by Ryo Takemasa
(source: behance.com)

Conclusion


When it comes to color, all designers should consider whether they want a more bright and cheerful aesthetic or a rather serious and elegant one and use that as a base when picking colors and color combinations. It should be noted that functional design has to be clear, legible and pleasing to the eye of the viewer while sending a relevant message.
Changing the value and saturation of the chosen colors can be applied for any of the color schemes mentioned above. After all, these palettes should be seen as a starting point from which each designer can further explore the different possibilities and interpret them according to the design in question.

Finally, innovation and creative expression are important aspects of the design process, but one should always have the rules and guidelines provided by color theory in mind since following them undoubtedly gives functional and aesthetically pleasing results.


Links to image sources:

Color wheel
https://en.wikipedia.org/wiki/Color_wheel#/media/File:Color_star-en_(tertiary_names).svg

Saturation and value
https://commons.wikimedia.org/wiki/File:Saturation_and_Value_(2).png

Color schemes
https://de.wikipedia.org/wiki/Farbschema#/media/Datei:Farbschemata.jpg

Monochromatic
https://www.behance.net/gallery/16844913/Monochromatic-Illustration?tracking_source=search_projects_recommended%7Cmonochromatic

Analogous
https://www.behance.net/gallery/81274493/practice?tracking_source=search_projects_recommended%7Cgreen%20blue%20branding

Complementary
https://www.behance.net/gallery/56545323/Birds-of-a-feather?tracking_source=search_projects_recommended%7Ccomplementary

Split complementary
https://www.behance.net/gallery/74510489/Depression-point-illustration?tracking_source=search_projects_recommended%7Cposter%20contrast

Triadic
https://www.behance.net/gallery/87140897/Hello-Hollard?tracking_source=search_projects_recommended%7Cpurple%20red

Tetradic
https://www.behance.net/gallery/58161323/NON-October-2017?tracking_source=search_projects_recommended%7Cred%20and%20orange

 

bottom of page