60 – 30 – 10 Rule

60% of your color should be your Neutral Color

30% of your color should be your Primary Color

10% of your color should be your Secondary Color


Example of 3 Colors – Incorrect

There are too many colors used: Grey shouldn’t be used in this UI and the use of the Secondary color is used to much.

Example of 60 – 30 – 10 Rule – Correct

This is an example of a UI element that uses the 60 30 10 Rule. The Secondary color only highlights elements that are secondary to the purpose of the UI. The Primary color gives emphasis on the Primary Elements. The Neutral Color is used for filling in the rest of the UI.

Reference: https://www.youtube.com/watch?v=UWwNIMHFdW4

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *