How to Use a Darker Brand Color on a Website | Examples for Text and Navigation

When you want to reuse a brand color for text and navigation, the exact color used in a logo or decorative element may not provide enough contrast on a white background. In that case, keep the brand hue as the starting point while creating darker derived colors for functional UI (user interface) roles. This example starts with a fairly bright blue and shows how to extend it into text, links, current navigation states, and dark navigation backgrounds.

Check the original brand color against white before using it for text

Use blue ■#3B82F6 as the base brand color. As normal-size text on white ■#FFFFFF, it provides a contrast ratio—the relative luminance difference between foreground and background—of about 3.68:1. WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 for normal-size text at Level AA, so this pair is not sufficient for that use.

For a darker text or link candidate, royal blue ■#1D4ED8 provides about 6.70:1 contrast against white ■#FFFFFF. A deeper navy blue ■#1E3A8A provides about 10.36:1. You can keep the exact brand color in the logo or large decorative elements while assigning darker derived colors to functional text, preserving a visual relationship without forcing one HEX value into every role.

HueRoll shows four Shades, where a shade is a darker color made by adding black to the base color. Use those shades to compare darker directions, then fine-tune with a three- or six-digit HEX value or the color picker if needed.

In navigation, separate normal items, the current item, and dark backgrounds

On a white navigation background, blue-gray ■#475569 works as a normal navigation text color with about 7.58:1 contrast against white ■#FFFFFF. The current item can use the darker brand-derived ■#1D4ED8 to add brand emphasis while keeping sufficient text contrast.

However, changing the current item to blue should not be the only cue. W3C Use of Color requires that color not be the only visual means of conveying information. Add another visible cue such as an underline, heavier text, or a distinct shape for the current page.

If the whole header uses a dark brand treatment, navy blue ■#1E3A8A with white ■#FFFFFF text provides about 10.36:1 contrast. Moving the navigation background to a darker derived color can make white text practical without forcing the brighter original ■#3B82F6 into a role where its text contrast would be weaker.

Darker is not always better; stop at the level each role needs

Darkening a brand color can make it more useful for text, but using the darkest variation everywhere removes hierarchy between headings, body text, navigation, and links. One approach is to use ■#1D4ED8 for links or the current navigation item and reserve ■#1E3A8A for a dark navigation background or a stronger heading treatment.

HueRoll’s shades are starting points rather than automatic accessibility approvals. Its contrast section compares the selected color with white and black only; it does not compare arbitrary custom color pairs or automatically determine WCAG AA or AAA conformance. Check the real foreground-background combinations used for text, navigation backgrounds, hover states, and current states separately.