Color Schemes

Color plays an important role in design and everyday life. It can draw your attention, create an
emotional response, and even communicate without saying a word. So how do we know which colors
work well together and which ones don’t? The simple answer 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 scheme and refer to extensive collected knowledge about human optical ability, psychology,
culture and more.

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.

Let’s Learn About The 7 Main Color Schemes:

01 Monochromatic
02 Analogous
03 Complementary
04 Triadic
05 Split-Complementary
06 Tetradic
07 Square

Start Learning Today:

interaction-design.org
Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the
Interaction Design Foundation. Also, if you remix, transform, or build upon this template, you must distribute it under the same CC BY-SA license.
Monochromatic

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 visualize information
in a user interface (UI). That is the only price of simplicity.

Analogous

The analogous scheme is based on three colors located next to each other on the color wheel (e.g.,
yellow-green, yellow and yellow-orange). This scheme can easily be found in nature — just think of trees
in the autumn as the leaves change color.

Complementary

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

Start Learning Today:

interaction-design.org
Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the
Interaction Design Foundation. Also, if you remix, transform, or build upon this template, you must distribute it under the same CC BY-SA license.
Triadic

The triadic scheme is based on the use of 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.

Split-Complementary

This is a combination of the use of a complementary color scheme and an 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.

Tetradic

Tetradic schemes utilize two sets of complementary pairs (four colors total). 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.

Start Learning Today:

interaction-design.org
Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the
Interaction Design Foundation. Also, if you remix, transform, or build upon this template, you must distribute it under the same CC BY-SA license.
Square

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.

Start Learning Today:

interaction-design.org
Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the
Interaction Design Foundation. Also, if you remix, transform, or build upon this template, you must distribute it under the same CC BY-SA license.
Do You Want to Learn More?
Learn how to use this template to your best advantage in our online course Visual Design: The Ultimate
Guide. Sign up for it today and learn practical applications to improve your own work, if you haven’t
already started the course.

Visual Design: The Ultimate Guide

Beginner Course
The goal of this course is to provide you with a holistic understanding of visual design and increase your
knowledge of visual principles, color theory, typography, grid systems, and history. Visual design is an
integral part of your user’s experience and will add to the overall quality of your work.

In this course, taught by some of the world’s leading experts, you will learn why visual design is so
important, how history influences the present, and practical applications to improve your own work.
You’ll also learn:

• What good design is and how to create it • How to design with typography and create
• How to effectively use visual design elements effective communication
and principles in your work • The importance of grid systems and how
• What color theory is and how to use it effectively they provide order to our everyday lives
• How to confidently use to color to improve • How to use grid systems to improve your work
your work
• The importance of type and the power of
visual inflection

The insights in the Visual Design: The Ultimate Guide will help you to achieve the best possible
user experience.

Learn more about this course

Start Learning Today:

interaction-design.org
Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the
Interaction Design Foundation. Also, if you remix, transform, or build upon this template, you must distribute it under the same CC BY-SA license.
How to Advance Your Career
With Our Online Courses

Take Online Courses Get a Course Advance Your

by Industry Experts. Certificate. Career.
Lessons are self-paced so you’ll Your answers are graded by Use your new skills in your
never be late for class or miss experts, not machines. Get an existing job or to get a new job
a deadline. industry-recognized Course in UX design. Get help from
Certificate to prove your skills. our community.

See all our courses

About the Interaction Design Foundation

With over 66,000 alumni, the Interaction Design Foundation is the biggest design school globally.
Industry leaders such as IBM and Adobe train their teams with our courses, and universities such as MIT
and the University of Cambridge include our courses in their curricula. Our online courses are taught
by industry experts and cover the entire spectrum of UX design from beginner to advanced. We give
you industry-recognized course certificates to advance your career. Since 2002, we’ve put together the
world’s biggest and most authoritative library of open-source UX Design literature created by such
noted authors as Don Norman and Clayton Christensen.

Start Learning Today:

interaction-design.org
Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the
Interaction Design Foundation. Also, if you remix, transform, or build upon this template, you must distribute it under the same CC BY-SA license.