Unlocking the Secret to Perfect Color Palettes

Hey fellow designers,

Let’s talk about something that’s often mystifying: choosing the right color palette. Have you ever looked at a case study or a mood board and felt overwhelmed by the array of colors? I’ve been there too, and I know how confusing it can be. But fear not, because I’ve cracked the code, and it’s simpler than you think: the 60–30–10 rule.

60–30–10 Rule

Now, you might be wondering, what in the world is the 60–30–10 rule? Well, it’s a magic formula that helps you create beautifully balanced color palettes. Here’s how it works:

1. 60% Dominant Color: This is the primary color in the palette and should be the most prominent. It sets the overall tone and mood of the design. Let’s say the dominant color is a black bean, which covers the background of the website. This color sets the overall tone and mood, providing a sense of tranquility and professionalism.
2. 30% Secondary Color: This color complements the dominant color and adds depth to the palette. It is less dominant but still significant, helping to create harmony and balance. As a secondary color, we might introduce a lighter shade of white as the main text color or for certain accents like buttons and navigation bars. This color complements the black bean, adding depth and visual interest without overpowering it.
3. 10% Accent Color: The accent color is used sparingly but strategically to add contrast and visual interest. It serves as a highlight or focal point in the design, drawing attention to specific elements. For the accent color, we could use vibrant Blue for call-to-action buttons or important links. This pop of color draws attention to key elements on the website and creates a sense of urgency or importance.

Webflow website applying the color palette rule right

Here’s one more example with an app:

1. Dominant Color (60%): Look at the dominant color of the app interface is a sleek gray, providing a neutral backdrop for the content. This color creates a modern and minimalist aesthetic, allowing other elements to stand out.
2. Secondary Color (30%): As a secondary color, we can see black for typography, icons, and interactive elements. This color enhances usability and navigation, creating a sense of familiarity for users.
3. Accent Color (10%): For the accent color, there’s an orange peel for call-to-action buttons. This striking color immediately grabs attention and communicates important information to users.

Dribble design applying the color palette right.

So, why does the 60–30–10 rule work so well? It’s all about balance and harmony. By allocating proportions to each color category, you create a palette that’s visually appealing and easy on the eyes. No more clashing colors or overwhelming visuals — just pure design magic.

In my journey as a designer, I’ve found the 60–30–10 rule to be a game-changer. It’s helped me create stunning color palettes that wow clients and delight users. So next time you’re faced with choosing a color palette, remember the magic formula: 60% dominant color, 30% secondary color, and 10% accent color.

Happy designing!