DEV Community

Cover image for A cool way of Coloring in UI Design
Mursal Furqan Kumbhar
Mursal Furqan Kumbhar

Posted on

A cool way of Coloring in UI Design

Well, applying color to our interfaces can become a very complicated task. In this post, I am sharing some quick tips to learn how you can make an easy (beautifully) by applying the 60-30-10 technique.

Let's Start...

Step 1: Set your main color!

Create a new shape and select the color of your preference. It can be the main color of your product. Here, let's say, Hex Color Value: #4864E6.

Step 2: Let's set a secondary!

Duplicate the main color and change mode to HSB in your picker. Wondering how? Easy. Set the S (Saturation) value between 5-10 points and B (Brightness) value between 95-100 points and set.
So if your primary color's HSB values are 230:69:90, let's make 'em 230:5:100.

Step 2's visual representation

Step 3: Now let's set an accent!

Duplicate again the main color. Increase or decrease the H (Hue) value by 30-40 points and increase the B (Brightness) value by 5-10 points. So if your primary color's HSB Values are 230:69:90m let's make 'em 190:69:95.

Step 3

Step 4: Now we have a cool three-color scheme!

Let's apply them based on the 60/30.10 rule (from interior design), distribute the percentage for each color. So, if we talk in numbers, you can distribute the colors in the following distributions:

  • Main/Primary Color: 60%
  • Secondary Color: 30%
  • Accent: 10%

Step 4

Step 5: Distribute the colors in your layout. Here, I am sharing the almost best way to distribute these colors among your layout elements. You can refer to the following few lines:

  • 60% of your primary/main color: Backgrounds, main elements
  • 30% of your secondary color: For 2nd level elements, i.e. texts, icons, etc.
  • 10% of your accent color: For CTAs (Call To Actions) and access touches.

Step 5

Step 6: Now since you have a perfect balance, you can play around with the variations using the same colors. And believe me, it will work perfectly fine. 😍😍😍

Step 6

With this scheme, you can create analogous color palettes, along with a tint of greater harmony. This way your designs will look soft and fresh (and without horrible colors)

Top comments (1)

dmondev profile image

This is very cool and easy!!

Do you have other references for this method of defining/applying colors, if someone want to look into the theory behind it ?

Thanks !!