Literature on Color Theory

Here's the entire UX literature on Color Theory by the Interaction Design Foundation, collated in one place:

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.

Author/Copyright holder: Maximkaaa. Copyright terms and licence: Public Domain

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.

Author/Copyright holder: Unknown. Copyright terms and licence: Unknown

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.

Where To Learn More

Canva's Color Wheel: Check what colors look good together!
The 10 commandments of color theory. Check your knowledge!
Color Theory For Designers, Part 2: Understanding Concepts And Terminology.
Stone, T. L. (2008). Colour Design Workbook: A Real World Guide to Using Colour in Graphic Design. Rockport: Rockport Publishers.
Bleicher, S. (2011). Contemporary Colour: Theory and use. United States: Cengage Learning.

Reference

Hero Image: Author/Copyright holder: George Field. Copyright terms and licence: Public Domain.

Learn more about Color Theory

Take a deep dive into Color Theory with our course Visual Design: The Ultimate Guide .

In this course, you will gain a holistic understanding of visual design and increase your knowledge of visual principles, color theory, typography, grid systems and history. You’ll also learn why visual design is so important, how history influences the present, and practical applications to improve your own work. These insights will help you to achieve the best possible user experience.

In the first lesson, you’ll learn the difference between visual design elements and visual design principles. You’ll also learn how to effectively use visual design elements and principles by deconstructing several well-known designs.

In the second lesson, you’ll learn about the science and importance of color. You’ll gain a better understanding of color modes, color schemes and color systems. You’ll also learn how to confidently use color by understanding its cultural symbolism and context of use.

In the third lesson, you’ll learn best practices for designing with type and how to effectively use type for communication. We’ll provide you with a basic understanding of the anatomy of type, type classifications, type styles and typographic terms. You’ll also learn practical tips for selecting a typeface, when to mix typefaces and how to talk type with fellow designers.

In the final lesson, you’ll learn about grid systems and their importance in providing structure within design. You’ll also learn about the types of grid systems and how to effectively use grids to improve your work.

You’ll be taught by some of the world’s leading experts. The experts we’ve handpicked for you are the Vignelli Distinguished Professor of Design Emeritus at RIT R. Roger Remington, author of “American Modernism: Graphic Design, 1920 to 1960”; Co-founder of The Book Doctors Arielle Eckstut and leading color consultant Joann Eckstut, co-authors of “What Is Color?” and “The Secret Language of Color”; Award-winning designer and educator Mia Cinelli, TEDx speaker of “The Power of Typography”; Betty Cooke and William O. Steinmetz Design Chair at MICA Ellen Lupton, author of “Thinking with Type”; Chair of the Graphic + Interactive communication department at the Ringling School of Art and Design Kimberly Elam, author of "Grid Systems: Principles of Organizing Type.”

Throughout the course, we’ll supply you with lots of templates and step-by-step guides so you can go right out and use what you learn in your everyday practice.

In the “Build Your Portfolio Project: Redesign,” you’ll find a series of fun exercises that build upon one another and cover the visual design topics discussed. If you want to complete these optional exercises, you will get hands-on experience with the methods you learn and in the process you’ll create a case study for your portfolio which you can show your future employer or freelance customers.

You can also learn with your fellow course-takers and use the discussion forums to get feedback and inspire other people who are learning alongside you. You and your fellow course-takers have a huge knowledge and experience base between you, so we think you should take advantage of it whenever possible.

You earn a verifiable and industry-trusted Course Certificate once you’ve completed the course. You can highlight it on your resume, your LinkedIn profile or your website.

All open-source articles on Color Theory

Dressing Up Your UI with Colors That Fit

As designers, we have a powerful ally in color. It can let us work towards a number of different goals. You can use it t

836 shares
4 years ago

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

1.1k shares
4 years ago

The Key Elements & Principles of Visual Design

Visual design is about creating and making the general aesthetics of a product consistent. To create the aesthetic style

1.3k shares
1 mth ago

UI Color Palette 2025: Best Practices, Tips, and Tricks for Designers

Color is vital in user interface (UI) design because not only does it enhance the aesthetics on screens, but it shapes t

1.1k shares
3 mths ago

Everything You Need To Know About Triadic Colors

Here’s a handy statistic that’s worth remembering: over 60% of people accept or reject new products based on color, and

1k shares
3 mths ago

Complementary Colors: The Ultimate Guide in 2025

Part of the magic of how colors work together in impressive designs lies in the art of color selection. Designers often

900 shares
3 mths ago

Learn the Role of Perception and Memory in HCI and UX

Have you ever wondered how your brain makes sense of the world? It's a fascinating process! If you want to design helpfu

550 shares
3 mths ago

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Color Theory

What is Color Theory?

Color is in the Beholders’ Eyes

What Are Hue, Value and Saturation?

Use a Color Scheme and Color Temperature for Design Harmony

Use Color Theory to Match What Your Users Want to See

Learn More about Color Theory

Questions related to Color Theory

Earn a Gift, Answer a Short Quiz!

Question 1

Question 2

Question 3

Try Again! IxDF Cheers For You!

Congratulations! You Did Amazing

Check Your Inbox

Literature on Color Theory

Learn more about Color Theory

All open-source articles on Color Theory

Dressing Up Your UI with Colors That Fit

Recalling Color Theory Keywords: a way to refresh your memories!

The Key Elements & Principles of Visual Design

UI Color Palette 2025: Best Practices, Tips, and Tricks for Designers

Everything You Need To Know About Triadic Colors

Complementary Colors: The Ultimate Guide in 2025

Learn the Role of Perception and Memory in HCI and UX

Open Access—Link to us!

Popular related searches

Filters

Privacy Settings

Security

Enhanced Functionality

Referral Program

Error Reporting

Analytics Storage

Google

Advertising Storage

Personalization Storage

Advertising Personalization

User Data

Meta Pixel

Meta CAPI

LinkedIn Insights

LinkedIn CAPI

Google Ads Tag