UI color

Using the 60-30-10 color rule in UI design

The 60-30-10 rule is a simple way to keep a color palette balanced: one dominant color, one supporting color, and one accent color. In interface design, that structure helps prevent every element from competing for attention.

Translate the rule into UI roles

In UI design, 60 percent is usually the dominant surface or background system. It might be a light neutral, a dark base, or a soft brand color. The 30 percent role supports structure: panels, secondary areas, charts, or muted states. The 10 percent role is the accent: buttons, highlights, active states, or important calls to action.

The exact math does not need to be literal. The value is in assigning visual weight before the screen becomes crowded.

Use accent color carefully

Accent color is powerful because it is rare. If every badge, button, icon, and border uses the accent, the design loses hierarchy. A good test is to zoom out and ask whether the most important action still stands out.

Build palettes faster in Figma

CPalette is a free Figma Community plugin built around this structure. It uses color-math logic to help generate harmonious palette directions quickly, then you can refine contrast, naming, and token usage for your actual product.

For landing pages, dashboards, design systems, and product UI, the 60-30-10 model is a useful first pass because it forces every color to have a job.