A Brief. Intro to Color Theory!

So you’re building a great app with cool features. You made it through some bugs you squashed and have an idea of some type of layout. Great! Now you’re ready to design. Where do you start?

Think about what your app is trying to convey. Is it an informative app? Is it a fun, high fashion app? Is it a medical app? How serious is the theme of your app? What is your personality and how will that come through in your app? How do you want users to feel when they use your app? Color plays such an important role when it comes user interaction and reception of an app.

Think about choosing a book to read. You don’t really know what’s inside. While it might be fine to just pick up a book and read it, most people look at the cover or read the back before actually deciding to read that book. It can be a little stressful to think about a color scheme before or while designing your app. A little intro to color theory can help.

Let’s look at the color wheel. You may have seen this before. It’s a tool that many designers, artists, and color theorists use as a reference. It shows the relation of colors next to and against each other. Primary colors are yellow, blue, and red. They are primary because these colors cannot be mixed by others to be created. Let’s look at a few of these relationships.

Complementary Colors

Complementary colors are those that are opposite from each other on the color wheel. The main complementary colors are red and green, yellow and purple, and blue and orange. When used together, they create contrast and tension. You can use different shades of complementary colors to create a more subtle effect. For example, you can use a bright blue but use a dull orange instead of bright orange to make a lighter feel for the user. Visme.co has a number of great references for basic web apps with color. Here is an example of complementary colors in blue and orange working together:

Here is an example of yellow and purple working together in a site:

Analogous Colors

Analogous colors are colors that are right next to each other on the color wheel. Usually they are grouped in colors of three or more. For example, orange, orange-yellow, and yellow are analogous. Violet, blue-violet, and blue are also analogous. When used together, these colors can create a sophisticated vibe for the user, or set the tone for either a calming or tense feel. Here’s an example of a calm feel:

or for a darker feel:

Warm Colors

What if you were doing an app where you wanted more warm and cozy feel? Then you can choose warm colors. Think analogous colors but only with the lighter colors on the wheel. Colors that are warm generally have tones of red, yellow, and orange in them. They tend to look closer than farther away. Colors that are earthy or associated with the fall season are also tend to be warm. Here are some examples of warm tones:

Cool Colors

Cool colors are what they sound like, not warm! They tend to use blue, violet, and green from the color wheel. These colors are more soothing and calm. They don’t necessarily mean darker — they tend to be colors that are absent of tones of red, yellow, orange. Here’s an example of cool colors:

Monochromatic

A monochromatic palette has one main color. Think about an image you saw that used only shades of blue or only shades red. These types of images are monochromatic. The following web app only has different shades of green:

Takeaway

Keeping color theory in mind is useful when you want to attract users visually to your app. Once you’re clear on your idea, and the message you want to send to your users, you can pick a color scheme to set a tone that matches your message. Then you can have fun focusing on just design!