What is Color Theory?

Color theory is the collection of rules and guidelines which designers use to
communicate with users through appealing color schemes in visual
interfaces. To pick the best colors every time, designers use a color wheel
and refer to extensive collected knowledge about human optical ability,
psychology, culture and more.

See how to leverage color to resonate with users.

“Color! What a deep and mysterious language, the language of dreams.”

— Paul Gauguin, Famous post-Impressionist painter

1. Primary (red, blue, yellow)

2. Secondary (mixes of primary colors)
3. Tertiary (or intermediate – mixes of primary and secondary colors)
Following Newton’s findings, the study of color advanced to cover the
properties of color in its two forms—i.e., print/paint and screen/light—and in
a variety of fields, from art to astronomy. A color’s properties are:

 Hue – How it appears (e.g., “is green”).

 Chroma – How pure it is: i.e., if it has shades (black added), tints (white
added) or tones (grey added).
 Lighting – How pale or saturated it appears.

Use a Color Scheme and Color Temperature for

Design Harmony
main color schemes:

 Monochromatic – Take one hue and create other elements from different
shades and tints of it.
 Analogous – Use three colors located beside one another on the color wheel
(e.g., orange, yellow-orange and yellow to show sunlight). A variant is to mix
white with these to form a “high-key” analogous color scheme (e.g., flames).
 Complementary – Use “opposite color” pairs—e.g., blue/yellow—to
maximize contrast.
 Split-Complementary (or Compound Harmony) – Add colors from either
side of your complementary color pair to soften contrast.
 Triadic – Take three colors which are equally distant on the color wheel (i.e.,
120° apart: e.g., red/blue/yellow). These colors may not be vibrant, but
the scheme can be as it maintains harmony and high contrast. It’s easier to
make visually appealing designs with this than with a complementary
scheme.
 Tetradic – Take four colors that are two sets of complementary pairs (e.g.,
orange/yellow/blue/violet) and choose one dominant color. This allows rich,
interesting designs. However, watch the balance between warm and cool
colors.
 Square – A variant of tetradic; you find four colors evenly spaced on the
color wheel (i.e., 90° apart). Unlike tetradic, square schemes can work well if
you use all four colors evenly.
Your colors must reflect your design’s goal and brand’s personality.
You should also apply color theory to optimize a positive
psychological impact on users. So, you should carefully determine how
the color temperature (i.e., your use of warm, neutral and cool colors)
reflects your message. For example, you can make a neutral color such as
grey warm or cool depending on factors such as your organization’s
character and the industry.
Use Color Theory to Match What Your Users
Want to See
The right contrast is vital to catching users’ attention in the first place.
The vibrancy you choose for your design is likewise crucial to provoking
desired emotional responses from users. How they react to color choices
depends on factors such as gender, experience, age and culture. In all cases,
you should design for accessibility – e.g., regarding red-green color
blindness.
Recalling Color Theory Keywords: a
way to refresh your memories!

Choosing the best combination of colors for an interactive design layout is

not, as it may appear, a guessing game. Knowing which ones to use will save
you time (and headaches). Getting it right will also keep your users
connected.

Since the early days of art and design, the use of color has followed many
rules and guidelines, which are collectively known as color theory.

A color scheme is one of the first elements to communicate the message

behind the design on both visual and psychological levels. In fact, the color
scheme is one of the most important elements; this is because, when used
correctly, color can reflect the niche and even the overall business marketing
strategy.

In this article, we will briefly review different color classifications to refresh

your memory about those graphic design classes you took at University.
We’re sure that the content will both ring a bell and inspire your creativity.

The Color Wheel

The relationship between colors can be shown through use of the color
wheel.

The color wheel shows links between different colors based on the red,
yellow, and blue content of each color. It was first developed by Sir Isaac
Newton in 1666.

The color wheel’s most useful and most commonly used variant is shown in
the image above, which includes red, red-orange, orange, orange-yellow,
yellow, yellow-green, green, green-blue, blue, blue-purple, purple, and
purple-red combinations. (Stone, 2008).
 Bleicher (2011) stated that the color wheel can be categorized into three
main types of colors based on the combination of base colors used to create
the final color, as follows:

 Primary colors - yellow, red, and blue. These are basic colors that cannot be broken down into
any simpler colors.
 Secondary colors - these are created by mixing two primary colors. The secondary colors are
orange, green, and purple. Mixing yellow and red creates orange; mixing blue and yellow creates
green, and mixing blue and red creates purple.
 Intermediate or tertiary colors are created by mixing both primary and secondary colors to
form a hybrid, such as yellow-orange, red-orange, red-purple, blue-purple, blue-green, and
yellow-green. On a larger color wheel than the one shown above, a mix between intermediate,
secondary, and primary colors would create quaternary colors.
A thorough understanding of the color wheel and the relationship between
colors enables designers to understand color better and know how to choose
colors for their designs. We’ll come to this shortly.

Achieving Harmony in Color

Colors should be chosen to deliver an enhanced aesthetic appeal and a
better user experience. That means it’s a good idea to think about what color
scheme you will use at the start of the design process. The way that colors
are combined can either add to the look and feel or detract from it.

According to Bleicher (2011), there are five main color schemes (and some
combinations and variants of these schemes) that allow designers to achieve
harmony in their designs:

Monochromatic Scheme
The monochromatic scheme is based on the colors created from different
tints (created by adding black or white to the original color), tones, and
shades of one hue. In theory, it’s the simplest of all the schemes. A
monochromatic scheme is commonly used in minimal designs because one
hue should result in a less distracting layout.

On the other hand, this scheme means that you cannot use multiple colors to
help with visualizing information in the User Interface (UI). That is the only
price of simplicity.
Analogous Color Scheme
The analogous scheme is based on three colors located next to each other
on the color wheel (e.g., red, red-orange, and red-violet). This scheme can
easily be found in nature – just think of trees in the autumn as the leaves
change color.

There is a variant on this scheme, the “high-key” analogous color scheme.

It’s achieved by mixing your analogous shades with white. This version is
commonly found in impressionist art – particularly early impressionist art.
The effect achieved is one where the colors seem to “shimmer” and “blur”
into each other – when viewed from a distance, it can create the illusion that
only a single color is in use.

Complementary Schemes
Complementary color schemes use one (or more) pairs of colors that, when
combined, “cancel each other out”. For example, when you combine the two
colors, they produce white or black (or something very similar from the gray-
scale). For that reason, this scheme is also known as the “opposite color”
scheme.

When you put two complementary colors next to each other, they show the
greatest contrast. In modern color theory, the pairs are red/cyan,
green/magenta, and blue/yellow.

Split-Complementary (occasionally “Compound Harmony”)

Scheme
This is a combination of using the complementary color scheme and the
analogous color scheme. In essence, complementary colors are chosen and
then the colors on either side of them on the color wheel are also used in the
design. It’s considered to soften the impact of a complementary color
scheme, which can, in some situations, be too bold or too harsh on the
viewer’s eye.

Triadic
The triadic scheme is based on using three colors at equal distances from
each other on the color wheel. The easiest way to find a triadic scheme is to
put an equilateral triangle on the wheel so that each corner touches one
color. The three colors will be exactly 120° from each other.
These schemes are considered to be vibrant (even when the hues
themselves are not) – they keep the harmony but deliver a high level of
visual contrast. You can find triadic schemes in a lot of art as it’s easier to
deliver a pleasing visual result with a triadic scheme than when using a
complementary scheme.

Tetradic
Tetradic schemes utilize two sets of complementary pairs: four colors. These
can create very interesting visual experiences, but they are hard to keep in
balance. Why? It’s because one color of a tetradic scheme needs to dominate
the other colors without completely overwhelming them. An equal amount of
each color often leads to a very awkward look, the last thing you want your
users to see.

Square (A Variant of Tetradic)

The square scheme is a variant of the tetradic scheme. Instead of choosing
two complementary pairs, you place a square on the color wheel and choose
the colors that lie on its corners. Therefore, you’ll find four colors that are
evenly spaced at 90° from each other. Unlike the tetradic color scheme, this
approach often works best when all the colors are evenly used throughout
the design.

Color Temperature
Colors can be used to convey emotive content as well as assist with the look
and feel of your website. We’re talking about moving people now, evoking
passions and feelings in our users. It’s worth noting at this point that
people’s culture, gender, experiences, etc. will also affect the way that colors
resonate with them and that user research is a better indicator of emotional
response to color than the following guidelines based on the color wheel. For
instance, did you know that, in China, red is common because it represents
happiness and prosperity, but white is considered funerary or representing
misfortune? Also, Chinese culture has a unique color – qing – which is a sort
of bluish-green gray, or “grue”. In Greece, yellow conveys notions of
sadness, while red conveys such notions in South Africa. Color is a big issue
in how people from different parts of the world will interpret your design. A
little research goes a long way.

However, if you want to follow the color wheel approach, there are three
indicators of color temperature: “warm” and “cool” and “neutral”:
 Warm colors–These are colors located on the half of the color wheel that includes yellow,
orange, and red. These colors are said to reflect feelings such as passion, power, happiness, and
energy.
 Cool colors– These are colors located on the other side of the color wheel, including green, blue,
and purple. Cool colors are said to reflect calmness, meditation, and soothing impressions.
 Neutral Colors – These are not said to reflect any particular emotions. These colors include
gray, brown, white, and black.
Your choice of color categories will depend on what you are trying to achieve
with your website. You should always, wherever possible, test your color
palettes with your users to be sure that the choices you have made reflect
their realities. It’s almost always easier to set and test a color palette early in
the development process than at the end. Apart from anything else, it can
save you valuable time.

The Take Away

Color is clearly an important part of a design’s aesthetic appeal. Basing your
color palette on one of the existing color schemes can make it easier to
strike the right balance from the start.

The Color Wheel is a fundamental tool, created by Sir Isaac Newton in

1666. In it, we find:

 Primary colors
 Secondary colors
 Intermediate or Tertiary colors
We should aim to fine-tune our choice of colors to create maximum harmony,
considering the following at the same time in order to pick the most
appropriate scheme:

 Monochromatic scheme
 Analogous Color scheme
 Complementary schemes
 Split-Complementary (Compound Harmony) scheme
 Triadic
 Tetradic
 Square
Color Temperature is another vital consideration; it’s the part that can
strike chords in people and make them passionate about our work. You
should always do user testing of color schemes, if possible, and ideally at the
start of the design process. Also, always keep in mind that colors have many
cultural connotations, so make sure that you’re aware of them!
On the other hand, remember that you should not convey meaning only with
color. About 8% of people – mostly men –are color blind, and color is not
always accessible. Even so, color is a tool that can enhance the other
elements of your design. Consider it a large ingredient that can bring your
work to life and engage your users, making them care more about your
product, service or message.