< Go to Main Blog Page

The basic color theory with examples

Not only designers should know the base of color theory, but quite everyone. Color theory is the collection guidelines which designers use to communicate with users through appealing color schemes in visual interfaces. Color combinations play vital role in psychology and behavior, so it’s never underestimated in design, branding and logo – the whole project’s success depends on it. Start your path in learning color theory with the color wheel. 

The color wheel:

the color wheel

According to color theory, for harmonious color combinations suit any two colors opposite to each other on the color wheel. Any three colors equally spaced around the color wheel will form a triangle, and any four colors will form a rectangle (actually, two pairs of colors opposite each other). The harmonious color combinations are called color schemes. Schemes remain harmonious regardless of the rotation angle.

Analogous colors

Analogous colors are any three colors next to each other on the wheel, composed of one dominant color (usually a primary or secondary color), then a supporting color (a secondary or tertiary color), and a third color that is either a mix of the two first colors, or an accent color that pops. For example, Vincent Van Gogh used an analogous color scheme of green, blue-green, blue and blue-purple in his “Irises in a Vase” painting. Because they’re especially pleasing on the eye (and easy to come up with), designers often draw inspiration from the analogus color schemes for product designs.

analogus colors in color theory
Analogus colors

Example:

Illustration with analogus colors by Rwds

Complementary colors

Complementary colors are any two colors opposite each other on the wheel. For example, blue and orange, or red and green. Although it’s true, when Complementary Colors are blended together, they neutralize each other, they interact differently when placed side by side.


These create a high contrast, so use them when you want something to stand out. Ideally, use one color as background and the other as accents. Alternately, you can use tints and shades here; a lighter tint of blue contrasted against a darker orange, for example.


Complimentary colors can be nicely mixed to create a tint or shade or neutralize the accent.

Complimentary colors mixing

Example:

Complimentary colors illusration by Caique Moretto

Split complementary colors

The main difference between the complimentary and split complimentary – the colors are placed next no the complimentary and can switch. 

Split complementary colors create a more nuanced color palette than a complementary color scheme while still retaining the benefits of contrasting colors. You take two colors opposite each other on the color wheel, like red and green, and split one of them into its two adjacent colors on the wheel.

This is not the easiest category to balance, but it creates strong visual contrast, which allows you to create deep and filled design. 

Split complementary wheel

Example:

Split complimentary colors illustration by Five Three Five Design

Tetradic or double complementary colors

Tetradic or double complementary colors uses four colors together, in the form of two sets of complementary colors. For example, blue and orange is paired with yellow and violet.


Three colors that are evenly spaced on the color wheel. This provides a high contrast color scheme, but less so than the complementary color combination — making it more versatile. This combination creates bold, vibrant color palettes. 

tetradic color in color theory
Tetradic colors

Example:

Color theory
Split complimentary colors illustration by Five Three Five Design

Monochromatic

A monochrome color combination suppose to be a different variation of a single hue. This combination consists of varying tints, shades, and tones of the chosen hue. For example: dark green, slightly lighter green, and light green. These combinations are great for simplifying busy designs, creating a harmonious, visually appealing look. It’s a great color scheme strategy if you want your brand to be identified with a particular color. 

monochromatic colors in Color theory
Monochromatic wheel

Example:

Color theory
Split complimentary colors illustration by Five Three Five Design

Shades, Tints and Tones

Tints, tones and shades are variations of hues, or colors, on the color wheel. A tint is a hue to which white has been added.  A shade is a hue to which black has been added. Adding tints is a common thing to see – artists want to make their design more versatile. Finally, a tone is a color to which black and white (or grey) have been added. it can darken the original hue in order to make color less intense. 

shades, tints and tones in color theory
Shades, tints and tones

Example:

Color theory
Split complimentary colors illustration by Five Three Five Design

By evaluating the color theory

Color theory is important and massive part of your design. By learning how to use it, you can make a great improvements, by experimenting and trying new combinations, you can find a perfect balance of colors. With time you gain oversight, be attentional to other designer’s work and projects. While creating yours, choose the boldest color first and add combinations to it.


Want to find out what are the favorite colors of Massimo Vignelli? Check this article.