Contents

  1. Introduction to the 60-30-10 Rule
    Definition and purpose
    Role in achieving color harmony
  2. Tips for Applying the Rule
    Start with neutral shades
    Ensure text contrasts with background
    Avoid pure gray or black as main colors
    Use color palette generators
  3. Helpful Tools
    Coolors.co
    Kuler
    Paletton
    Designspiration

TL;DR‍

The article explains the 60-30-10 rule for creating harmonious color schemes in design: 60% main color, 30% secondary color, and 10% accent color. It also provides tips and tools for applying this rule effectively.

‍

‍

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, generate sitemaps, prototype, visualize, prepare proposals, and manage web projects. The only solution you need before opening Figma, Webflow, WordPress, or any other tools.