- Rachel Bistricer
- Sep 24
- 6 min read
The 60-30-10 color rule is a timeless design principle that helps create a balanced and visually appealing color palette. This guide explains what the rule is, why it works so well, and how to apply it to your own projects, from graphic design to marketing strategy assets.
Discover how to select harmonious colors and avoid common pitfalls. With this rule, you can ensure your designs stand out while maintaining a polished and professional look.
Give your designs a vibrant edge with our color palette generator. Experiment with shades that make logos, websites or social posts shine. No guessing, just choose your colors and create the perfect schemes for your project.
TL;DR: What is the 60-30-10 color rule?
Here’s a quick summary of the 60-30-10 color rule and how it works. This principle is all about creating a balanced color scheme by using three colors in specific proportions.
60-30-10 color rule summary
What is the 60-30-10 color rule?
The 60-30-10 rule is a color theory principle that suggests distributing color in a space in percentages. 60% of your design should be a dominant color, 30% a secondary color and 10% an accent color. This formula creates a sense of harmony that’s pleasing to the eye.
It works because it allows the eye to move comfortably around a space. The dominant color provides a foundation, the secondary color adds interest and the accent color provides a focal point. This hierarchy prevents any single color from overwhelming the design.
How to apply the 60-30-10 color rule
Applying this rule is a simple three-step process. It starts with choosing your main color and builds from there.
01. Choose a dominant color (60%)
Your dominant color is the foundation of your palette. It will cover the largest area, so it's often a neutral shade like white, gray or beige. This color sets the mood for your design. For example, in a living room, this could be your wall color.
02. Select a secondary color (30%)
The secondary color should complement your dominant hue and take about half as much space. It's there to add contrast and depth. This could be the color of your furniture, curtains or an area rug.
03. Pick an accent color (10%)
Your accent color is where you can have some fun. It's used in small doses to add personality and create focal points. Think throw pillows, artwork or decorative objects. This color should be bold enough to stand out but used sparingly.
Tips for effective color selection
Choosing the right colors is just as important as applying the rule correctly. The best palettes consider emotion, color psychology and practical application.
Consider the mood
Colors have a powerful ability to evoke feelings. For instance, blue often feels calm and serene, while yellow can feel energetic and cheerful. Think about the atmosphere you want to create. Let that guide your color choices.
The impact of color reaches far beyond aesthetic appeal—it's essential for brand recognition. In fact, consumers are 81% more likely to recall a brand’s color than remember its name. This astounding statistic highlights how much influence the right color palette can have on your audience, from shaping perception to making your brand unforgettable.
Use a color wheel
A color wheel is an essential tool for understanding how colors relate. It can help you find harmonious color combinations. For example, complementary colors (opposites on the wheel) create high contrast, while analogous colors (next to each other) create a more serene feel.
Test your color schemes
Before you commit, it's always a good idea to test your colors. You can use paint samples on a wall or create a digital mood board. Wixel offers a color palette generator that helps you create cohesive branding and experiment with different combinations. Using a color tool like Wixel's ensures your designs look professional and on-brand.
Discover the best color palette generator to bring your creative ideas to life.
Examples of the 60-30-10 color rule in action
Poster design
A good poster design can be broken down into percentages for balance. Use 60% for the background color, such as a muted pastel, to set the tone. Dedicate 30% to typography and images, focusing on bold black text and graphics to communicate the message clearly. The remaining 10% can be used for accent details, like red for emphasis or small icons, to add visual interest.
App interface
For an app interface, aim for 60% of the design to feature a neutral background, such as white or light gray, to create a clean and user-friendly look. Allocate 30% to functional areas like navigation bars, which can have medium blue tones for clarity. The final 10% should be reserved for highlight or action colors, such as bright purple for buttons, to draw attention to key actions.
Website design
When making a website, the background design might consist of a soft white, taking up 60% of the visual space. The main text and headers could be dark gray, making up 30%, to ensure readability. Lastly, call-to-action buttons in a bright, eye-catching green, accounting for 10%, can guide the user’s attention to the most important elements.
Presentation slides
For presentation slides, use 60% of the design for a clean, neutral background like light gray or white to focus on the content. Dedicate 30% to key elements, such as bold, dark text and supporting visuals like charts or images, to effectively convey information. Reserve the remaining 10% for accents, such as a vibrant orange or blue, to emphasize key points or headers.
Common mistakes to avoid
While the 60-30-10 rule is simple, a few common pitfalls can throw off the balance.
Overusing accent colors
The magic of the accent color is in its sparing use. If you use too much of it, it loses its impact and can make the design feel cluttered and overwhelming. Stick to the 10% guideline.
Ignoring color relationships
Just picking three colors isn't enough; they need to work well together. A clashing palette will feel jarring, even if you follow the 60-30-10 ratio. Use a color wheel to find combinations that create a pleasing harmony.
Neglecting the mood of the space
Your color choices should align with the purpose and desired feeling of your design. A bright, high-energy palette might be great for a creative agency's branding, but less suitable for a spa's website.
What is a color code? a guide to consistency and creativity
Change the color of an image: an easy tool to transform your visuals
9 infographic color palettes that maximize engagement
Unlocking the art of dopamine colors in graphic design
How to choose your brand colors (+10 examples to learn from)
26 logo color combinations for inspiration
Designing with monochromatic colors: a complete guide
How gen-z purple became the new millennial pink
How to work with color palettes: a simple guide
60-30-10 color rule FAQ
Can I use more than three colors with the 60-30-10 rule?
Yes, you can adapt the rule. For a four-color scheme, you could try a 60-20-10-10 split. The key is to maintain a clear hierarchy with one dominant color. The additional accent colors should be used in equal, small amounts.
Do black and white count in the 60-30-10 rule?
It depends on how they're used. If white is your main wall color, it's your 60%. If black is used for small picture frames, it could be part of your 10%. Often, black, white and other neutrals can act as supporting elements outside the three main colors.
What if my dominant color isn't neutral?
That's perfectly fine. While neutrals are a safe choice for the 60%, you can use a bolder color, like a deep blue or a soft green, as your dominant shade. Just make sure your secondary and accent colors complement it well, and don't compete for attention.
