Topview Logo
  • Create viral videos with
    GPT-4o + Ads library
    Use GPT-4o to edit video empowered by Youtube & Tiktok & Facebook ads library. Turns your links or media assets into viral videos in one click.
    Try it free
    gpt video

    60-30-10 Color Rule

    blog thumbnail

    60-30-10 Color Rule

    When it comes to using color in mobile UI design projects, achieving a mature, seamless, and well-thought-out look is essential. The 60-30-10 rule is a guideline that can help designers effectively implement color in their designs without it becoming obnoxious or distracting. The rule dictates that 60% of the color palette should be a neutral or base color, 30% should be a primary color, and 10% should be a call-to-action or accent color. This article explores how to apply the 60-30-10 rule in mobile UI design to create visually appealing and harmonious interfaces.

    Before we delve into the 60-30-10 rule, it's crucial to understand the significance of using color thoughtfully in design projects. By following this rule and strategically allocating different percentages of color, designers can create visually balanced and aesthetically pleasing interfaces that guide user attention effectively. Embracing the 60-30-10 rule enables designers to strike a harmonious balance between colors, ensuring a visually appealing and engaging user experience.


    Color, Mobile UI design, 60-30-10 rule, Implementation, Guidelines, Visual balance


    1. What is the 60-30-10 color rule? The 60-30-10 color rule is a guideline that suggests using 60% of a neutral base color, 30% of a primary color, and 10% of a call-to-action or accent color in design projects to achieve visual balance and harmony.
    2. How can the 60-30-10 rule help in mobile UI design? By following the 60-30-10 rule, designers can create mature and seamless mobile UI designs that are visually appealing and well thought out. This rule guides designers in effectively implementing color without it becoming distracting or overwhelming in the design.
    3. Can the 60-30-10 rule be adapted for different design styles? While the 60-30-10 rule provides a solid foundation for color usage in design, it can be adapted and modified based on the design style or project requirements. Designers can experiment with different color combinations while still maintaining the essence of the rule to achieve visually striking interfaces.

    One more thing

    In addition to the incredible tools mentioned above, for those looking to elevate their video creation process even further, stands out as a revolutionary online AI video editor. provides two powerful tools to help you make ads video in one click.

    Materials to Video: you can upload your raw footage or pictures, will edit video based on media you uploaded for you.

    Link to Video: you can paste an E-Commerce product link, will generate a video for you.

    You may also like