What is 60-30-10 Rule? | FlowMapp design blog (2024)

Table of Contents
Tips & Tricks Useful Tools FAQs

60-30-10 rule may help you harmonize your color scheme and make a well-balanced interface design.

The idea is simple. When you choose a new color palette, 60% of the palette is dedicated to the dominant color — usually, we call it neutral. Secondary color, or complementary, makes up 30% of the palette, and a third color, accent one, is used for the remaining 10% of the design.

What is 60-30-10 Rule? | FlowMapp design blog (1)

Tips & Tricks

  1. Grayscale first. You can lose a lot of time by applying colors too early. Focus on spacing and laying out elements before
  2. Contrast the text. Make it readable by contrasting with the background
  3. Don’t use pure gray or black. It is more natural to add some saturation. We rarely see pure gray colors in real life
  4. Use color generators. They will simplify your search for a well-balanced color palette. We listed the most popular for you below

Useful Tools

  • Coolors.co
    Colors generator
  • Kuler
    Color wheel from Adobe
  • Paletton
    Similar to Kuler, but you are not limited to 5 tones
  • Designspiration
    Inspiration tool. You can pick up to 5 colors and search images matching your query
What is 60-30-10 Rule? | FlowMapp design blog (2024)

FAQs

What is 60-30-10 Rule? | FlowMapp design blog? ›

The idea is simple. When you choose a new color palette, 60% of the palette is dedicated to the dominant color — usually, we call it neutral. Secondary color, or complementary, makes up 30% of the palette, and a third color, accent one, is used for the remaining 10% of the design.

What is the 60-30-10 rule for design? ›

This decorating rule suggests that you should cover your room with 60% of a dominant color, 30% of a secondary color, and 10% of an accent shade. It is all about maintaining the perfect balance of tones. Pick colors that mingle well with each other to create a subtle combo.

How to use 60/30/10 rule in web design? ›

Applying the 60–30–10 rule to its color scheme would involve:
  1. Dominant Hue (60%): Choose a dominant hue that aligns with the brand and primary focus of the website. ...
  2. Secondary Hue (30%): Select a secondary hue that complements the dominant color and adds visual interest. ...
  3. Accent Hue (10%):
Jul 11, 2023

What is the 60-30-10 rule in material design? ›

Google's Material Design is a prime example of the 60-30-10 rule. The dominant color is white (60 percent), used in the background. The secondary color is light gray (30 percent), used in elements like the search bar. The accent color is a bright blue (10 percent), used for buttons and links.

What is the 60 40 rule in design? ›

The golden ratio for color scheming

Any balanced room scheme needs to have good proportional representation of colors, textures and pattern. For example, in a two-color room scheme, the dominant color will cover around 60% of the surfaces, while the complementing secondary accent color will cover around 40%.

What is the 80 20 rule for designers? ›

The 80-20 design rule is a key interior designer tip and states that the majority (80%) of your room's color scheme should be neutral. However, when decorating with neutrals, too many injections of color can feel overwhelming if not carefully thought through.

What are the 4 basic design rules? ›

Maintaining your creativity when designing content can be a challenge. Luckily, there are four major design principles that can help guide your ideas. These principles are contrast, repetition, alignment, and proximity. Understanding the role each can play in the design process can help keep your ideas fresh.

What is the color code 60-30-10? ›

60-30-10 Rule in Monochrome

Here's an example: 60% main color: Soothing neutral greige. 30% secondary color: A deeper shade of the same greige. 10% accent color: A pale shade of the leading greige tone.

What is the most commonly used rule in design? ›

The Rule of Thirds has been helping artists and designers for at least over 200 years. It is a universal concept that artists and designers use by creating a grid of nine boxes in order to draw the user's eye to specific areas on the design.

What is the 60-30-10 rule in film? ›

The 60-30-10 rule aims to balance the colors used in an area with a pleasant way, assigning percentages to the amount of color you use, This is the rule: 60% main color + 30% secondary color + 10% accent color.

What is the golden rule of design? ›

One of the golden rules of graphic design is to keep it simple. This means using a limited color palette, avoiding cluttered layouts, and using clear and concise messaging. Another important rule is to maintain consistency in design elements such as fonts, spacing, and imagery.

What is the golden ratio in interior design? ›

In interior design, the golden ratio is 1:1.618 – the most pleasing ratio for objects and their aesthetics. Designers apply this ratio when choosing the layout of a room.

What is the 6 3 1 rule design? ›

The Golden Ratio of Colors.

It can be applied to many compositional elements in UI design. While using the 6:3:1 Rule, designers have to choose a dominant color and use it in 60% of the space, a secondary color in 30% and a final color in the remaining 10%.

What is the 60 30 20 rule in design? ›

To put it simply, this rule says that the dominant/primary colour should take up 60% of your design, the secondary colour should take up 30%, while an accent colour should take up 10% of your design.

What is the 80 20 rule in interior design? ›

When choosing colors for your room, use the 80/20 rule to create a balanced look. Choose neutral colors for 80% of the room and use pops of color for the remaining 20%.

What is 30 70 design rule? ›

In design, it often refers to a colour rule where 70% of space uses a dominant colour, and 30% a secondary colour, ensuring balance and visual appeal.

What is the 3 5 7 design rule? ›

The Rule of Three is a great way to start decorating using odd numbers and it can be applied anywhere. But a larger number like 5 or 7 works equally well and is useful when decorating large areas such as a long mantel, console table, or wall. And oddly enough, (haha, see what I did there?) odd numbers create symmetry!

Top Articles
Latest Posts
Article information

Author: Greg O'Connell

Last Updated:

Views: 6599

Rating: 4.1 / 5 (62 voted)

Reviews: 93% of readers found this page helpful

Author information

Name: Greg O'Connell

Birthday: 1992-01-10

Address: Suite 517 2436 Jefferey Pass, Shanitaside, UT 27519

Phone: +2614651609714

Job: Education Developer

Hobby: Cooking, Gambling, Pottery, Shooting, Baseball, Singing, Snowboarding

Introduction: My name is Greg O'Connell, I am a delightful, colorful, talented, kind, lively, modern, tender person who loves writing and wants to share my knowledge and understanding with you.