An Intro to Color Theory

How to combine colors and set the mood of your designs

We’re able to see different colors because of our retina’s innate ability to differentiate frequencies of light waves.

Certain colors or shades evoke different sentiments in people. In this post, I want to give a quick introduction to color theory, ways to combine colors, and tools for designing with color — that you as a designer can benefit from to make your designs delightful.

Let’s start!

Different moods are attributed to different colors and you can use these different colors to achieve different ends.

  1. Red has been traditionally associated with Love, Energy, and Intensity. So a lot of car ads, or anything related to love are some shade of red.
  2. Yellow tends to be used for things to convey Joy, Attention, Intellect. Yellow is an incredibly attention-grabbing colour. However, yellow is not a good choice for the background of your app or as the main interface. Yellow can cause attention fatigue. It’s an excellent choice for app icon design or app screenshot design.
  3. Green has been associated with Freshness, Safety, and Growth. This is why you’ll see most nature, healthy food, related companies use green for their branding.
  4. Blue — Stability. Trust. Serenity. No surprise why both Facebook and Twitter are blue.
  5. Purple stands for royalty. Wealth. Feminity. Purple tends to be used for women-targeted products. And luxury products.

To see these theories in action, start analyzing advertisements. After all, ads are really well thought-out experiments in persuasion and manipulating human psychology.

Next time you see an ad, try to see what techniques or design principles they’re using to make their design look beautiful and what emotion they’re trying to evoke.

Choosing a color palette is not all about advertising and attention-grabbing, though. It’s also about selling your product and appealing to certain instincts or desires that people have.

So the next time you’re designing an app/website, the first thing to think about is what emotions you want to evoke and ideas you’re trying to convey to the user and pick a colour palette accordingly.

Read this to learn more.

How to combine colors to create color palettes

Now, of course you’re not going to use the same color everywhere in your app. You’re going to need combinations of color that go well with each other and are pleasant to look at.

To combine colors, artists and designers often use a tool called color wheel.

A color wheel.

There are a few ways you can use the science of color theory to combine different colors for your designs.

  1. Analogous Color Palette: For this combination, you pick up a color from the color wheel. Then you pick up a color adjacent to it. And you create a design using those colors. Analogous colors create a design that is harmonious and easy to look at.

2. Complementary Color Palette: For this combination, pick a color and a pick a color opposite to it on the color wheel. For example, the red and green here.

Complementary Color design is usually attention-grabbing and thus not so good for the main interface or the background of your app. Instead, use them for your app icon or the screenshots.

3. Split Colors: For this color combination, you pick up a color. And then pick up two colors that are adjacent to the opposite color.

They’re still attention grabbing but also pleasant to look at.

4. Triadic Color Palette : You pick up a color and draw an equilateral triangle. They tend to give a well-balanced feel.

This color palette is from the 90s, so it feels a little bit dated. A lot of fast-food chains from the era have their logos in the triadic color scheme.

5. Monochromatic Colours: They’re very modern and very much in vogue. Monochromatic designs look beautiful on modern smartphone screens. You simply pick up a single colour and combine it with either various amounts of white or various amounts of black to create different tones and shades that stand out from each other.

You can mix as much black or white to get the contrast that you want. These colour palettes tend to be incredibly contemporary and work very well for modern digital design.

Read this and this to learn even more.

Tools for designing with color

We covered a bit of theory behind how different colours can be combined to look pleasing to the eye and achieve certain effects.

There’s tons of online tools to use for finding a color palette or making your own. My most used tools are:

  1. Color Hunt. This is a place where professional designers go to curate their favorite color palettes. You can find Hot, Random, Popular palletes and depending on the mood of the color palette, you can find one for your particular project.
  2. Flat UI Colors. This website has 20 colors formulated to work especially well on the iOS platform. For Android, I’ve heard Material Palette is what developers use.
  3. ColorZilla. This is a super awesome chrome extension that finds out the HEX code of any colour on a website.

By using these tools, understanding the theory behind moods of color, and mixing and matching colors, you should be able to arrive at a color palette that is suitable for your app/website project. This will help make your product look appealing as well as to evoke a certain idea or emotion within your user.

This article was originally published on Harshita’s Medium page

Get started with Marvel Enterprise

Get started with Marvel Enterprise

From CEOs to marketing, get your entire organisation collaborating in one place.

Get started with Enterprise

16 y/o programmer and entrepreneur. Download my app, Crypto Price Tracker, here:

Related Posts

I often take my coffee at a place with a 3 stars rating on Google, but it serves one of the best coffees in the city. The reviews come from two people who had once a bad experience. And Google shows to everyone that it has 3/5 stars without saying that it is one the best places to have a… Read More →

Digital interfaces make a huge impact in our lives. We frequently use websites or digital applications to accomplish certain goals. Indeed, when interacting with an interface, we are surrounded by typography and our experience is driven by the words and messages we read and understand. In one of his articles, Oliver Reichenstein confirms the importance of typography in all websites… Read More →

It’s been a couple of weeks now, two, as I’m writing this, since I got the email. I’d had a super long day so I was lying down feeling sorry for myself when I saw this: Hi Viba, I came across your application and am impressed by your experience and design work. I work on hiring students for our Product… Read More →