Colors in UI Design — Theory, Psychology & Practice

Dalsukh Tapaniya
May 26, 2019 · 7 min read
Image for post
Image for post
Photo by George Becker from iconscout

We all are surrounded by colors 24/7. We see things and with every color we see we get different emotions. Colors affect us mentally and physically in many ways. To raise blood pressure, a strong red color has been shown, while a blue color has a calming effect.

Color is the easiest and most important aspect of engaging the user with the product in Design. Many people believe that choosing colors for the UI depends mostly on the taste and sense of beauty of the designer. The color selection process, however, is more complicated than it appears and plays an important role in the design.

You can set a mood with colors, draw attention, or make a statement. To energize or cool down, you can use color. You can create an atmosphere of elegance, warmth or tranquility by choosing the right color scheme, or you can convey an image of playful youthfulness.

The choice of color is based on some color psychology and theory. So let’s begin with the psychology of color.

Color Psychology

The color preference between men and women is different. It also varies with age groups.

According to Joe Hallock’s study, there is a significant difference in the choice of color between genders. The study was carried out for the colors that were most favorable and less favorable.

Image for post
Image for post
Color preference of men and women

As we can see, the blue color is significantly favored by both men and women, and Brown is the least liked color.

Let’s understand it with a demo app

Therefore, the goal is to design an app to manage the expenses and the target audience is male and female. Let’s assume that a designer, who’s a beginner and doesn’t know more about color’s, chooses Brown as the primary color for the app because brown is his favorite color. The result would be as follows:

Image for post
Image for post
Expense Manager Demo App

We can clearly see that the design is good enough, but due to color selection, the app may not work. So, what can we do to improve it? Later in this article, we’ll see what we can do with just a change of color.

The meaning of colors comes in. Designers need to understand what colors mean and what reaction they evoke in order to convey the right tone, message and call users to do the expected action. Each color has its own influence on our mind, and knowledge of possible reactions can assist designers in transferring the right message and calling users to take action.

You need to know the meaning of colors if you’re a designer reading this. So let’s shorten it. (The meaning of color can be read in detail here: http://www.color-wheel-pro.com/color-meaning.html)

Color Theory

In interface design, there are a lot of colors to use. The first thing that comes to mind when we talk about colors is Color Wheel.

Image for post
Image for post
Famous Color Wheel

Now, another important topic is how colors can be combined. There are several ways to combine colors, but warm and cool colors must be balanced. Here are various ways of combining color:

Image for post
Image for post

There are 3 important color things that every designer should know when talking about colors: Hue, Value & Saturation. This was described so well by Christian Vizcarra, so I tried to implement it on my own.

Hue

Hue is the color in the natural state. Blue, yellow, green, red, and so on. Without any light and dark variation. Basically, colors that appear in the wheel of color without any other light and shadow alterations. See Image:

Image for post
Image for post

Value

Value in color is the amount of light and darkness color has. Nature, for instance. We see in everyday life that in the morning and at night some elements have a different color. Tree and mountains, for example, have lighter morning tone and darker tones as the day pass due to less light.

Image for post
Image for post
Photo by Nextvoyage from iconscout

We see things closer to light with white tones and other things that are in the background with more darkness.

The value plays a significant role in UI Design. We can get a good contrast if we use it well.

If any color has the 100% value it results in white color. When a color has the 0% value it results in black color. See Image:

Image for post
Image for post
Color with Value

Saturation

Saturation is the intensity of the color. when we saturate a color, we have more intense and vivid color. When we desaturate color, we have a dull color.

Image for post
Image for post
Color Saturation

Before we use saturation in design, we need to know what we are designing for printing or digital purposes. In printing material, we can’t use more saturation because CMYK is used and there are limitations.

Color in User Interface Design

Golden Ratio — 6:3:1 Rule

The principle of 60 percent + 30 percent + 10 percent is the best proportion to achieve color balance. We have to choose a dominant color and use it in 60% of the space, a secondary color in 30% and a final color in the remaining 10%. It can ease the eye of users to move from one point to the next comfortably.

Image for post
Image for post
Color Palette using 6:3:1 rule

Shadows in UI

Shadows are never black. Shadow is the object’s color tone shaded by the value tones. See the picture for reference below.

Image for post
Image for post
Photo by Brigitte Tohm from iconscout

Cherry’s shadow is dark red, it looks almost black, but it’s not black. Look at the flower shadow, the plate, the waffle. Depending on light and darkness, you can see the amount of shadow.

What common mistake we all make in UI design is, we think we need a black color with opacity to make a shadow.

Image for post
Image for post
Shadow in UI element

Color in Typography

Most of the UI is white nowadays, all focus on making the interface as minimal as possible. So Typography is another important element.

Image for post
Image for post

The text color on the left side is black (# 000000) and the one on the right side also looks black, but it’s dark blue (# 181441). This plays a major role when the interface is mostly white. How do you do it? See the below picture.

Image for post
Image for post
Both color with same opacity

After applying the same opacity to both texts, we can see the difference. Clearly, the result is different. One of them is gray, the other blue-gray. Using text with a certain tone of color will have a noticeable impact on the UI. See the image below.

Image for post
Image for post

So, using black and gray is bad? Nope. People frequently use the word “With black everything is cool” So it’s up to the individual. But the color tone comes when we use it. Better contrast and harmony can be achieved.

Let’s get back to our Expense Manager App

If we go with green color, the app should look better after these things. Because we need to show strong emotion for money and growth in this app, and the green color describes money and the financial world, both men and women like green as well.

The outcome after all these things have been taken care of:

Image for post
Image for post

Looks better than before? No? Hopefully yes. As we can see, we can design an effective user interface if we focus on some small things about colors.

Thank you for taking this time to read. Give claps if you liked it. I’d love to hear your feedback and suggestions.

Get in touch with me on Instagram, Twitter, Dribbble

Iconscout - Design Assets Marketplace

Iconscout is India’s first digital resource marketplace.

Dalsukh Tapaniya

Written by

Thinker. Creator. Designer.

Iconscout - Design Assets Marketplace

Iconscout is India’s first digital resource marketplace. Powered by community of passionate creative artist, Iconscout offers ready to user high-quality design resources like Icons, Illustrations and Stock photos.

Dalsukh Tapaniya

Written by

Thinker. Creator. Designer.

Iconscout - Design Assets Marketplace

Iconscout is India’s first digital resource marketplace. Powered by community of passionate creative artist, Iconscout offers ready to user high-quality design resources like Icons, Illustrations and Stock photos.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store