Where Should You Use the Primary Color? Basic Placement Methods for Websites

A Primary color is the base color used to emphasize the most important actions and current states on a website. It may match the brand color, but that does not mean the entire page should be filled with Primary. A practical approach is to reserve it for high-priority places such as the main CTA (Call To Action, the control that prompts the action you most want the user to take), important links, and selected or active states.

Concentrate Primary on the highest-priority CTA

For example, use off-white ■#F8FAFC for the page background and royal blue ■#1D4ED8 as the Primary color. White ■#FFFFFF text on the Primary button provides about 6.70:1 contrast, while Primary against the page background provides about 6.41:1. This makes it suitable for the most important action on the screen, such as purchase, submit, reserve, or save.

By contrast, supporting actions such as Back, Cancel, or View details do not need the same filled treatment. A secondary button can use a white ■#FFFFFF background with blue-gray ■#475569 text, which provides about 7.58:1 contrast. If a visible outline is needed, slate gray ■#64748B provides about 4.76:1 against white. Keeping only the Primary action filled creates hierarchy through both color and visual weight.

Use the same Primary family for current and selected states

Material 3 describes Primary as a color used not only for prominent buttons but also for major components such as active states. On a website, using the same Primary family for the current navigation item, selected filters, or other important active states can make the interaction model more consistent.

For example, use light blue ■#DBEAFE for a selected-state background and dark blue ■#1E3A8A for its text; that pair provides about 8.49:1 contrast. If a state indicator line or icon uses the Primary ■#1D4ED8, it provides about 5.49:1 against the light-blue ■#DBEAFE background. Using a pale tint for the surface keeps the full-strength Primary focused on the most important action.

Do not turn headings, body text, and every background into Primary

If Primary is used for headings, body text, icons, backgrounds, and every link, the most important action can lose its visual priority. Keep most of the interface neutral—for example, dark navy ■#0F172A for headings, dark blue-gray ■#334155 for body text, and off-white ■#F8FAFC for the page background—then reserve Primary for places where you want users to act or recognize the current state.

W3C Use of Color also requires that color not be the only visual means of conveying information. Do not indicate the current location or selected state with Primary alone; reinforce it with an underline, heavier text, a check mark, a label, 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.

In HueRoll, you can adjust candidate colors with three- or six-digit HEX values or the color picker, and review tints, shades, palette suggestions, the 60–30–10 Palette, and contrast between the selected color and white or black. HueRoll does not compare arbitrary custom color pairs or automatically determine WCAG AA or AAA conformance, so the actual Primary, background, text, and state-color combinations need to be checked separately.