Color is one of the most powerful tools in the designer’s toolkit. It should be no surprise that different colors evoke different emotions and draw users attention. But if you ever tried to design a new project, you know how difficult is to decide on a color scheme that works well for it.

To get you started, I’ve compiled a quick reference guide that covers the basics colors theory and how they relate to UX design. This article is not meant to be a comprehensive guide of how to apply color to your design, but rather, it’s an overview for color theory within the context of UI and UX design project.

Color Theory

Color theory actually covers a number of things, but at the very basic level it’s the interaction of colors in a design through complementation, contrast and vibrancy:

Complementation refers to the way we see colors in terms of their relationships with other colors. Choosing colors on opposite ends of the spectrum creates a visual harmony for the eyes. There are two common uses of complementation: the triadic and compound color scheme that we’ll discuss below.
Contrast reduces eyestrain and focuses user attention by clearly dividing elements on a screen. A high contrast between elements makes text easily readable, and guides your reader’s attention. The most apparent example of contrast is an effective selection of background and text color, as you’ll see below.
Vibrancy is an emotional implications of color. This topic was fully covered in article Create Emotion With Color In UX Design.

Color Wheel

A color wheel or color circle is an illustrative organization of color hues around a circle. Every shade of color has a set opposite and you can use the color wheel to find each specific color’s opposite.

Image credit: artsconnected

This color wheel also shows the primary colors, secondary colors, and the tertiary colors. *Primary colors* (red, yellow, and blue) can be mixed to create *secondary colors* (orange, green, and purple). White can be added to a color to create *tints*, and black can be added to create *shades*.

Create an Effective Color Scheme

Here are 3 of the commonly accepted structures for a good color scheme: triadic, compound, and analogous:

Triadic. The triadic is the most basic and balanced of the three structures. It composed of 3 colors on separate ends of the color spectrum. There is a very easy way to create a triadic color scheme: take a color wheel, choose your base color and draw an equilateral triangle from this point. The three points of the triangle will form your tri-color scheme.

Red, yellow and blue colors located 120 degrees from each other. They can be used for triadic color scheme. Image credit: tuts+

By using an equilateral triangle, you can ensure the colors have equal vibrancy and compliment each other properly.

Compound. Colors that are opposite each other on the wheel are complementary. They contrast strongly, and they can be used to attract the viewer’s attention.

Image credit: tuts+

For example, red’s complement is green. Take a look at the missed call notification example in Apple iOS. The complementary color scheme immediately focus user attention on important event. ![](/content/images/2016/07/1-OjNfcCT96VSmWeV6tu68ew.jpeg)

Analogous. Colors that are next to each other in the wheel are analogous. They can be used to create a sense of harmony and continuity in a design. While this scheme is relatively easy to pull off, the trick is in deciding which vibrancy of color to use, as it will be exaggerated. An analogous color scheme is based on a careful selection of colors in the same area of the color spectrum.

Shades yellow and orange is an example of an analogous color scheme. Image credit: tuts+

A gesture-driven task manager app Clear use analogous colors to *visually prioritize* important tasks and highlight the most critical ones (the topmost items will be the boldest in color, while items lower on the list will be lighter and more subtle). ![](/content/images/2016/07/1-1KKhHrF-XE01sfyzmrLDTw.png)

Clear for iOS

Analogous color scheme can be used to create the right moods and atmosphere for your app or site. For example, a meditation app Calm uses the analogous colors blue and green to help users feel relaxed and peaceful. ![](/content/images/2016/07/1-Tm0nkWNmJvPU9-liGZcqYw.png)

Light blue is the color of the sky and of water, which can be refreshing, free, and calm. Green color is associated with health.

The best way to learn to create beautiful color schemes is to practice. You can use automated tools to do this at first. A tool developed by Adobe, [Color CC](https://color.adobe.com) is aimed at providing an intuitive way to create a color palette. Tool has a very intuitive interface, so every color on the palette can be individually modified and a final palette can be saved with a few simple clicks. ![](/content/images/2016/07/1-QwRD0_OQWx8t7kep-Yo7Vg.png)

Adobe Color CC (previously known as Kuler) is a great tool for color scheme creation.

##Colors In Text When you’re using colors in text, be aware that placing two colors with low value contrast next to each other can make your copy very difficult to read (whether they are complementary or analogous colors). This is especially true on mobile screens, where users are more likely to be outdoors and have glare on a screen. ![](/content/images/2016/07/1-YaITIxoBpJUInZUbwN3q9w.png)

Top: A lack of contrast between text and its background will drive your users insane. Their eyes don’t know which color to focus on. Bottom: higher-contrast text is much more readable.

[WC3’s Web Content Accessibility Guidelines](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) are a good place to start. They set minimum standards for contrast so that users with moderately low vision can read your text. According to the WC3, the contrast ratio between a color and its background ranges from 1–21 based on its luminance, or intensity of light emitted. The W3C recommends the following contrast ratios for body text and image text:

Small text should have a contrast ratio of at least 4.5:1 against its background.
Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

Left: These lines of text do not meet the color contrast ratio recommendations and are difficult to read against their background colors. Image credit: Material Design

Once you’ve made your color choice, it’s absolutely necessary to test it out with real users on most devices. If any of the test show a problem with reading your copy, then you can be sure that your users’ll have exactly the same problem.

The Impact of Color on Conversion Rates

Color theory in UI design is more than just a visual decoration, it can have game-changing effects on your business. For this section we’ll focus on CTA buttons.

A call-to-action button is a collection of 4 things: placement, shape, copy and color. If these 4 aspects are in line with each other, you’ll have a great call-to-action button. Button color is one of the longest standing debates in the world of conversion and optimization. There are plenty of A/B test results that show how a change in the color of a CTA button made a drastic impact on signups. For example, HubSpot shared a famous button color test:

Performable’s A and B versions of the button color test. Everything else on the pages was the same, so it was only the button color that made this difference.

Even though they originally predicted the green button would perform better, the red button resulted in 21% more clicks.

However, it’s impossible to generalize these results to all situations. There is simply no a magical color that consistently performs best for all sites or apps. Thus, you should always test colors on your page and with your audience to see what happens.

Contrast is a Key

If you want users to click something, make it stand out. If your site or app uses a lot of blue, users probably won’t notice a blue button right away, just like a light button won’t stand out against a light background. Users much more likely to click a CTA button that strongly contrasted with the background.

Using a variety of contrasting colors can help focus the viewer’s attention on specific page elements (like CTA).

Conclusion

A basic understanding of color usage is a solid prerequisite for web and app design. What we’ve just discussed are just the fundamentals of how color theory can enhance your UI design, but there’s no limit to how in-depth you can go with colors in your app. No matter what colors you choose, they have a definite influence on the design as a whole — from communicating contrast or similarity, to evoking precise emotions.

Thank you!