60%

NEUTRAL

30%

PRIMARY

10%

ACCENT
priority_high Light mode is pre-set. To try dark themes, edit the Neutral value with a darker color

Color Hex Delete Select

Paleta Neutral Primary Accent Delete Select

Template

Check out the preview of the application of colors in the template.

Welcome!

60|30|10 rule

How do you usually organize color palettes within the digital products you are involved? It is quite common, especially when we are starting out in the area, not to distribute as ideal colors in the elements and components that will be present in the interfaces, such as texts, illustrations and buttons. All of this must be designed in such a way that all product pages have the very evident identity, and that they remain harmonious.

There are several techniques and methods for working with colors, and one of them is the 60-30-10 Rule which helps to correctly divide the color composition in an interface. Despite of being a technique that is present mainly in architecture and interior design, which are areas that do not work with digital products, such as websites and apps, it is still possible to use this rule when building interfaces, since we use colors to highlight or not different elements.

Image 1
Product 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image 2
Product 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image 3
Product 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Understanding the rule

First of all, you need to understand that “60-30-10” are a percentage, defining which colors will have more presence within a page. These values ​​are, in a way, imaginary, as they are not we can have an idea if we are actually using, for example, 60% of a color in an interface, but the definition of them, in these values ​​and order respectively, serve to understand the magnitude that a color will be present. From this, each of these percentages means the following:

  • 60% is the dominant color, which will have more presence within the interfaces.
  • 30% is the secondary color, which will serve as a contrast to the accent color, and bring harmony.
  • 10% is the accent color, which is commonly the brand color, being directed to the elements that deserve to be highlighted, such as buttons, links and icons.

Now you may have a very understandable question:

... e as outras cores na interface? ...

We have texts in dark and light gray, cards also in gray, images with different colors. In fact, In most cases, an interface will rarely have just three colors, but within this process, there is no need to list, literally, all the colors that will be used, as There may be several variations of the same color, as happens with the texts themselves, or even with the interaction carried out with the cursor in some components, and in relation to the images, however Although it is interesting to follow a visual identity standard, this is an element in which there is no need to account for colors.

You will notice, by applying and analyzing products, that the most common dominant colors, in most In some cases, it will be the website's background color, which is commonly white, light gray, and sometimes black or dark gray on products that have night mode. We call it primary in this case, as it is the color that we will see most throughout the pages, and because it is the main factor of contrast and harmony with the others that are on this one.

Application

As I already mentioned, you have the brand color, and with that you have a basis for coloring different elements and components, giving the necessary highlights. Next, the process is to test colors that will complement the interface, and bring the ideal contrast, without taking away the focus that the 10% should have.

The trend of “light” and “dark” mode has already become something extremely natural in the vast majority of products, so following this standard for the interfaces you are designing can be very assertive.

Now that you understand how it works, knowing how to apply it becomes much easier. Imagine that you is in the wireframing stage, still building those sketches in low or medium fidelity, without any identity color applied to your constructions. This is when you will use the 60-30-10 to perfectly balance and bring harmony to the pages.

Source: Alura | Regra 60-30-10 em UI Design

The App

In the following video I explain the objective of this project and show the development of the application. Portuguese only

Stay with us!

Forgot password?