60-30-10 Color Rule
Master the classic interior design principle that creates perfect color balance. Learn how to apply the 60-30-10 rule to digital design, print media, and any visual project for professional, harmonious results.
What is the 60-30-10 Rule?
The 60-30-10 rule is a timeless design principle that creates visual harmony through balanced color distribution. Originally developed for interior design, this rule has become a cornerstone of professional design across all media. It provides a simple yet effective framework for creating cohesive, visually appealing designs.
The rule suggests using three colors in specific proportions: 60% for the dominant color, 30% for the secondary color, and 10% for the accent color. This distribution creates a natural hierarchy that guides the viewer's eye and establishes visual balance without overwhelming the design.
Understanding the Rule
60%
Dominant Color
The primary color that sets the overall tone and mood. This should be a neutral or subdued color that provides the foundation for your design.
- • Backgrounds
- • Large surfaces
- • Base elements
30%
Secondary Color
A complementary color that supports the dominant color and adds visual interest. This color should harmonize with the dominant color while providing contrast.
- • Furniture/text elements
- • Supporting graphics
- • Secondary content
10%
Accent Color
A bold, vibrant color used sparingly to create focal points and add personality. This color should pop against the other two colors.
- • Call-to-action buttons
- • Highlights
- • Decorative elements
Visual Examples
Professional Website Design
Clean, professional layout with white background (60%), blue content areas (30%), and orange call-to-action buttons (10%).
Color Breakdown:
White - 60%
Background, negative space
Blue - 30%
Headers, content blocks
Orange - 10%
Buttons, highlights
Print Design - Brochure
Corporate brochure with light gray background (60%), green content areas (30%), and red accent elements (10%).
Color Breakdown:
Light Gray - 60%
Paper background, margins
Green - 30%
Headers, graphics
Red - 10%
Contact info, logos
Mobile App Interface
Dark theme app with dark gray background (60%), purple content areas (30%), and yellow accent elements (10%).
Color Breakdown:
Dark Gray - 60%
App background, cards
Purple - 30%
Content areas, navigation
Yellow - 10%
Notifications, actions
Digital Design Applications
Web Design
- • 60% - Background: White, light gray, or brand-neutral color
- • 30% - Content: Text blocks, navigation, main content areas
- • 10% - Accents: Buttons, links, highlights, call-to-actions
Tip: Use the 60% color for body text on light backgrounds, or white text on dark backgrounds for optimal readability.
Mobile Apps
- • 60% - Interface: App background, card backgrounds, main surfaces
- • 30% - Content: Text, icons, secondary elements
- • 10% - Actions: Primary buttons, notifications, status indicators
Tip: Consider accessibility guidelines - ensure sufficient contrast between your 60% and 30% colors.
Social Media Graphics
- • 60% - Background: Solid color or subtle pattern
- • 30% - Content: Text, images, main graphic elements
- • 10% - Branding: Logo, hashtags, call-to-action elements
Tip: Keep the 10% accent color consistent across all your social media graphics for brand recognition.
Presentations
- • 60% - Slides: Background color, slide templates
- • 30% - Content: Text, charts, main visual elements
- • 10% - Highlights: Key points, important data, emphasis
Tip: Use the 10% color sparingly to draw attention to the most important information on each slide.
Print Design Applications
Business Cards
- • 60% - Card Stock: White, cream, or brand color background
- • 30% - Information: Name, title, contact details
- • 10% - Logo/Branding: Company logo, accent elements
Tip: Consider the paper color as part of your 60% - colored card stock can serve as your dominant color.
Brochures & Flyers
- • 60% - Layout: Background, margins, white space
- • 30% - Content: Headlines, body text, images
- • 10% - Call-to-Action: Contact info, buttons, special offers
Tip: Use the 10% color for contact information and call-to-action elements to make them stand out.
Magazines & Books
- • 60% - Paper: White or off-white page background
- • 30% - Content: Text, images, main editorial content
- • 10% - Design Elements: Headers, pull quotes, page numbers
Tip: Maintain consistency across all pages while allowing for variation in the 10% accent elements.
Packaging Design
- • 60% - Package: Main package color, background
- • 30% - Information: Product name, descriptions, ingredients
- • 10% - Branding: Logo, certifications, special features
Tip: Consider how the package color (60%) will look on store shelves and in different lighting conditions.
Advanced Tips and Variations
Flexible Applications
- • 70-20-10: For more subtle designs with less contrast
- • 50-30-20: For more balanced, equal-weight designs
- • 80-15-5: For minimal designs with very subtle accents
- • Multiple Accents: Split the 10% between 2-3 accent colors
Common Mistakes to Avoid
- • Too Much Accent: Using more than 15% accent color
- • Poor Contrast: Colors that don't provide enough distinction
- • Ignoring Context: Not considering the medium or audience
- • Rigid Application: Following the rule too strictly without flexibility
Choosing Your Colors
Step 1: Choose Your 60%
Start with your dominant color. This should be neutral, calming, and work well as a background or base color.
- • Whites and off-whites
- • Light grays and beiges
- • Soft pastels
- • Brand-neutral colors
Step 2: Select Your 30%
Choose a color that complements your 60% color. This should provide good contrast while maintaining harmony.
- • Complementary colors
- • Analogous colors
- • Brand colors
- • Medium-toned colors
Step 3: Pick Your 10%
Select a bold, vibrant accent color that will pop against your other two colors. This should be used sparingly for maximum impact.
- • Bright, saturated colors
- • High-contrast colors
- • Brand accent colors
- • Attention-grabbing hues
Tools and Resources
Design Tools
- • Adobe Color: Create and test color palettes
- • Coolors.co: Generate harmonious color schemes
- • Figma/Sketch: Apply the rule in your designs
- • ColorZilla: Extract colors from existing designs
Testing Your Palette
- • Accessibility Check: Ensure sufficient contrast ratios
- • Print Preview: Test how colors look in print
- • Different Screens: Check appearance on various devices
- • User Testing: Get feedback on color effectiveness
Related Articles
Start Applying the 60-30-10 Rule
Whether you're designing a website, creating a presentation, or planning a room, the 60-30-10 rule provides a solid foundation for professional, balanced design. Start with this framework and adapt it to your specific needs and style.
Create Your Color Palette