60-30-10 Rule

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.

Picture by iniyavanappu

Here is a short explanation how this rule works

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

Boost Your UX Design and Planning Skills


You’re moving in right direction! Check out our blog where we're talking about product options and start using pro tools for designing exceptional UX. Along with Figma or Sketch, FlowMapp is trusted by startups, agencies and designers all over the world. More than 300k users in total use us for smart planning.


With FlowMapp you can plan user flow, build visual sitemap with hi-fi prototypes and collaborate with teammates or clients. Enjoy the power and simplicity.


Learn more about FlowMapp here and stay tuned:


share the term