What Are the Roles of UI Colors? How to Use Primary, Secondary, and Accent Colors

When choosing UI (user interface) colors, it is often easier to organize them by role—such as Primary, Secondary, and Accent—rather than by color names such as blue, green, and orange. These terms do not have one universal definition across every design system. In this article, Primary means the highest-priority action role, Secondary means supporting actions and classification, and Accent means a small-area color used to attract attention.

Use Primary, Secondary, and Accent as different levels of priority

Primary is used for the highest-priority elements, such as the main CTA (Call To Action, the control that prompts the action you most want the user to take) and important selected states. Secondary supports lower-priority actions, categories, filters, and related grouping. Accent is reserved for small attention points such as a NEW badge or a short highlight.

The three roles do not have to use three completely different hues. On a simple site, Primary and Accent can come from the same color family, while Secondary can even be neutral. What matters is that the roles do not compete and that users can tell where their attention should go.

Material 3 uses different terminology: it groups Primary, Secondary, and Tertiary under “accent colors.” That means the Accent role used in this article should not automatically be treated as identical to Material 3’s Tertiary role. Define the role names within the design system you are actually using.

Place all three roles in one screen to see the difference clearly

For example, use off-white ■#F8FAFC for the page background and dark blue-gray ■#334155 for body text. That pair provides about 9.90:1 contrast. Then use royal blue ■#1D4ED8 as Primary, with white ■#FFFFFF text on the main button, which provides about 6.70:1 contrast.

For Secondary, use teal ■#0F766E for supporting links or for text and icons inside clearly defined chips on white ■#FFFFFF. The contrast ratio is about 5.47:1. Keep the component size and area quieter than the Primary treatment instead of creating many equally strong filled buttons.

For Accent, orange ■#C2410C can be used for a small badge whose meaning is also written as text, such as “NEW.” White ■#FFFFFF text on that orange provides about 5.18:1 contrast. Limiting Accent to short emphasis keeps it from becoming a second competing Primary action.

Write down the roles before choosing colors, and keep semantic colors separate

Before choosing hues, write a one-line role map such as “Primary = highest-priority action,” “Secondary = supporting action or grouping,” and “Accent = small emphasis.” This reduces the chance of creating several colors with the same visual importance. Error, success, warning, and other meaning-bearing colors are easier to manage separately as Semantic colors—colors assigned a specific meaning.

W3C Use of Color requires that color not be the only visual means of conveying information. Do not indicate selected, error, or NEW states with color alone; add text, icons, underlines, shapes, or another visible cue. WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 contrast for normal-size text against its background.

HueRoll’s 60–30–10 Palette displays three area roles: “Background / Surface,” “Secondary / Supporting,” and “Primary / Accent.” Because Primary and Accent are combined into the same 10% role there, HueRoll does not automatically split the Primary, Secondary, and Accent model in this article into three separate colors. In HueRoll, you can adjust colors with three- or six-digit HEX values or the color picker and review tints, shades, palette suggestions, and contrast between the selected color and white or black. It does not compare arbitrary custom color pairs or automatically determine WCAG AA or AAA conformance, so verify the actual combinations separately.