The 60-30-10 Rule: Creating Balanced Color Palettes for E-Learning and Web Design

By Nathan Stoker · May 31, 2026 · 7 min read

Whether you're designing an interactive course, building a custom web application, or creating engaging learning materials, color choices can make or break the user experience. The 60-30-10 rule is a time-tested design principle that takes the guesswork out of color palette creation.

What is the 60-30-10 Rule?

The 60-30-10 rule is a color distribution theory that helps designers create aesthetically pleasing and balanced compositions. Here's how it breaks down:

60% - Foundation/Background: This covers the most space, typically a neutral or light tone that doesn't compete for attention. Think backgrounds, large content areas, or canvas space. While it's the largest portion, it's visually recessive—it lets other elements shine.
30% - Primary/Brand Color: This is your visually dominant color—the one that actually defines the look and feel. Use it for headers, navigation, sidebars, and key structural elements. Even though it covers less space than the background, this color has more visual weight.
10% - Accent/Highlight Color: This is your pop of color—the eye-catcher that draws attention to important elements like buttons, calls-to-action, active states, or key information that requires immediate focus.

A Note on Terminology: The original "60-30-10 rule" calls the 60% the "dominant" color, but this is misleading. While it covers the most space, it's usually a neutral that recedes visually. The 30% color is what actually dominates the visual experience. Think of 60% as spatial coverage, not visual dominance.

Color Breakdown Example

Foundation (60%): #F8F9FA - Light gray
Primary (30%): #2C3E50 - Slate blue
Accent (10%): #E74C3C - Coral red

Why It Works

This ratio creates visual hierarchy naturally. Your eye has a place to rest (60% foundation), a clear sense of identity and structure (30% primary), and knows exactly where to focus for action (10% accent). It prevents color overwhelm while maintaining enough variety to keep things interesting.

Notice in Practice:

The light gray background (60%) provides a calm, neutral foundation that doesn't compete with content—it covers the most space but stays out of the way
The slate blue (30%) in the header, sidebar, and card borders is what actually defines the visual identity—this is the color people will associate with the interface, even though it covers less space
The coral accent (10%) on buttons and active states immediately draws your eye to interactive elements—used sparingly for maximum impact

The Spatial vs. Visual Paradox

Here's the interesting part: the 60% color covers the most area, but the 30% color has more visual weight. Dark or saturated colors naturally draw the eye more than light neutrals. So while the light gray takes up 60% of the space, the slate blue feels like it's "in charge" of the design. This is intentional—the background recedes so your brand color can take center stage without overwhelming the interface.

Practical Applications in E-Learning

In my work with Storyline courses and SharePoint applications, I apply this rule consistently:

60% (Foundation): White or light neutral backgrounds for main content areas—keeps learners focused on content rather than decoration
30% (Primary): Brand-aligned color for navigation, headers, and content containers—creates cohesive identity throughout the course
10% (Accent): High-contrast color for interactive buttons, progress indicators, and important callouts—guides learners to take action

Please note, demo links go nowhere.

Tips for Implementation

Start with your 30% primary color—this is usually your brand color or the color that will define the interface identity
Choose your 10% accent next—pick something that contrasts well with your primary for interactive elements
Select a neutral foundation (60%) that lets the other colors breathe—light grays, off-whites, or subtle tints work well
Remember: the 60% should be spatially large but visually recessive; the 30% should feel like it's defining the look
Test for accessibility (WCAG 2.1 AA compliance) before finalizing—especially contrast ratios between text and backgrounds
Use tools like Adobe Color or Coolors to generate harmonious palettes and check contrast ratios

Real-World Storyline Application

In Storyline 360:

Base Layer Background (60%): Set your slide background to #F8F9FA or similar light neutral
Title Banners & Instruction Panels (30%): Use shapes filled with #2C3E50 for structural elements
Submit Buttons & Active States (10%): Apply #E74C3C to buttons and selected states in button sets
Progress Indicators (10%): Use accent color for completion bars and checkmarks

This creates a professional, cohesive look that doesn't distract from learning objectives while still maintaining visual interest.

Conclusion

The 60-30-10 rule isn't restrictive—it's liberating. It gives you a proven framework to work within while leaving plenty of room for creativity. By understanding that the "60%" is about spatial coverage rather than visual dominance, you can make more intentional choices about how to balance your color palette.

Next time you're starting a project, try blocking out your colors using this ratio before diving into the details. Start with your primary brand color (30%), add your accent (10%), then choose a foundation (60%) that lets them both shine.

Want to see this principle in action? Check out the interactive demo that accompanies this article.