Principles of Color in UI Design & The 60 30 10 Rule

The first thing we see when we look at any UI design is its colors. Whether it’s a website design, a mobile app design, or even the screen of an ATM – one thing is clear: colors will always be the first ones that pop out. 

Believe it or not, 93% of us are influenced by these UI UX design visual factors when deciding to purchase any product. As users, we are so accustomed to seeing them that we often underestimate their power and influence over how we perceive things. But good UI UX designers will never fall into this trap because color is one of the first aspects they must consider during the design process. To make their job more efficient, they often choose to follow a set of predefined rules.

Surely, some creatives have a native talent for mixing and organizing shades. However, most of us will not risk going with our personal preferences when creating something that addresses our users’ needs. So, what are the principles of design that every one of us should follow when it comes to colors? A commonly used principle in the UI UX design world is the 60-30-10 rule.

‍

This interesting convention comes from the universe of color theory and serves as a means of achieving visual harmony. It is not exclusively used by digital designers - fashion and interior designers also follow it for guidance. The 60-30-10 rule is pretty straightforward – every color scheme should comprise three different colors in the following amounts:

• The 60%. In UI design, this is reserved for the dominant hue, which is a primary color in most cases. It will serve as the base shade of the design.
• The 30%. The secondary color is still somewhat visible. This is primarily reserved for elements such as the logo or medium components such as cards and carousels.
• The 10%. The accent color is used as a means of highlighting the design. For example, an accent hue can emphasize elements such as call-to-action buttons.

Countless psychology studies attest that each color invokes a distinct feeling inside the viewers. It is essential to remember that the symbolism and meaning of colors can vary based on which cultures we choose to analyze. Therefore, when we are designing a website or creating an app design, we have to research our target audience. Sometimes, even factors such as age, occupation, and gender can vastly influence how a user will interpret a certain color scheme. However, there are a few general traits that can be attributed to each color that we should be aware of:

• Red 

This bold color instantly captures the attention of the viewer. It is the brightest and hottest hue in the color wheel. While it is great for making an impact, we have to be careful to not abuse it when creating the user interface. Shades of red can become easily tiring to the eye. 

Red may be a great choice for a CTA button but a disastrous one for the background of a page. As far as symbolism goes, it evokes feelings of passion and energy but can also emulate anger. News outlets use this color quite a lot.

• Green

One of UI design’s greatest cliches is the use of green for subjects related to nature. It also inspires peace, safety, prosperity, and overall positive attributes. If you want to convey that your brand is environmentally conscious, green would be the safest pick.

Green is among the colors that have a calming effect - it could be of great use for somebody who wants to develop a wellness-related website or app. Put simply, 9 out of 10 times, people will associate green with nature.

• Blue

This is the color of trust. Hence, many UI UX designers choose shades of blue for companies related to banking and user data protection. Blue is also a calming color and is a great alternative for the website design for medical service providers. Depending on the tint of blue, it can be monotonous or communicate the feeling of sadness and longing to the users.

• Yellow

The color of happiness - yellow is striking and sets a positive tone for the design. One of its main associations is with the concept of youthfulness, making it appropriate for apps and websites targeted toward children. As a tip, we should avoid overusing yellow because it can easily become obnoxious due to its brightness.

• Purple

The most widespread symbolism of purple is creativity and luxury. Throughout history, purple was associated with royalty because purple dye was very inaccessible. The connotation of imaginativeness sends the message that a page will fall into the artsy side when its main theme is a shade of purple. Hence, this hue is a great pick for the UI UX design of websites related to arts, beauty, and fashion. On the other hand, a sports app would not benefit from purple-dominant visuals.

‍

We have now established that color theory is instrumental in UI UX design. Now, we should focus on learning how to apply these principles of design in our web and app design so that we can obtain visually spectacular pages that also take functionality into account.

Principles of Color in UI Design

1. Choosing The Primary Color

This is the basis of your UI UX design, as it covers most of it - 60%. It will set the tone and atmosphere for your page, so consider a few aspects before you pick one. When designing for brands, we must consider the brand identity. By respecting it, we can make sure that the brand message is conveyed.

Another important aspect that we have to consider during the design process is our target audience. For example, if our public mainly consists of Gen Z, we would strive to create dynamic and playful interfaces.  The final aspect we should pay attention to is our design goal. If we want our app design to convey a positive and joyful message, we will never select dark and bleak hues.

‍

2. Choosing The Secondary Color

The second color, which covers 30% of the user interface design, must complement the primary shade. We can use the color wheel to identify what colors match our first selection. Think about integrating complementary colors, such as red and green, into your designs.

An essential property that the secondary color has to possess is contrast. The shades we pick should be distinctive enough to avoid blending in. The secondary shade also supports the overall mood of the website. We use this color for design elements such as the brand logo, headings, icons, and subtitles. A great example of color theory use is in the design of the McDonald’s page - yellow perfectly complements the famous red background while conveying a youthful and energetic message. 

3. Choosing The Accent Color

The remaining 10% of the design acts as a pop of color. Similarly to the secondary element, we should keep contrast and mood in mind when we select the accent. Choosing the accent may be a little challenging because you already have to keep the other two colors in mind. Do not worry, there are countless sources of inspiration on the internet from which you can borrow ideas. This 10% is reserved to highlight elements such as call-to-action buttons and badges. 

We at uinkits understand the importance of inputs in great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.  

“You press the button, we do the rest,” – Kodak.

Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.

Our design system includes components, icons, variables, cards, buttons, and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!