How to Choose Header Colors | A Color Scheme That Fits the Whole Website

A website header is often one of the first things visitors notice. It holds the logo, navigation, and sometimes a shortcut to booking or another important task. A dark header may attract attention, but it can also feel disconnected if the content and photography below it use an unrelated palette. A pale header, meanwhile, may make its logo or links harder to locate. Choose the header colors alongside the next section of the page, keeping in mind what visitors need to find. This example uses a sea-kayaking experience and booking website.

Choose header colors alongside the logo, links, and the section below

Start by deciding what actually belongs in the header. A kayaking experience site might need its name and links for “Tours,” “Prices,” and “Getting here,” plus a shortcut to view available dates. Longer descriptions belong in the content below. Choose a header surface that relates to the site’s main colors, then give navigation text a clear light-dark difference from that surface. A contrast ratio expresses the difference in relative luminance between two adjacent colors.

Do not approve a header palette in isolation. View it above the actual hero section, photographs, and page background. A deep blue-green header can establish a recognizable entry point while a lighter panel underneath holds the introduction and details. If the hero uses a changing or complex photograph, placing a solid surface behind critical text is more predictable than relying on every part of the photograph to provide sufficient contrast.

Brand logos may have fixed colors and artwork. Instead of recoloring them casually, consider whether an approved white or single-color version is available for a dark header. Under WCAG 2.2 (Web Content Accessibility Guidelines), text that forms part of a logotype is exempt from the ordinary text-contrast requirement, but visitors still need to find and use any home-page navigation provided by the logo.

Example color scheme for a sea-kayaking experience website

Imagine a site showing tour photographs, session durations and prices, meeting locations, and available booking dates. HEX means hexadecimal notation for specifying a web color. Here, a deep blue-green header sits above lighter photography and content areas, rather than making the entire page dark.

• Header background: Use deep blue-green ■#244E60 across the header. A pale blue-green-gray ■#E8F0ED introduction immediately below it differs by approximately 7.76:1. The dark area is limited to the header rather than extending through the longer tour descriptions.
• Logo mark and site name: Use pale sand ■#F4DEB0 for a small wave-shaped brand symbol and white ■#FFFFFF for the adjacent site name. Against the deep blue-green header ■#244E60, the mark contrasts by about 6.82:1 and the white lettering by about 9.00:1. Give the linked logo a meaningful name instead of assuming its symbol alone explains the destination.
• Ordinary navigation links: Use white ■#FFFFFF for “Tours,” “Prices,” and “Getting here.” Against the header blue-green ■#244E60, their contrast ratio is approximately 9.00:1. Rely on clear wording and spacing instead of introducing a different accent color for each destination.
• “View available dates” shortcut: Within the header, use a pale sand ■#F4DEB0 button with dark gray ■#293A40 lettering. Text-to-button contrast is about 8.98:1, and the button differs from the surrounding blue-green ■#244E60 by about 6.82:1. This is a quick way to check the schedule, not the main booking action.
• Expanded mobile navigation: On a narrow screen, use a deeper blue ■#1C3F50 for the expanded menu and white ■#FFFFFF for its links, giving approximately 11.19:1 text contrast. Provide a visible “Menu” label alongside the familiar three-line icon and retain the same navigation destinations when the list opens.
• Keyboard focus within the header: Give focused navigation links a pale sand ■#F4DEB0 outline. It contrasts by about 6.82:1 with the main header ■#244E60 and about 8.49:1 with the deeper mobile menu ■#1C3F50. Keyboard focus should be visually identifiable rather than relying only on the pointer hover treatment.
• Introduction next to the hero photograph: Put the opening text on a solid pale blue-green-gray ■#E8F0ED surface beside the photograph. Dark gray ■#293A40 body text has about 10.22:1 contrast there. Deep blue headings ■#275867 against the same pale surface have approximately 6.77:1, relating the introduction to the header without repeating its dark background.
• Tour descriptions and prices: Use warm off-white ■#F8F7F2 for the reading background with dark gray ■#293A40 text, providing about 11.04:1 contrast. Deep blue headings ■#275867 have about 7.31:1 contrast against that off-white surface. Do not carry the header’s dark background across every text-heavy section.
• Meeting-point and packing-list cards: Use dark gray ■#293A40 text on white ■#FFFFFF cards for approximately 11.84:1. The white cards ■#FFFFFF differ from the off-white page ■#F8F7F2 by only about 1.07:1, so add gray-blue ■#73858B borders where a clearer edge is useful. The border contrasts by about 3.85:1 with white ■#FFFFFF.
• Main “Book an experience” button: In the light content area, use a deep terracotta ■#984832 button with white ■#FFFFFF lettering. Text contrast is about 6.35:1, while the button differs from the surrounding off-white ■#F8F7F2 by approximately 5.92:1. Keep this application action distinct from the pale schedule shortcut in the header.

The important decision is not simply to spread the main blue-green color across as much of the website as possible. Related blues can appear in headings, while bright reading surfaces and a separate booking action give the header a natural connection to the rest of the page.

Recheck photography, sticky headers, and smaller screens

A transparent header placed over photographs changes appearance as the photograph or scrolling position changes. White lettering that works above a dark area of one image may disappear against a brighter part of another. Use a solid header surface or an opaque backing behind the text, then check the actual overlapping states. The same issue matters when a sticky header stays at the top of the screen as visitors scroll.

Moving the terracotta reservation button ■#984832 directly onto the dark blue-green header ■#244E60 would leave only about 1.42:1 contrast between the two surfaces. A button that stands out on the light page may have an unclear edge inside the dark header. Keep the pale sand shortcut in the header and the terracotta booking button within the light content area.

WCAG 2.2 Level AA generally requires at least 4.5:1 contrast for normal-sized text, at least 3:1 for large text, and at least 3:1 for essential non-text visual information needed to identify controls against adjacent colors. Review the logo, navigation, buttons, and visible keyboard focus as the screen width changes. HueRoll can compare a selected color with white or black, but it cannot directly compare arbitrary pairs of custom colors or automatically assess WCAG AA or AAA compliance. The custom-pair ratios in this article were calculated separately.