As designers, colour is a huge component of our work. But many of us struggle with the usage of colours in our designs.  In this article, you will learn about the 60-30-10 colour rule, how it's used, and see a practical example of it. What is the 60-30-10 rule?

freeCodeCamp is a nonprofit organization offering free online coding courses and programming tutorials, covering topics such as web development, data science, and machine learning. Learners can gain practical coding skills, build real-world projects, and earn certifications to advance their careers in tech.

freeCodeCamp

The 60-30-10 rule is a rule that helps to guide designers on choosing and pairing colours for their designs. The primary colour is typically a neutral colour and is often used as the background of the design. The secondary colour can be used for typography, icons, and subheadings/subtitles in a design.

What is the 60-30-10 Rule in Design? And How to Use it in Your Projects

Example Hero Page Using the 60-30-10 Rule