Colors and UI: How to Use Color in UI Design

In UI design, how you use color is very important – from choosing which colors to use and how to apply it on your design.

That being said, color is not just a matter of personal preference. For instance, just because you’re favorite color is purple does not mean that you should apply it in a design where orange or yellow is probably a more fitting color. In short, there is a “proper method” in using color for your design. The question is: how? This article is just about that.

So, without further ado, let’s get started!

How to Choose Your Design’s Color: The Role of Color Psychology

As mentioned earlier, choosing and using color in UI design goes beyond a matter of personal preference. Like the example above, just because a particular color is your favorite color does not mean that it’s the color that you will use for your design. This importance of properly choosing which colors to use in your design mainly boils down to what is called color psychology.

Color psychology is the understanding between the relationship of color and human psychology. Simply put, each color evokes certain types of emotions, regardless if we recognize it or not. There is a reason why financial-related businesses such as PayPal uses blue as their primary color design, why Coca-Cola uses red in their branding, and why nature- or environment-related businesses uses green in their design (this one is easy to see why!)

In a nutshell, here are the basic colors of color psychology and the emotions that are related to them:

• Red – power, passion, love, excitement, aggression and danger. Red also tends to stimulate appetite which is why food brands like Coca-Cola use red in their branding.
• Blue – security, stability, dependability and peace
• Yellow – friendliness, warmth and optimism
• Orange – enthusiasm, adventure and creativity
• Green – growth, fertility, health and nature
• Purple – royalty, nobility and wisdom
• Black – sophistication, power and luxury
• White – Simplicity and purity
• Grey – balances the emotions of both black and white

We actually wrote an article regarding the subject of color psychology. If you want to know, please read our article, How to Apply Color Psychology in UI Design.

However, while color psychology plays a large role in which color to apply to your design, there are other things that you need to consider when using color to your design.

Color Combination: How to Use Color Combination In Your Design

Of course, you will not use a single color throughout your entire design. Mostly, you will use around two to three main colors for your design. But if you’ve picked your primary color, what should be your second (and maybe, third) color for that matter? The answer lies in proper color combination.

Color combination is very important simply because some designs require that you use two or more colors. This explains why some designs run with red and yellow, orange and blue, and so on.

That being said, the colors used are not just picked randomly. How you’ll combine your colors mainly depends on the relationship of colors to one another (what is simply called “color relationship”). Here are the 3 color relationships that you can apply to your design: Monochromatic Relationship Colors that are shade or tint variations of the same hue.

• Monochromatic Colors – these colors belong to the same hue. They simply vary in their shades and tints.
• Analogous Colors – these are colors that are adjacent to each other in the color wheel. Analogous colors work best if you want to work with different brightness in your design.
• Complementary Colors – these are colors that are across at each other in the color wheel. Take for example orange. If you look at the color wheel, you will see the blue is the color that’s across it in the color wheel. Therefore, blue is the complementary color of orange. Complementary colors work best if you want to use both “warm” and “cold” colors in your design.

Color Balance: The 60-30-10 Rule

Finally, it is important to know how to apply balance into your color design. Perhaps, you’ve chosen a color that’s fitting the personality of your design. Together with that, you’re able to select the proper color combination for your design. However, if you don’t have balance to your color scheme, your design will look like a colorful mess to your users.

The most common way to apply balance to your design is the 60-30-10 Rule. This rule simply states that your colors should be applied in the proportion of 6:3:1 or 60%-30%-10%.

Of course, the 60% goes to your primary color. Then, the 30% goes to your secondary color. Finally, the 10% goes to the color that will balance out the accents of the entire color scheme.

Once you achieved balance, this will be pleasant to the human eye. Therefore, you should consider it when working on your design’s color scheme.

Final Thoughts

As mentioned earlier, using color in design is not just a matter of personal preference. It is important that you carefully decide which colors to use and how to apply them onto your design.

Of course, these are not the only ones that you need to consider when working with your design’s color, but these principles are a good way to get started into working on your color and color schemes.