How Should You Choose Colors for a Campaign Banner? Web Color Schemes That Stand Out Without Looking Out of Place

A campaign banner needs to attract attention, but adding too many colors that are disconnected from the rest of the page can make the promotion look pasted on. One practical approach is to keep the site’s existing text or main color, then limit the campaign color to a specific role such as the background, label, or CTA (call to action, the main button you want people to click). The example below starts with a white ■#FFFFFF page and combines pale and deep blues.

Keep a site base color and add the campaign color around it

Instead of giving the banner a completely separate palette, keep one of the dark colors already used for body text or headings. For example, if a site uses dark navy ■#1F2937 for body text and white ■#FFFFFF for the page background, the banner can switch to pale blue ■#EEF4FF while retaining dark navy ■#1F2937 for its heading. This keeps part of the page’s established reading pattern inside the promotion.

Dark navy ■#1F2937 against pale blue ■#EEF4FF has a contrast ratio, the difference in relative luminance between a foreground and its background, of about 13.29:1. If only the campaign name or a short label uses blue ■#2457A6, it has a ratio of about 6.36:1 against pale blue ■#EEF4FF. Rather than adding more unrelated colors, using shades from the same family together with an existing text color makes it easier to control where attention goes.

Give the background, heading, and CTA different roles

For a concrete example, use pale blue ■#EEF4FF for the banner surface, dark navy ■#1F2937 for the heading, blue gray ■#475569 for supporting text, royal blue ■#1D4ED8 for the CTA, and white ■#FFFFFF for the CTA text. Blue gray ■#475569 against pale blue ■#EEF4FF has a ratio of about 6.86:1, while white ■#FFFFFF against royal blue ■#1D4ED8 has a ratio of about 6.70:1.

With this division of roles, the large background area stays pale, the heading keeps the site’s established dark text color, and only the CTA uses a stronger color. A banner can therefore make its primary action prominent without making every part vivid. If a seasonal campaign adds another color such as orange or pink, keep it to a limited role such as a label or decoration instead of changing every element, while leaving the body-text and CTA roles consistent.

Check photos, boundaries, and meanings that rely on color

When text sits over a photo or gradient, the background lightness varies across the area, so readability cannot be judged from a single HEX code alone. HEX is a hexadecimal notation used to represent colors on the web. WCAG (Web Content Accessibility Guidelines) 2.2 requires a contrast ratio of at least 4.5:1 for normal-size text and at least 3:1 for large text. Check the actual area behind the text, including the part with the lowest contrast.

Pale blue ■#EEF4FF and white ■#FFFFFF have a ratio of only about 1.10:1. If the entire banner is clickable and its outline is necessary to identify the interactive area, do not rely on that color difference alone as the boundary. For example, a slate gray ■#64748B border has a ratio of about 4.31:1 against pale blue ■#EEF4FF. WCAG 2.2 requires at least 3:1 contrast against adjacent colors for non-text visual information needed to identify user-interface components or states.

Do not distinguish campaign types or states by color alone; add visible wording such as “Limited Time” or “New Members.” In HueRoll, you can adjust candidate colors with three- or six-digit HEX values or the color picker, then compare the selected color with white and black. HueRoll does not compare arbitrary color pairs or automatically determine WCAG AA or AAA conformance, so verify the actual adjacent combinations used for the banner background, text, CTA, and boundaries separately.