Free 60/30/10 color tool

Balance your colors in seconds.

Create a clean 60/30/10 color palette for websites, branding, UI design and visual layouts.


Your 60/30/10 Preview

60%Primary
30%Secondary
10%Accent
#B85C38
Primary
#E7A33E
Secondary
#A35B42
Accent
#3A2A22
Neutral
#F6E8D5
Background

What is the 60/30/10 color rule?

The 60/30/10 rule helps you divide color in a design so it feels balanced instead of noisy. Use 60% as your main visual space, 30% for identity and rhythm, and 10% for action, contrast or emphasis.

  • 60% primary color for the main area and overall atmosphere.
  • 30% secondary color for structure, sections and brand identity.
  • 10% accent color for buttons, highlights and visual focus.
Learn graphic design at Art and the City