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.

The image illustrates the 60-30-10 rule and two methods for applying it
HERE IS A SHORT EXPLANATION HOW THIS RULE WORKS. PICTURE BY INIYAVANAPPU

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

‍

Visual planning & estimation tool for website gurus

Simple and powerful AI-driven tool that helps thousands of web agencies plan, prototype, visualize, prepare proposals, and manage web projects. The only solution you need before opening Figma, Webflow, WordPress, or any other tools.