Navy and Mustard Color Scheme Examples: How to Assign Main and Accent Colors

Navy and mustard combine a dark blue with a warm yellow. Rather than giving both colors equal space, it helps to decide which one will lead the design. Using a product page for a leather-goods brand, this article compares a navy-led layout with one where mustard takes center stage. Color names can refer to different shades, so we will use navy ■#1F2A44 and mustard ■#C9A227 as specific examples. HEX is a six-digit code of numbers and letters used to specify colors on the web.

Give the main color more space and reserve the accent for key elements

Navy ■#1F2A44 is a dark, muted blue that can cover a large background while allowing lighter text or buttons to stand out. Mustard ■#C9A227 is a subdued yellow, but next to navy it looks considerably brighter. An accent color is a color used in a limited area—such as a purchase button or a short announcement—to draw attention without covering the whole page.

If the aim is to present product textures and photographs with a restrained look, make navy the main color and reserve mustard for purchasing information. If the aim is to announce a limited-edition item more boldly, you can lead with mustard and use navy for text and controls. The impression is not determined by the color pair alone; the amount of space each color occupies and the order of information matter too.

Two ways to color a leather-goods product page

Example 1: Navy as the main color. Make the large product-introduction section navy ■#1F2A44 and show the product name and short description in off-white ■#F8F6EE. The contrast ratio between this text and its background is approximately 13.18:1. A contrast ratio measures the difference in relative brightness between adjacent colors.

Use mustard ■#C9A227 only for the “View Product” button and place navy ■#1F2A44 lettering on it. Text against the button has approximately 5.89:1 contrast, and the mustard button also contrasts with the surrounding navy at approximately 5.89:1. Below the introduction, switch to an off-white ■#F8F6EE background for the product details, with dark blue-gray ■#334155 body text (approximately 9.57:1). The navy area presents the product as a coherent section, while the small mustard area points to the purchasing action.

Example 2: Mustard as the main color. Use mustard ■#C9A227 as the background of a limited-edition announcement, with navy ■#1F2A44 for the heading and sale-period details. These colors have approximately 5.89:1 contrast, making this pair suitable even for normal-size text under the relevant contrast standard.

Here, reverse the button colors: make the “Learn More” button navy ■#1F2A44 and its lettering off-white ■#F8F6EE. The text and button background contrast at approximately 13.18:1, while the button differs from the surrounding mustard at approximately 5.89:1. Return to off-white ■#F8F6EE for prices and specifications, with dark blue-gray ■#334155 for the text. When a lighter color leads the layout, the darker one can carry the text and primary action.

Be careful with white text on mustard and mustard on pale backgrounds

White ■#FFFFFF text on mustard ■#C9A227 gives a contrast ratio of only about 2.42:1. WCAG 2.2, the Web Content Accessibility Guidelines, requires at least 4.5:1 for normal-size text and 3:1 for large text at Level AA, so avoid that combination. For this mustard shade, use navy ■#1F2A44 lettering instead.

Mustard ■#C9A227 against off-white ■#F8F6EE also provides only about 2.24:1 contrast. A mustard button on such a pale background may have an indistinct edge. Essential non-text information, such as a visible boundary needed to identify a control, sometimes needs at least 3:1 contrast against adjacent colors. Place the button on a navy background, or use a sufficiently dark border and clear text to make its function apparent.

Changing either HEX value changes the contrast ratios, even if the names stay the same. HueRoll lets you enter HEX codes and see a selected color’s contrast against white and black. It does not automatically compare two arbitrary colors or judge AA compliance, so check each actual background, text, and button combination separately.