The 60-30-10 color rule usually applies to interior design. But you can also use it for user interface design. The 60% + 30% + 60% rule is applied to achieve an ideal ratio for color balance. Generally, 60% stands for the neutral or dominant color, where the design’s base color will be used. Afterward, 30% is a supplementary color. It is still in use for medium components like cards, carousels, and others. Last, the final color in 10% is the accent color. This area will serve as the design’s focal point, such as CTA buttons, pop-ups, and other essential interface elements.
Tips and tricks to choose colors in 60-30-10 rule
Before applying the 60-30-10 rule to your design, you must define the colors you want to use. Here are some tips and tricks for choosing the right color in your UI design:
- First, grayscale. You will waste a lot of time by using colors too early. You better focus on spacing and laying out elements first.
- Contrast the text. Make the text more in contrast with the background to make it easier to read.
- Don’t use pure gray or black. Add some saturation to make it more realistic. Pure gray colors are uncommon in real life.
- Use color generations. They will make it easier for you to find a well-balanced color scheme.
- Psychology. Pay attention to color psychology, especially when you make your brand identity. Colors can determine your users’ perception, mood, and behavior, so it’s important to decide what mood you want to set them in.
[Recommended Read:] How to Use Colors in UI Design
Here is how to apply the 60-30-10 rules
Ayobami Adelugba from Tealfeed gave an example of how to apply the 60-30-10 rule in UI design.
- First, you must set the color ratio based on the existing palette. If you have white, blue, and green on your color palette, you can choose white (#ffffff) for the dominating color or 60%, along with blue (#191645) for the secondary and green (#43C6AC) for the accent.
- Second, you must remove the elements before coloring your design. Remove the name of the user, picture, and date, as they weren’t helpful in the context of the screen.
- Then, start to analyze the elements and which color each would take. The color of the cards and the screen background will remain white, as white is the dominant color.
- If you have the big card on your design, use the second color or, in this case, use blue (#191645) because it contains subject information as your dominant color or white (#ffffff) will be your color background.
- Icons and tab bars can use the accent color or green (#43C6AC)
- For contrast, elements against a blue background will be white (#ffffff). It will help with text hierarchy also. Elements against white backgrounds will be blue (#191645) and a shade of gray (#888888) for hierarchy.
This rule is one of the techniques for creating a color balance in your UI design. It gives your website or mobile app a more polished, well-organized, proportioned, and attractive appearance to users.
As everyone is aware, when a digital product is organized and generally pleasing (in terms of colors and contents), consumers are more likely to continue with it because it is simpler for them to use and easy to find even the most minor thing in your product.