How to Use the 60–30–10 Color Rule in UI Design
Choosing three colors does not automatically create a clear interface. If every color covers the same area and attracts the same amount of attention, users may not know where to look first. The 60–30–10 rule assigns different visual roles to a background, a supporting color, and an accent. HueRoll creates two 60–30–10 suggestions from any selected color. This guide explains how to read those suggestions and turn them into a practical UI palette.
Display both suggestions in HueRoll
Open HueRoll’s color palette, select any color, and enter #2563EB in the detail panel’s HEX field. Press Apply, then compare Variants A and B in the 60–30–10 section. Your selected blue is the accent in both suggestions.
What the 60–30–10 rule means
The rule suggests using about 60% of a design for a background or dominant surface, about 30% for a supporting color, and about 10% for the color that should attract attention. The idea came from fields such as interior design, but it can also help organize color roles in websites and applications.
The numbers do not describe a formula for mixing paint or digital colors. They are not a requirement to count every pixel and make the proportions exact. Think of them as a hierarchy: one quiet color supports most of the content, a second color separates or groups areas, and a small accent directs attention.
The three roles
60%: background or surface
This role covers page backgrounds, card surfaces, and other large areas. It should support text and images without competing with them during extended use. White and pale gray are common choices, but a light tint of a brand color can create a stronger sense of identity while remaining quiet.
30%: secondary or supporting color
This color can be used for a header, sidebar, grouped section, or part of a card. It needs to remain distinguishable from the main background without competing with the accent. An analogous color, a less saturated color, or a neutral can all work, depending on the content and brand.
10%: primary or accent color
The accent belongs on primary actions, selected states, important links, or notifications that users need to notice. Its smaller area lets a vivid color attract attention without overwhelming the page. If it appears on every button and decorative shape, it stops identifying what is truly important.
How HueRoll builds its 60–30–10 palettes
HueRoll assigns the currently selected color to “Primary / Accent — 10%.” For “Background / Surface — 60%,” it uses the lightest displayed tint, created by mixing 20% of the selected color with 80% white. It then offers two “Secondary / Supporting — 30%” candidates by rotating the selected color’s HSL hue in two directions.
Selecting one of the three color swatches makes it the current color and recalculates the panel. The selected swatch is marked Current. To use a role’s HEX code without changing the current color, use the Copy button in the list below each variant.
For example, selecting #2563EB produces #D3E0FB as the background. Variant A uses #EB4A25 as the supporting color, while Variant B uses #C6EB25. The original #2563EB remains the accent. Variant A creates a strong cool-warm contrast. Variant B combines blue, yellow-green, and a pale blue surface.
These are consistent calculated suggestions, not promises of perfect harmony or accessibility. If the supporting color feels too strong, reduce its saturation, change its lightness, or try a tint. Always check text contrast separately after assigning real content to each role.
Compare Variants A and B
| Role | A | B |
|---|---|---|
| Background · 60% | #D3E0FB | #D3E0FB |
| Supporting · 30% | #EB4A25 | #C6EB25 |
| Accent · 10% | #2563EB | #2563EB |
In this example, the background and accent stay the same; only the supporting color changes. The table displays color samples for comparison. Its cell sizes do not represent the 60–30–10 proportions.
Applying the palette to a website
- Choose a brand color, primary button color, or another useful base color in HueRoll.
- Compare 60–30–10 Variants A and B and choose the one closer to the intended mood.
- Use the three Copy buttons below the chosen variant to copy the role colors into your design without changing the current color.
- Temporarily assign the 60% color to the page and card surfaces, the 30% color to sections or navigation, and the 10% color to primary actions.
- Place real content in the layout and check whether the visual hierarchy feels natural. Use text, icons, or other cues alongside color to distinguish meaning.
- Select the color swatch itself—not its Copy button—for each color that will hold text, then check its white and black contrast ratios.
- To keep the candidates, enter each of the HEX codes you copied earlier, press Apply, and use Save to My Palette. Colors are saved individually, not as a three-color set.
- Check your finished design on desktop and mobile in normal and interactive states. My Palette does not sync between devices, so keep a separate copy of the codes you need.
Where the rule works well
The rule is a useful starting point for landing pages, company websites, dashboards, and presentations where the design naturally separates into background, supporting structure, and primary action. It can also help when too many colors make a layout feel disorganized or when you are unsure how prominently a brand color should appear.
It may be less direct when photography occupies most of the page, when a chart needs several equally important series, or when an operational interface has fixed colors for different states. A dark theme also needs a different role assignment: HueRoll’s light tint is not automatically an appropriate dark-mode background.
Review the roles before adding more colors
If a design feels flat, it may not need a fourth or fifth color. Changing the background tint, lowering the supporting color’s saturation, or limiting where the accent appears can create a clearer hierarchy with the same three colors. Semantic colors for success, warning, and error can be managed separately when the product needs them.
The 60–30–10 rule is not an automatic design generator. It gives the team a shared way to discuss color roles. Generate candidates in HueRoll, place them in the real interface, adjust them, and verify contrast. That process turns a three-color preview into a palette that supports the content and the user’s next action.
Adjust the supporting and text colors
Use the complementary and analogous color guide to explore a different supporting color, or the contrast guide before placing text on a background or button. Return to HueRoll to check each adjusted color.