Skip to results

Use the 60-30-10 Rule to Build Balanced Color Systems

Visual Design · color

Updated 2026-07-28

Stop choosing colors randomly. A simple proportion system can create consistency and visual balance across an interface.
Use 60% for the dominant color. This is the foundation of the design:

Main background.
Overall visual tone.
Large surface areas.

Use 30% for the secondary color. Support the dominant color with a related shade:

Cards.
Navigation areas.
Containers.
Supporting surfaces.

Use 10% for the accent color. Reserve your strongest color for elements that need attention:

Primary buttons.
Important actions.
Key information.

Keep the accent color limited. When everything is highlighted, nothing stands out. A small amount of contrast creates stronger focus.
Build color relationships instead of isolated choices. A structured palette makes interfaces feel intentional, consistent, and easier to navigate.
Three numbers can replace guesswork: 60% dominant, 30% secondary, 10% accent.

Related guides

Use the Golden Ratio to Create More Balanced Interfaces
Use Color as a Communication System
Use Grids as a System for Creating Hierarchy
Design Color Systems for Meaning
Design Color Contrast Correctly