How to Use Blue and Yellow in Banners | Choose the Dominant Color and Adjust the Proportions

Blue and yellow can compete for attention when they cover equal areas of a banner. Choosing one dominant color first makes it easier to organize the message. This article compares a trade show announcement and a limited-time promotion using the same blue ■#174A78 and yellow ■#F4D35E. A HEX code is a hexadecimal way to specify a color on the web.

Let one color lead and give the other a specific purpose

Start with the information viewers should notice first. For an event banner where the venue and schedule need a calm, organized layout, blue can cover the main background while yellow is reserved for the registration button. For a short-term promotion, a larger yellow area can carry the announcement, with blue used to anchor headings and buttons. These are layout suggestions, not fixed promises about how either color will feel; photography and text density also matter.

One possible starting point is roughly 60% for the main color, 30% for near-white space and 10% for the accent. This is not a required formula. A bright yellow can draw attention even in a small area, so adjust the balance according to which information should be read first rather than relying on percentages alone.

Two banner schemes using the same blue and yellow

Both examples use blue ■#174A78, yellow ■#F4D35E, off-white ■#FBFAF6 for breathing room, and dark blue-gray ■#152C43 for text. Here are the shared color swatches.

Example 1: Blue-led trade show announcement

Use blue ■#174A78 across approximately 65% of the banner and place the event name and date in white ■#FFFFFF. The text-to-background contrast ratio (a measure of their relative brightness difference) is approximately 9.18:1. Put the venue and opening hours in a lower off-white ■#FBFAF6 section, with dark blue-gray ■#152C43 text at approximately 13.65:1.

For a “Register to Attend” button, pair a yellow ■#F4D35E fill with dark blue-gray ■#152C43 text. Their contrast ratio is approximately 9.72:1. Keeping yellow to about one-tenth of the banner helps separate the registration action from the other information. Yellow against the surrounding blue also has a contrast ratio of approximately 6.26:1.

Example 2: Yellow-led limited-time promotion

Expand yellow ■#F4D35E to approximately 55% of the banner and show the offer and dates in dark blue-gray ■#152C43 headings. That combination has a contrast ratio of approximately 9.72:1. Move longer details to an off-white ■#FBFAF6 area, using the same dark blue-gray ■#152C43 text.

For a “View Details” button, use a blue ■#174A78 fill with white ■#FFFFFF text, at approximately 9.18:1. Reserving blue mainly for the button and a small heading distinguishes the action from the yellow announcement area. The boundary between yellow and off-white is only approximately 1.40:1, so use spacing or a dark blue divider where a clear separation is needed.

Check color proportions and text visibility before publishing

If a 50–50 blue-and-yellow split makes the focal point unclear, reduce one large color area and reserve that color for a button or short label instead. On a phone, a button may occupy a larger share of the design; check the reduced layout to see whether the headline, date and action still have a clear reading order.

White ■#FFFFFF text on yellow ■#F4D35E offers only approximately 1.47:1 contrast, which is insufficient for normal text. Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, the intermediate conformance level, normal text requires at least 4.5:1 and qualifying large text at least 3:1. Essential non-text elements, such as a necessary button boundary, may also need 3:1 contrast against adjacent colors.

These figures were calculated for opaque, solid colors. If text overlaps a photo or gradient, check the actual background behind it. HueRoll lets you enter HEX values, adjust colors and compare a selected color against white and black. It does not compare arbitrary color pairs or automatically certify AA conformance, so verify the final combinations separately in the actual design.