Using Colour Effectively

Primary, Secondary & Accent Colours

Effective colour application starts with understanding the role each colour in your palette is meant to play. If you are not yet familiar with what different colours communicate, start with What Different Colours Communicate. Most brand palettes work with three categories of colour: primary, secondary, and accent.

Primary colour

Your primary colour is the dominant colour of your brand. It appears most frequently and carries the most visual weight. It is typically used for major headings, key backgrounds, and the most important interactive elements. Your primary colour should be immediately recognizable as yours.

Secondary colour

Your secondary colour supports the primary. It is used for backgrounds, section dividers, supporting text elements, and areas where the primary colour would be too heavy. Secondary colours are often lighter or more neutral versions of the primary, or a complementary tone that creates visual variety without competing.

Accent colour

Your accent colour is used sparingly to draw attention to specific elements. Calls-to-action, links, highlights, and important labels are the primary uses. Because it appears infrequently, the accent colour retains its ability to attract attention. Overuse destroys this function.

Website Colour Hierarchy

Colour hierarchy is the system by which colour guides a visitor's eye through a page in a deliberate order. Without hierarchy, every element competes for attention equally and the page feels overwhelming. With hierarchy, visitors naturally move from the most important information to the least.

On a typical business website, colour hierarchy works like this:

• The hero section uses the strongest colour contrast to establish the brand and capture attention
• Section headings use the primary brand colour or a dark neutral to signal new topics
• Body text uses a dark neutral (not pure black) for comfortable reading
• Supporting text, captions, and metadata use a lighter muted tone to signal lower priority
• Calls-to-action use the accent colour to stand out from surrounding content
• Borders and dividers use very light tones that create structure without visual noise

When this hierarchy is consistent across every page, visitors learn the visual language of your site quickly. They know where to look for the most important information and where to find the next action.

Colour And Calls-To-Action

Your call-to-action button is the most important colour decision on most pages. It needs to be immediately visible, clearly interactive, and distinct from every other element on the page.

The most effective CTA colours are those that contrast strongly with the surrounding background and are not used for any other purpose on the page. If your accent colour appears on links, icons, borders, and section labels, it loses its ability to make the CTA stand out.

CTA colour principles

• The CTA button colour should appear nowhere else on the page in the same weight
• It must contrast sufficiently with both the button background and the page background
• Hover states should be a slightly darker or lighter version of the same colour, not a completely different colour
• Secondary CTAs (such as outline buttons) should be visually subordinate to the primary CTA

Using Colour For Visual Scanning

Most website visitors do not read pages linearly. They scan. They look for visual anchors — headings, images, buttons, and colour blocks — that help them decide whether to read more carefully.

Colour can support scanning by creating clear visual landmarks. When used consistently, colour tells visitors what type of content they are looking at before they read it.

Practical scanning patterns

• Use a consistent background colour for callout boxes so visitors recognize them as supplementary information
• Use a consistent colour for category labels so visitors can quickly identify content type
• Use alternating section backgrounds (white and light grey, for example) to create clear page rhythm without adding visual noise
• Use colour consistently for interactive elements so visitors learn what is clickable

The goal is not to make the page colourful. The goal is to make colour meaningful. When every colour choice communicates something specific, visitors can navigate your content more efficiently.

Consistency Across Pages

Colour consistency across pages is one of the most important and most frequently neglected aspects of colour application. When colours shift between pages — even subtly — visitors lose confidence in the brand.

Consistency means more than using the same colours. It means using them in the same roles, at the same weights, in the same contexts. The primary button on your homepage should look identical to the primary button on your contact page. The section label colour on your services page should match the section label colour on your about page.

How inconsistency happens

• Pages built at different times without a shared style reference
• Inline styles that override the stylesheet for one-off adjustments
• Different team members making independent colour decisions
• Copying content from external sources that brings its own colour formatting

The solution is a documented colour system — a record of which colours are used for which purposes — that everyone working on the site can reference. Even a simple one-page document listing your colour codes and their intended uses prevents most consistency failures.

Colour In Navigation Components

Navigation is one of the most colour-sensitive areas of a website because it appears on every page and visitors interact with it repeatedly. Colour decisions in navigation have an outsized impact on the overall brand impression.

Active and current states

The current page link in your navigation should be visually distinct from inactive links. Using your primary brand colour for the active state is a common and effective approach. It reinforces the brand colour while providing useful orientation information.

Hover states

Hover states should be predictable. If links turn your primary colour on hover, that should be true for all links in the navigation. Inconsistent hover behaviour creates confusion about what is interactive.

Dropdown menus

Dropdown menus should use the same background colour as the rest of the navigation or a clean white/light surface. Introducing a new colour in a dropdown creates visual discontinuity. Borders and dividers within dropdowns should use very light tones that create structure without competing with the content.

Mobile navigation

Mobile navigation panels should maintain the same colour system as the desktop navigation. A common mistake is using a dark overlay or a completely different background colour for the mobile menu, which creates a jarring visual break from the rest of the site.

Practical Usage Examples

The following examples illustrate how the principles above apply in practice.

Professional services website

Primary: deep navy. Secondary: white and light grey. Accent: a single warm teal used only on the primary CTA button and active navigation links. Body text: dark charcoal. Supporting text: medium grey. Section dividers: very light grey border. Result: a clear hierarchy where the CTA is always the most visually prominent interactive element.

Healthcare provider

Primary: medium blue. Secondary: white. Accent: a slightly warmer blue used for links and the appointment booking button. Category labels for different service types use small coloured dots (blue for general, green for wellness, grey for administrative) to help visitors scan quickly. The colour system is simple enough that patients under stress can navigate without confusion.

Restaurant

Primary: deep burgundy. Secondary: warm cream. Accent: gold used only on the reservation button and the logo mark. Menu section headings use the primary burgundy. Food category labels use a lighter version of the same tone. The palette is warm and appetizing without being chaotic.