The 60/30/10 rule is a color proportion guideline that divides a design into three parts: 60% dominant color, 30% secondary color, and 10% accent color. It gives your website a clear visual hierarchy without you having to overthink every design decision.
I stumbled on it properly while redesigning one of our product websites a few years back. I’d been staring at a layout that looked technically fine but felt completely off. A designer friend pointed at my color distribution and said, “You’re using five colors at roughly equal weight. Your eye has nowhere to go.” She was right. Once I applied the 60/30/10 split, the whole thing clicked into place in about 20 minutes.
It sounds almost too simple to be useful, but it isn’t.
What the 60/30/10 Rule Actually Means
The dominant color (your 60%) is the one that sets the overall tone. It covers backgrounds, large surface areas, and anything that acts as a canvas for everything else. Most of the time this ends up being a neutral, such as white, off-white, a light grey, or a deep dark tone if you’re going with a dark design.
The secondary color (30%) supports and complements the dominant. Think navigation bars, sidebars, card backgrounds, section breaks. It provides contrast and structure without competing for attention.
The accent color (10%) is where the action is. Call-to-action buttons, highlighted text, icons, and links. It’s the color that tells the visitor’s eye where to go next.
The rule originated in interior design, where the same logic applies to walls, furniture, and accessories. It crossed over into fashion and graphic design before making its way into UI and web design. Throughout that time, the underlying principle has always remained the same: Create balance by giving each color a defined role and a defined amount of space.
Why Color Matters More Than Most People Realize
Here’s the part that gets underestimated…
Color isn’t decoration, it’s communication.
Research consistently shows that people form snap judgments about products within 90 seconds of first exposure, and a significant portion of that assessment comes down to color alone. Your visitors are making subconscious decisions about your brand before they read a single word.
Different colors carry different associations, and these aren’t arbitrary.
- Blue is consistently linked to trust, reliability, and calm, which is why it dominates in finance, healthcare, and tech.
- Red triggers urgency and excitement, making it effective for limited-time offers and CTAs.
- Green connects to nature, growth, and health, which is why it works so well for wellness and sustainability brands.
- Yellow is attention-grabbing and energetic, but overwhelming in large doses.
These associations have real implications for how you apply the 60/30/10 rule, because the which matters just as much as the how much.
If your dominant 60% is a deep navy blue, your site will feel authoritative and trustworthy before anyone reads your copy. If it’s bright red, it will feel urgent and intense, which fine for a sale period, but exhausting as a permanent background. Most businesses land on neutrals for the 60% precisely because they’re versatile. They let your secondary and accent colors carry the emotional weight without fighting each other.
The accent color carries the biggest responsibility here. It’s the color you’re trusting to drive action and make it count. If your brand is in health or finance, a green or blue accent reinforces what users already expect to feel. If you want energy and conversion, orange and red consistently outperform in A/B tests on CTA buttons. This is not a coincidence.
How to Apply the 60/30/10 Rule to Your Website
I found breaking it into three concrete decisions made the process much faster.
Pick Your 60% First
Start with the dominant color. This is your canvas. It will cover the most visual space on the page, so it needs to be something that doesn’t fight with everything placed on top of it.
For most websites, this is white, off-white, or a very light neutral. If you’re building a dark-mode design, it becomes a deep background color like charcoal, near-black, or a dark desaturated tone. Either direction works; the key is that it creates a consistent backdrop.
Ask yourself: “What mood should my site sit in when nobody is looking at the specific content?”
The answer to that question is your 60%.
Decide Your 30%
Your secondary color is the structural layer. It goes on elements that divide and organize the page — sidebars, navigation backgrounds, card containers, secondary section fills.
It should have enough contrast with your dominant color to create visible separation, but not so much that it feels like it’s competing. A good test is to squint at your design from a distance. If the secondary color jumps out the way your accent should, it’s too strong.
Choose Your 10% Accent
This is where most of the strategic thinking around color psychology applies. Your accent color should feel energetic relative to the rest of the palette. It’s going to appear on your buttons, your links, your highlighted callouts, and any UI element you want the user to interact with.
Accessibility matters here. Make sure your accent color has enough contrast against both your dominant and secondary backgrounds that it’s readable for users with visual impairments. Tools like WebAIM’s Contrast Checker make this quick to verify. The WCAG minimum contrast ratio for normal text is 4.5:1.
Test Before You Commit
Once you have your three colors roughed in, stand up and move away from your screen. Seriously. A designer told me this trick years ago and I still use it. From two meters away, does the right area of the page draw your eye? If your accent is doing its job, you should feel pulled toward the CTAs and key interactions without even thinking about it.
Tools like Coolors and Adobe Color are genuinely useful here for generating complementary palettes and checking how three colors sit together before you start applying them.
Real-World Examples of the 60/30/10 Rule in Action
Seeing it in practice makes the concept far more tangible.
Hipcamp
Hipcamp is one of the cleaner real-world examples of this rule working exactly as intended.
Their dominant 60% is a light grey-white that provides a neutral, airy backdrop. The green from their brand identity acts as the secondary color, appearing in text, buttons, and interactive elements throughout. Because the rest of the palette is so restrained, the green carries enormous visual weight and it aligns perfectly with the nature-focused identity.
Lastly, the orange guides users toward the search action that the business needs you to take.
Apple News+
Apple News+ is about as clean an example of the rule as you’ll find. Pure white takes up the full 60%, functioning as a completely neutral canvas that puts all the visual weight on content and typography. Dark charcoal handles the structural 30%, with every navigation item, heading, and body text block using this near-black consistently, giving the page its legibility and hierarchy.
The coral-pink accent appears in exactly three places: the “Try it free” button in the navigation, the “Try it free” hero CTA, and the “Apple News+” label beneath the logo mark. That’s it. The restraint is the point. By the time your eye finds anything pink on the page, you already know it means “this is where you act.”
WooCommerce
WooCommerce is a useful example because the secondary 30% isn’t a flat color applied to sections. It’s a soft lavender used in large organic blob shapes behind the hero content. It provides visual interest and depth without competing with anything. The white canvas still dominates at 60%, while the lavender handles all the background structure.
The medium purple is reserved for every interactive element on the page: the logo, the “Log in” link, the primary CTA button, and the text links below it. Scroll past the hero and the purple only ever reappears on things you’re meant to click or engage with. That discipline is exactly what makes the 10% feel intentional rather than decorative.
Applying the 60/30/10 Rule in WordPress
This is where things get practical if you’re working in WordPress specifically.
If you’re using Elementor, Global Colors live inside Site Settings. Define your three palette colors there and they update every instance across your site wherever those globals are applied. No hunting through individual widget settings.
GeneratePress has Global Colors built into its customizer, which makes it one of the better theme choices for implementing a structured color system from scratch. Beaver Builder has its own color palette settings that work similarly.
If you’re running a block theme, the theme.json file is where your color palette is defined. You can set your three colors there and they’ll appear as the preset options throughout the block editor. This is the cleanest approach for keeping your color system locked and consistent.
The key thing across all of these is to define your three colors once, at the system level, and apply them from there. The 60/30/10 rule only works as a discipline if the discipline is consistent across every page, not just the homepage.
When the Rule Doesn’t Quite Apply
The 60/30/10 rule is a framework, not a law. There are cases where it needs to flex.
Photography-heavy sites are the most common exception.
If your site is built around full-bleed photography (portfolio sites, travel sites, image galleries), the photos themselves are carrying so much visual information that trying to assert a color distribution across the layout becomes a losing battle. The right move is to shift to a near-neutral interface (very white or very dark) so the imagery becomes the palette itself.
Monochromatic designs use a single color in multiple tones and shades.
They do this rather than using three distinct colors. The rule still applies in spirit since the lightest tone dominates at 60%, the mid tone provides structure at 30%, and the deepest or most saturated version handles the accent role at 10%.
High-energy or campaign-specific pages.
These sometimes benefit from pushing more color, particularly when the context calls for urgency or excitement. Think a sale landing page, an event site, or a product launch. Breaking toward 50/30/20 or adding a fourth color as a second accent can work here. Just make sure there’s still a clear visual hierarchy and one color is still doing the guiding.
Common Mistakes That Break the Balance
These are the patterns I see most often when the rule gets applied incorrectly.
Using the accent color too much.
The moment your 10% color starts covering 20 or 25% of the layout, it stops being an accent and starts being a secondary. Everything flattens and the urgency or direction it was supposed to provide disappears.
Picking colors that are too similar in saturation.
If your dominant, secondary, and accent are all roughly the same tone and brightness, there’s no hierarchy. The eye doesn’t know where to go. Contrast between the roles is as important as the proportions themselves.
Treating images as separate from the color system.
If your color distribution is perfectly calibrated but your hero image has five saturated colors that clash with your palette, the image overrides everything. Choose or create photography that’s either consistent with your palette or deliberately neutral.
Inconsistent application across pages.
I see this constantly on WordPress sites built over time by different people. The homepage follows one palette, the blog uses a slightly different shade of the accent color, and the WooCommerce shop has its own thing happening. The rule only builds trust and brand recognition if it’s applied everywhere.
Frequently Asked Questions About the 60/30/10 Rule
What is the 60/30/10 rule in web design?
In web design, the 60/30/10 rule distributes color across three roles: 60% for the dominant background color that sets the overall tone, 30% for a secondary color that provides structure and contrast in elements like navigation or card containers, and 10% for an accent color reserved for CTAs, links, and key interactive elements. The rule creates a visual hierarchy that guides the user’s attention without needing to consciously engineer it.
What is the 60/30/10 rule in UI design?
In UI design, the same proportions apply but at a more granular level. The dominant color (60%) forms the interface background and establishes the overall mood. The secondary color (30%) is used in UI components like sidebars, modals, and secondary sections. The accent (10%) appears on interactive elements, such as buttons, active states, notifications, links. It’s the color that communicates “something is actionable here.”
Do neutrals count in the 60/30/10 rule?
Yes, and most good web designs use a neutral as the dominant 60%. White, off-white, light grey, and dark near-black tones are common choices because they’re versatile and let the secondary and accent colors carry the personality of the brand. Neutrals can also work in the secondary role, particularly on darker-themed designs where structure is provided through subtle tone shifts rather than dramatic color changes.
How many colors should I use in a web design?
The 60/30/10 rule works with three distinct colors. In practice, you can extend each color through shades and tints, using a lighter and darker version of the same hue to create depth within each of the three roles. Going beyond three distinct colors tends to introduce visual noise. If you feel the need for a fourth color, it typically means one of your original three isn’t doing its job.
What are good tools for building a 60/30/10 color palette?
Coolors is a solid starting point for generating harmonious palettes. Adobe Color gives more control over color relationships using the color wheel. Once you have candidates, run them through WebAIM’s Contrast Checker to verify accessibility before committing.
Can you apply the 60/30/10 rule to dark-mode designs?
Absolutely. In a dark design, the dominant 60% is a deep background (charcoal, dark navy, near-black). The secondary 30% is a slightly lighter or differently saturated tone that provides surface elevation on cards and containers. The accent 10% typically needs to be a higher-contrast, more vivid color than it would on a light design to ensure it reads clearly against the dark backdrop.
Wrapping Up
The 60/30/10 rule won’t guarantee a good design on its own — that still requires good typography, layout, and content. What it does is remove one of the most common points of failure: color that competes with itself.
Get the proportions right, choose colors that align with what you want visitors to feel, and apply the system consistently across every page. That combination is what turns a site that looks “fine” into one that actually communicates your brand before anyone reads a word.
If you’re working in WordPress, starting with your global colors at the theme or page builder level is the cleanest way to enforce the system. You define it once and apply it everywhere.
What’s been the trickiest part of nailing down a color system for your own site? I’m curious whether the 60% choice or the 10% accent is where most people get stuck.
