60-30-10 Rule for Mobile App Design
How to apply the classic color distribution formula to create balanced, intuitive mobile interfaces.
The 60-30-10 Rule Visualized in Mobile
A typical mobile screen demonstrating proper color distribution
Mobile Color Distribution Breakdown
The 60-30-10 rule translates directly to mobile UI, but the limited screen real estate makes proper distribution even more critical. Here is how each percentage maps to mobile elements:
Mobile Elements
- Screen backgrounds
- Navigation bars (light/dark mode)
- Card backgrounds
- Modal backgrounds
- Tab bar backgrounds
Common Colors
In mobile, this is almost always white, off-white, or dark gray depending on theme.
Mobile Elements
- Headers and section titles
- List item highlights
- Selected states
- Progress indicators
- Input field backgrounds
Common Colors
Your brand color often plays this role. Use it consistently across the app.
Mobile Elements
- Primary action buttons
- Floating action buttons (FAB)
- Toggle switches (active)
- Notification badges
- Links and interactive text
Common Colors
Reserve this for your most important actions. Less is more.
App Type Examples
Different app categories have established color expectations. Here is how the 60-30-10 rule applies to common app types:
Finance App
Clean white background for trust and clarity
Navy blue for headers, charts, and primary brand elements
Green for positive transactions, success states, CTA buttons
Social Media App
Light gray feed background to reduce eye strain
Brand blue for navigation, verified badges, links
Pink/red for likes, hearts, notifications
Fitness App
Dark background for immersive workout experience
Energetic green for progress, stats, goals
Orange for start/stop buttons, achievements
E-commerce App
White to showcase product photography
Dark gray for text, headers, navigation
Red for sales, add to cart, buy buttons
Platform-Specific Guidelines
iOS (Apple)
- Use system colors that adapt to light/dark mode automatically
- Follow Human Interface Guidelines for tint colors
- Primary buttons often use system blue (#007AFF) or brand color
- Respect Dynamic Type for text scaling
- Tab bar icons should use the 60-30-10 principle for inactive/active states
Android (Material)
- Implement Material You dynamic color theming
- Use surface tones from Material 3 for the 60% layer
- Primary container colors serve as the 30% element
- Tertiary colors work well for 10% accents
- FABs should use your accent color exclusively
Common Mistakes to Avoid
Too many accent colors
Multiple competing CTAs confuse users about priority
Pick one accent color for primary actions. Use opacity or secondary colors for less important buttons.
Brand color overuse
Using brand color at 60% instead of 30% creates fatigue
Brand color should be secondary (30%). Use neutrals for backgrounds.
Ignoring dark mode ratios
Simply inverting colors breaks the visual hierarchy
Redesign the palette for dark mode, maintaining the same proportional relationships.
Inconsistent accent placement
Accent on some buttons, secondary on others for same action
Create a component system where primary actions always use accent color.
Implementing in Your App
- 1
Audit your current screens
Take screenshots of key screens and use a color picker to measure approximate percentages. Most apps start with too much accent usage.
- 2
Define your three colors
Choose one dominant (background), one secondary (brand), and one accent (CTA). Generate a palette that includes all three with proper contrast.
- 3
Create a component color system
Map each component to its color role. Primary buttons always use accent. Cards always use dominant. Navigation uses secondary. Document these rules.
- 4
Test across screens
Navigate through your entire app. The color ratio should feel consistent even as content changes. Adjust if any screen feels unbalanced.
- 5
Build for both modes
Create light and dark mode palettes that maintain the 60-30-10 ratio. Your accent color can stay the same; adjust dominant and secondary for each mode.
Generate Mobile-Ready Palettes
Create balanced color palettes optimized for mobile app design. Our generator outputs colors with the 60-30-10 distribution in mind.
Generate App Color Palette