Looking for inspiration and how to design UI is hard enough. But it is very difficult to find a great color palette that is appealing to the eye and also applied correctly in the UI. The easiest way to make sure that there is harmony and balance with the colors in your user interface is by using the 60-30-10 color rule.
The more colors we have available, the more options and decisions we need to make to make the look and feel of the UI. I like this rule because it reduces the colors necessary to create the application leaving unnecessary colors out.
Applying the 60-30-10 Rule
The 60-30-10 rule comes from Interior Design and it explains that 60% of the space should be taken by a dominant color, 30% for the secondary color, and 10% as the accent color (Grimley & Smith, 2022).
Let’s say that we have a mobile app for a barber shop chain named HairCuts. Thus, to this app, we are going to apply the 60-30-10 rule for the colors. The following screen is the wireframe that we are going to modify.
The first thing to take into consideration is that the 60-30-10 rule is not set on stone. It is an approximation of how much color you can use for your design. It does not mean that you need to use exactly 60% for the primary color while 30% must use the secondary color. This is for you to have an idea of how much color and how to implement the palette in your UI.
Now, assume that we get the following colors to use in the app because those are the colors used by the brand.
In this example, 60% will be #EDF2F4, 30%: #343434, and 10%: #EF233C. As shown in the following image, the 10% color is used to provide accent in the screen.
These colors might look too similar to the low fidelity ones. Thus, let’s create three more versions with different color palettes just for practice.
Example 2
Example 3
Example 4
Test, Test, and Test Again!
Just by using this technique, you cannot claim that you are finished. Make sure that you test all your colors and ensure that they are accessible and legible. If the contrast between fore and background colors is not high enough, you must find a shade of those colors that does it. Some of the previous examples might need some work in terms of contrast ratio and it is always necessary to test that all the colors are accessible and the content is readable.
Reference
Grimley, C., Harris Smith, K. (2022). Universal Principles of Interior Design: 100 Ways to Develop Innovative Ideas, Enhance Usability, and Design Effective Solutions. United States: Rockport Publishers.
