60-30-10 in Web Design
Where exactly does each color go in a website or app?
Website Color Map
Breaking Down the Web Interface
In web design, the 60-30-10 rule maps naturally to the visual hierarchy of a page. Here's exactly where each percentage typically goes:
Backgrounds & Large Areas (60%)
Usually white, off-white, or your lightest neutral. This is the canvas everything sits on.
UI Components (30%)
Your brand's primary color. Creates identity without overwhelming the content.
Accents & Actions (10%)
High-impact elements that need immediate attention. Often your secondary brand color.
Dark Mode Considerations
In dark mode, the rule still applies but the 60% becomes a dark background instead of light. The psychological effect remains — most of the interface is neutral, with brand and accent colors providing contrast.
Light Mode
Dark Mode
Component-Level Application
The 60-30-10 rule can also apply at the component level. A card, for example, might have:
- • 60%: White/light background
- • 30%: Text content (dark gray/black)
- • 10%: Icon or button accent
This nested application creates consistent visual rhythm at every scale of your interface. Learn more about how colors function together in our Color Roles guide.
Real-World Examples
Stripe
60% white backgrounds, 30% purple/indigo brand elements, 10% green for success states and CTAs.
Slack
60% white/light gray workspace, 30% purple sidebar and headers, 10% colorful emoji and status indicators.
Notion
60% clean white canvas, 30% gray text and subtle dividers, 10% colorful page icons and highlights.
Preview Your Palette in Web Layouts
Generate a palette and instantly see how it looks applied to real website mockups with proper 60-30-10 distribution.
Generate & Preview