17 Apr 2018

How to Use Colors in UI Design

Color is as powerful as language. It can speak and deliver a certain message to your audience. Besides aesthetics, colors are the creators of emotions and associations. It sets the basic tone, mood, and connotation of a brand or product. Whenever you encounter a website or product, it’s the visual appearance that steals your heart at the very first look, which largely depends on color. According to Kissmetrics, a visual appearance of a product often becomes the key factor that influence consumers purchasing decisions.

That’s why we need to choose the right color for the user interface (UI) design of our product or website. However, the process of colors selection is more complicated than it seems. Worry not, we’ve already listed a few tips to help you use the right choice of colors for your UI design.

What is design sprint? What is the goal?

According to the Google’s Design Sprint Kit official page, a design sprint is a five-phase framework that helps answer critical business questions through rapid prototyping and user testing. It’s basically a way to solve design problems quickly usually within 5 days. The aim is to encourage user-centered thinking, spark innovation, and align your team under the same vision. This way, you’ll get to launch product faster.

The golden 60-30-10 rule

This rule is often used by interior designers. But we you also implement it in your UI design. The 60-30-10 rule refers to an ideal proportion that is meant to reach balance among colors. According to Prototypr, 60% is your dominant hue 30% is the secondary color, and 10% is for accent color. This formula allows the eyes to move comfortably from one point to the next.

To match the 60-30-10 rule, it’s better if we only use maximum three colors. It will help us avoid chaos and keep our color scheme in balance. We’ll be able to create a neat, harmonious interface that makes our users pleased.

The important of the blue color

Take a look at some of the most commonly used sites or apps such as Facebook, Twitter, and Microsoft. They all have one thing in common: various kinds of blue.

It’s actually not that surprising because according to uxdesign.cc, research says that blue is the number one color that men and women both like. Blue can help you gain your user’s trust. If you’re having a hard time choosing which color to use, or maybe you have no better choice, just use blue in your UI design.

Black and white to create an elegant look

Now that you know that blue is the safe color for any designs, does this mean you should always use blue?

Of course not. If you want to make your website look elegant, black and white are the colors to go. Of all the neutral colors, black is the strongest you can pick. Meanwhile, white is often used as a background color. That’s why this color scheme is often used in websites. Combine these two colors and you’ll have the greatest level of color contrast. White space can create a sense of freedom, and black can make your website look sophisticated.

The colors variations

One of the most important keys when it comes to colors in UI design is the variation. You can use only one color for your UI design, but you need to make some variations out of it. If you take some time to visit some of the great-looking interfaces out there, you’ll notice that they often use darker and lighter variations for a particular theme color.

There’s one rule you need to know if you want to use this variation. Uxdesign.cc says that darker color variations are made by lowering brightness and increasing saturation, while brighter color variations are made by increasing brightness and lowering saturation. With this rule, you’ll be able to create amazing things with your UI design even if you only use a single color.


The colors used in your UI design should be eye-friendly. We hope that tips mentioned above can help you find the right colors and create stunning color schemes for your UI design that will bring pleasure to your customers.