Colors in UI Design — Theory, Psychology & Practice

Photo by George Becker from iconscout

Color Psychology

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

Color preference of men and women

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:

Expense Manager Demo App

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.

Famous Color Wheel


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:


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.

Photo by Nextvoyage from iconscout
Color with Value


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.

Color Saturation

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.

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.

Photo by Brigitte Tohm from iconscout
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.

Both color with same opacity



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.

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